`

C#——通过XML读取左侧菜单实现Extjs菜单动态加载

阅读更多

      项目中使用到了Extjs,使用了Extjs的边框布局,分为top,west,center。

      左侧为菜单部分,最初直接写在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

0
0
分享到:
评论

相关推荐

    extjs表格(表格后台数据读,分页),树(后台数据读取,复选框联动)的基本操作示例

    在这个例子中,GridPanel被用来从后台动态加载数据,并实现分页。后台数据读取通常涉及Ajax请求,通过Ext.Ajax或Store对象与服务器进行通信。分页功能通过配置Store的proxy和paging参数实现,如设置`autoLoad`为true...

    ExtJs与.Net结合开发实例

    通过JSON或XML格式,前后端可以交换数据,实现页面的动态更新。 **4. 数据网格(Grid)的分页显示** 在ExtJS中,数据网格是一种常见且强大的控件,用于展示大量数据。通过集成分页插件,可以实现数据的分页加载,...

    ExtJS和.NEt平台结合

    在这样的架构下,服务器端的ASP.NET页面可以生成JSON或XML格式的数据,通过AJAX请求传递给客户端的ExtJS应用。ExtJS应用接收到数据后,动态更新UI,实现数据的实时刷新和异步操作。 在SQL Server 2005中,我们可以...

    基于ExtJS+ajax技术实现的Resview CRM客户关系管理系统代码

    Resview CRM是一款基于...总的来说,Resview CRM结合了ExtJS的前端优势和Ajax的动态交互特性,通过ASP.NET平台提供了高效且用户友好的客户关系管理解决方案。各个文件和组件协同工作,确保了系统的稳定运行和高效性能。

    Ext结合asp.net综合(含代码)

    本资源"Ext结合asp.net综合(含代码)"显然提供了一个将这两者结合使用的实例,通过实际的代码实现来展示如何在ASP.NET后端与ExtJS前端之间建立数据交互。 **ExtJS** 是一个强大的JavaScript库,专门用于创建复杂的、...

    ASP.NET批量上传SwfUpload-Ext

    在ASP.NET环境中,SwfUpload可以通过JavaScript与服务器端的C#或VB.NET代码进行通信,实现文件的后台处理。 ExtJS则是一个强大的JavaScript框架,用于构建富客户端应用。它提供了丰富的UI组件,包括表格、表单、...

Global site tag (gtag.js) - Google Analytics