RDIFramework.NET V2.7 Web版本升手风琴+树型目录(2级+)方法
2023-09-27 14:20:30 时间
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”,相应的调用它的地方也要同步修改下即可。
相关文章
- abp(net core)+easyui+efcore实现仓储管理系统——入库管理之三存储过程(三十九)
- .NET - WindowStyle = hidden vs. CreateNoWindow = true?
- Task C# 多线程和异步模型 TPL模型 【C#】43. TPL基础——Task初步 22 C# 第十八章 TPL 并行编程 TPL 和传统 .NET 异步编程一 Task.Delay() 和 Thread.Sleep() 区别
- 【C#】对异步请求处理程序IHttpAsyncHandler的理解和分享一个易用性封装 【手记】走近科学之为什么明明实现了IEnumerable<T>的类型却不能调用LINQ扩展方法 【手记】手机网页弹出层后屏蔽底层的滑动响应 【手记】ASP.NET提示“未能创建类型”处理 【Web】一个非常简单的移动web消息框 【手记】解决EXCEL跑SQL遇“查询无法运行或数据库表无法打开...”
- 关于ASP.NET MVC中Response.Redirect和RedirectToAction的BUG (跳转后继续执行后面代码而不结束进程)以及处理方法
- asp.net中通过ashx转换,把代码写入.cs文件的2种方法(Ajax中应用)
- Asp.Net和LinQ中把日期转换为一定格式的字符串的方法!(最简单的一种实例)
- Asp.Net判断一个字符串是否包含某个字符的最简单方法!(示例)
- Asp.Net中Web.Config中的数据库连接字符串的调用方法(初学者实例)
- win8以上安装.NET最快方法
- .NET的Snk使用方法
- Porting .Net RSA xml keys to Java
- ASP.NET Web API 数据提供系统相关类型及其关系
- 使用MD5WithRSA来签名和验签(.NET)
- 自动回复消息-微信公众平台开发4(asp.net)
- 数字转换字母C#与VB.net方法
- 服务器的windows server 2012 r2 自带的.NET 4.5卸载了,重启服务器黑屏的解决方法
- net use使用方法
- 怎么解决xp系统不能安装NET Framework4.0?