RDIFramework.NET V2.7 Web版本升手风琴+树型目录(2级+)方法
手风琴风格在Web应用非常的普遍,越来越多的Web应用都是采用这种方式来体现各个功能模块,传统的手风琴风格只支持两级模块,当我们的功能模块多于两级时,我们一般采用树来构造功能菜单(我们的框架也提供了这种方式),但这种方式没有手风琴效果美观,因此我们采用了手风琴+树的形式来构造“手风琴+树型目录(2级+)”界面风格,以展示多级功能菜单,满足用户的要求。Web展示效果如下:
要以“手风琴+树型目录(2级+)”的风格来展示功能模块,我们需要在“系统配置”的“个性化”设置中进行个性化设置,这儿的设置可针对不同人的爱好进行各自的设置。如下图所示:
具体实现方式为以下几个步骤:
一、设置SysConfig.js,增加一个展示方式,如下图所示:
二、在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代码,如下图所示:
其中的: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://www.cnblogs.com/huyong 微博: 腾讯 Email: 406590790@qq.com QQ 交流:406590790 :16653241 平台博客: 【CSDN】http://blog.csdn.net/chinahuyong 【CNBLOGS】http://www.cnblogs.com/huyong 关于作者:高级工程师、信息系统项目管理师、DBA。专注于微软平台项目架构、管理和企业解决方案,多年项目开发与管理经验,曾多次组织并开发多个大型项目,精通DotNet,DB(SqlServer、Oracle等)技术。熟悉Java、Delhpi及Linux操作系统,有扎实的网络知识。在面向对象、面向服务以及数据库领域有一定的造诣。现从事DB管理与开发、WinForm、WCF、WebService、网页数据抓取以及ASP.NET等项目管理、开发、架构等工作。 如有问题或建议,请多多赐教! 本文版权归作者和CNBLOGS博客共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,如有问题,可以通过邮箱或QQ 联系我,非常感谢。
相关推荐
C#.net中树型目录编写的点菜系统,可以实现点菜,计算价格,重新点菜等。
asp+acess树型目录,网上搜集一共三个。
jb+数据库+三级树型菜单 jb+数据库+三级树型菜单
javascript实现无极分类,菜单内容是读取JSON格式的数据,并非写死,灵活性很强大!
JavaScript编写的java动态树型显示的菜单,动态加载树形目录结构
坏孩子无限级树型菜单采用asp.net2003与SQL2000开发,本程序仅供大家学习参考。欢迎与我联系,一起学习讨论。QQ:575799932 EMAIL:allkao@hotmail.com
这一款jQuery多级折叠手风琴菜单特效代码,通常用于网站后台管理系统左侧菜单,切换效果平滑好看。
一个无限级树型目录 yuer 17:49 2006-11-25 QQ:28551082
js代码-树型目录菜单.zip
树型目录ASP+ACESS,现在ASP.NET的比较多,这个是ASP的
树型二级菜单、二级目录实例。 用VS打开网站即可!
一个很方便简单易读的树型目录,看不懂可以加我的QQ:469208018
Div+CSS+JS树型菜单,可刷新,可用于商品、文章分类等
js+jsp+java+mysql 实现树型菜单js+jsp+java+mysql 实现树型菜单js+jsp+java+mysql 实现树型菜单
JS版本的目录树型菜单JS版本的目录树型菜单JS版本的目录树型菜单JS版本的目录树型菜单JS版本的目录树型菜单JS版本的目录树型菜单
js+html+xml树型结构非常棒, 适用于各种web语言.大家可以下了试试!很爽的
1、创建初始文件,建立根目录的“.”和“..”目录项。 2、输入命令后根据命令含义完成相应文件操作: MD:在目录文件中创建子目录,同时搜索当前目录最后一个目录项,并保存指针信息; CD:根据当前目录切换到...
易语言树型框加载目录源码,树型框加载目录,寻找目录并载入,是否存在子目录,获取树形框目录名,再次寻找填充
易语言模块树型框三级填充.rar 易语言模块树型框三级填充.rar 易语言模块树型框三级填充.rar 易语言模块树型框三级填充.rar 易语言模块树型框三级填充.rar 易语言模块树型框三级填充.rar