版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/chinahuyong/article/details/26374473
RDIFramework.NET V2.7 Web版本升手风琴+树型目录（2级+）方法
手风琴风格在Web应用非常的普遍，越来越多的Web应用都是采用这种方式来体现各个功能模块，传统的手风琴风格只支持两级模块，当我们的功能模块多于两级时，我们一般采用树来构造功能菜单（我们的框架也提供了这种方式），但这种方式没有手风琴效果美观，因此我们采用了手风琴+树的形式来构造“手风琴+树型目录（2级+）”界面风格,以展示多级功能菜单，满足用户的要求。Web展示效果如下：
一、设置SysConfig.js，增加一个展示方式，如下图所示：
RDIFramework.NET V2.7 Web版本升手风琴+树型目录（2级+）方法
二、在newlayout.js中增加一个展现形式的判断，单独判断我们新增的“AccordionTree”展示样式，如下图所示：
其中的AccordionTree.init();代码如下：
//手风琴 + tree
var AccordionTree = {
init: function () {
$.each(_menus, function (i, n) {
var cssIcon = 'icon icon-application_osx'; //没有设置图标，则取一个默认图标
if (n.iconCls) {
cssIcon = n.iconCls;
}
$('#wnav').append('<div style="padding:0px;" title="' + n.text
+ '" data-options="border:false,iconCls:\''
+ cssIcon
+ '\'"><ul id="nt'
+ i
+ '"></ul></div>');
});
$("#wnav").accordion({
fit: true,
border: false,
onSelect: function (t, i) {
$('#nt' + i).tree({
lines: false,
animate: true,
data: _menus[i].children,
onClick: function (node) {
if (node.attributes.url != "" && node.attributes.url != '#') {
addTab(node.text, node.attributes.url + '?navid=' + node.id, node.iconCls);
} else {
$('#nt' + index).tree('toggle', node.target);
}
}
});
}
});
}
}; 三、修改Default.aspx.cs代码，如下图所示： RDIFramework.NET V2.7 Web版本升手风琴+树型目录（2级+）方法
其中的：GetAccordionTreeJsonByTable代码如下：
/// <summary>
/// 根据DataTable生成AccordionTree Json树结构
/// </summary>
/// <param name="tabel">数据源</param>
/// <param name="idCol">ID列</param>
/// <param name="txtCol">Text列</param>
/// <param name="rela">关系字段</param>
/// <param name="pId">父ID</param>
/// <returns>返回json数据</returns>
private string GetAccordionTreeJsonByTable(DataTable tabel, string idCol, string txtCol, string rela, object pId)
{
result += tmpStr;
tmpStr = string.Empty;
if (tabel.Rows.Count <= 0) return result;
tmpStr += "[";
var filer = string.Format("{0}='{1}'", rela, pId);
var rows = tabel.Select(filer);
if (rows.Length > 0)
{
foreach (var row in from row in rows
let moduleType = BusinessLogic.ConvertToInt(row[PiModuleTable.FieldModuleType])
where moduleType == null || moduleType == 2 || moduleType == 3
select row)
{
tmpStr += "{\"id\":\"" + row[idCol] + "\",\"text\":\"" + row[txtCol]
+ "\",\"iconCls\":\"" + BusinessLogic.ConvertToString(row[PiModuleTable.FieldIconCss]).Replace("icon ", "")
+ "\",\"attributes\":{"
+ "\"url\":\"" + row[PiModuleTable.FieldNavigateUrl]
+ "\",\"FullName\":\"" + row[PiModuleTable.FieldFullName]
+ "\"}";
if (tabel.Select(string.Format("{0}='{1}'", rela, row[idCol])).Length > 0)
{
tmpStr += RDIFramework.WebCommon.PublicMethod.GetInt(row[PiModuleTable.FieldExpand]) == 1
? ",\"state\":\"open\""
: ",\"state\":\"closed\"";
tmpStr += ",\"children\":";
GetAccordionTreeJsonByTable(tabel, idCol, txtCol, rela, row[idCol]);
result += tmpStr;
tmpStr = string.Empty;
}
result += tmpStr;
tmpStr = string.Empty;
tmpStr += "},";
}
tmpStr = tmpStr.Remove(tmpStr.Length - 1, 1);
}
tmpStr += "]";
result += tmpStr;
tmpStr = string.Empty;
return result;
} 至此，我们“手风琴+树型目录（2级+）”界面风格整理开发完成。
附注：在Default.aspx.cs代码中，我们最初的代码已经有一个名为“GetAccordionTreeJsonByTable”的方法，请将其改名为“GetAccordionJsonByTable”，相应的调用它的地方也要同步修改下即可。
作者：
EricHu出处：
http://blog.csdn.net/chinahuyong http://www.cnblogs.com/huyong/Email：
[email protected]QQ交流：406590790
QQ群：237326100
框架博客：
http://blog.csdn.net/chinahuyong http://www.cnblogs.com/huyong RDIFramework.NET，基于.NET的快速信息化系统开发、整合框架，给用户和开发者最佳的.Net框架部署方案。
关于作者：高级工程师、信息系统项目管理师、DBA。专注于微软平台项目架构、管理和企业解决方案，多年项目开发与管理经验，曾多次组织并开发多个大型项目，在面向对象、面向服务以及数据库领域有一定的造诣。现主要从事基于
框架的技术开发、咨询工作，主要服务于金融、医疗卫生、铁路、电信、物流、物联网、制造、零售等行业。
如有问题或建议，请多多赐教！
本文版权归作者和CSDN共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，如有问题，可以通过邮箱或QQ 联系我，非常感谢。