C#——通过XML读取左侧菜单实现Extjs菜单动态加载
2010-05-31 18:38
721 查看
项目中使用到了Extjs,使用了Extjs的边框布局,分为top,west,center。
左侧为菜单部分,最初直接写在JS文件中,今天看了一下,觉得这样写对于以后扩展来说不是特别好,但用什么去替换呢,想来想去还是用XML文件替换更方便一些,这样方便扩展,也方便以后添加一个新的菜单。
其实实现原理很简单,关键是C#对于XML文件的解析操作。
操作的第一步当然是要创建XML文件并制定规则:
此处定义了二个菜单,以及3个子栏目。在CS文件中只要按照此规则进行文件的读取即可。
这样就实现了动态创建过程,重点就是对于XML文件的读取和XML文件规则的制定。
上面文件方法中的:System.Web.Configuration.WebConfigurationManager.AppSettings["menufilepath"]此处将文件路径保存在WebConfig.xml文件里。
当然写了这么多东西都是为了在页面展示,页面中要给代码留下来相应的位置,以便加载使用:
这样后台只需要调用上面的方法来完成内容的加载:
这样就完成了通过XML文件来动态加载Extjs左侧菜单功能。
个人博客:
www.52cfml.com
左侧为菜单部分,最初直接写在JS文件中,今天看了一下,觉得这样写对于以后扩展来说不是特别好,但用什么去替换呢,想来想去还是用XML文件替换更方便一些,这样方便扩展,也方便以后添加一个新的菜单。
其实实现原理很简单,关键是C#对于XML文件的解析操作。
操作的第一步当然是要创建XML文件并制定规则:
<?xml version="1.0" encoding="utf-8" ?> <menuroot> <menu id="menu1" class="x-hidden" name="菜单一"> <info src="../images/jq.png" alt="菜单栏目一" id="menu1_jq" href="连接地址1" txt="菜单栏目一"/> </menu> <menu id="menu2" class="x-hidden" name="菜单二"> <info src="../images/contract.png" alt="菜单栏目二" id="menu2_myFocus" href="连接地址2" txt="菜单栏目一"/> <info src="../images/contract.png" alt="菜单栏目二" id="menu2_list" href="连接地址3" txt="菜单栏目二"/> </menu> </menuroot>
此处定义了二个菜单,以及3个子栏目。在CS文件中只要按照此规则进行文件的读取即可。
public StringBuilder initMenu() { StringBuilder sb = new StringBuilder(); StringBuilder sbJs = new StringBuilder(); string str = ""; // 读取配置文件读取XML文件地址 string menuFile = System.Web.HttpRuntime.AppDomainAppPath.TrimEnd('//') + System.Web.Configuration.WebConfigurationManager.AppSettings["menufilepath"]; XmlDocument doc = new XmlDocument(); doc.Load(menuFile); // 加载XML文件 // 读取子节点 XmlNodeList nodes = doc.DocumentElement.ChildNodes; if (nodes != null) { foreach (XmlNode node in nodes) { // 读取菜单节点 string menuId = node.Attributes["id"].Value.ToString(); // 菜单ID string menuClass = node.Attributes["class"].Value.ToString(); // 菜单样式 string menuName = node.Attributes["name"].Value.ToString(); // 菜单名称 // 菜单栏目 XmlNodeList childNodes = node.ChildNodes; // 遍历节点 sb.Append(this.createMenuInfo(menuId, menuClass, childNodes)); sbJs.Append(@" var " + menuId + @" = new Ext.Panel({ frame: true, title: '" + menuName + @"', collapsible: true, contentEl: '" + menuId + @"', titleCollapse: true }); "); str += menuId + ","; } str = str.Substring(0, str.Length - 1); sbJs.Append(@" //添加左边 var west = new Ext.Panel({ id: 'action-panel', region: 'west', split: true, collapsible: true, collapseMode: 'mini', header: false, width: 200, minWidth: 200, maxWidth: 200, border: false, baseCls: 'x-plain', items: [" + str + @"] }); "); } // 此处于用动态加载一个JS到页面中 HtmlGenericControl script = new HtmlGenericControl("script"); script.Attributes.Add("language", "JavaScript"); script.Attributes.Add("type", "text/javascript"); script.InnerHtml = sbJs.ToString(); // 加载要使用的JS菜单 this.Page.Header.Controls.Add(script); return sb; }
这样就实现了动态创建过程,重点就是对于XML文件的读取和XML文件规则的制定。
上面文件方法中的:System.Web.Configuration.WebConfigurationManager.AppSettings["menufilepath"]此处将文件路径保存在WebConfig.xml文件里。
当然写了这么多东西都是为了在页面展示,页面中要给代码留下来相应的位置,以便加载使用:
<%--初始化左侧菜单--%> <div id="leftMenu" runat="server"> </div>
这样后台只需要调用上面的方法来完成内容的加载:
this.leftMenu.InnerHtml = this.initMenu().ToString();
这样就完成了通过XML文件来动态加载Extjs左侧菜单功能。
个人博客:
www.52cfml.com
相关文章推荐
- c#读取XML内容实现动态加载菜单
- 两个Repeater嵌套实现动态菜单(ado.net+sql和xml+Linq两种读取数据方式)
- 【原创】ExtJs实现定时读取数据,动态加载数据,页面不刷新。Struts 2框架下JSON传值
- 通过使页面动态加载不同CSS实现多界面
- 通过使页面动态加载不同CSS实现多界面
- 如何通过反射实现动态功能模块加载
- VC++通过动态生成并加载DLL,实现可执行文件的自删除
- android 动态加载 语言xml 实现国际化
- 如何通过反射实现动态功能模块加载
- AngularJs 通过 ocLazyLoad 实现动态(懒)加载模块和依赖-转
- Vue + Element UI 实现权限管理系统 前端篇(十):动态加载菜单
- 通过使页面动态加载不同CSS实现多界面
- 根据权限动态加载数据库菜单的DevExpressNavBar导航栏的实现
- 基于xml 实现动态加载权限功能树列表---EFSFrame企业级开发架构
- 实战android菜单项之XML加载菜单与动态菜单项
- C#如何通过反射实现动态功能模块加载
- ExtJS+Struts 实现树的动态加载小例子
- Android学习笔记_31_通过后台代码生成View对象以及动态加载XML布局文件到LinearLayout
- 通过配置Sitemap实现对左侧菜单的权限控制
- Echarts通过Ajax实现动态数据加载