MVC3小技巧09（MVC3树形控件）

谁借莪１个温暖的怀抱￠ 2022-09-17 13:17 117阅读 0赞

# \-  **引言** #

MVC3 [ 提供][Link 1]了基于jQuery、jQuery [ UI][UI]的基础[应用][Link 2]，缺少许多[常用][Link 3]的组件，例如：[页面][Link 4]布局、[导航][Link 5][菜单][Link 6]、树形、日期时间等等。

**03-树形控件**

MVC3 没有提供树形控件，很多[初学者][Link 7]到处寻找MVC3 Razor [ 引擎][Link 8]使用的树形控件，可能无奈之下[选择][Link 9]了Telerik、Devexpress、[Com][]p[one][]ntOne等整套[开发][Link 10]组件，又是一个从头[学习][Link 11]的开始。

这种开发组件，有它的很[优秀][Link 12]的特点：

1）提供[基本][Link 13]完整的开发[资源][Link 14]：多种皮肤、消息提示、对话框、[编辑][Link 15]窗口、菜单、树形、网格（内置[工具][Link 16]栏）、日期时间、选项卡、[下拉框][Link 17]、上传[文件][Link 18]等等，语法一致。

2）使用这样的开发组件也会形成一个群体，[可以][Link 19]找到很多资源可供参考。

这种开发组件，[弊端][Link 20]也是非常明显：

1）加载体积庞大或者数量众多的 [ JS][JS]、[CSS][] 文件

2）一般需要安装程序，提供相当数量的dll来支持运行环境

3）是否能够最快地产生纯净的[HTML][]代码，DIV+CSS提供最快的运行程序？

其实，[我们][Link 21]需要深刻[理解][Link 22][微软][Link 23]为什么提供 MVC3 + EF4 这种开发框架，而又不提供大量的开发控件给[程序员][Link 24]。其实，我们想一想：微软有着世界上最优秀的开发[团队][Link 25]，怎么不能提供类似[ASP.NET][] Web[For][]m的大量控件给我们使用？当然能，而且能够做得更好！

但是，微软看到了基于 jQuery、jQuery UI开发群体的庞大和jQuery框架的优点，最终提供给我们一种更简洁的Razor引擎的语法+jQuery的开发模式，那就是MVC3。

我感觉到，微软是想让我们抛掉过去使用现成开发组件的习惯，**MVC3可以把程序员引领到研发者的团队中来** ！

废话啰嗦了一大堆，回过头，接着说MVC3怎么使用树形控件？

我们可以选择jQuery的控件+CSS，结合MVC3的优点，生成纯净的[HTML代码][HTML 1]，快速、高效。

介绍一个JS树形控件：jquery.dynatree.js，目前版本是1.1.1

这种树形控件[功能][Link 26]很完善，常见的应用都提供了，而且，已经被用在MVC3开发框架上了，非常好用。

采用JSON格式的[数据][Link 27]源，格式：

key、title、url、isFolder、isLazy、expand、select、children

1）不带选择框的数据源

\[  
                \{title: "Item 1"\},  
                \{title: "Folder 2", isFolder: true, key: "folder2",  
                    children: \[  
                        \{title: "Sub-item 2.1"\},  
                        \{title: "Sub-item 2.2"\}  
                    \]  
                \},  
                \{title: "Item 3"\}  
            \]  
2）带选择框的数据源

var treeData = \[  
        \{title: "item1 with key and tooltip", tooltip: "Look, a tool tip!" \},  
        \{title: "item2: selected on [ in][in]it", select: true \},  
        \{title: "Folder", isFolder: true, key: "id3",  
            children: \[  
                \{title: "Sub-item 3.1",  
                    children: \[  
                        \{title: "Sub-item 3.1.1", key: "id3.1.1" \},  
                        \{title: "Sub-item 3.1.2", key: "id3.1.2" \}  
                    \]  
                \},  
                \{title: "Sub-item 3.2",  
                    children: \[  
                        \{title: "Sub-item 3.2.1", key: "id3.2.1" \},  
                        \{title: "Sub-item 3.2.2", key: "id3.2.2" \}  
                    \]  
                \}  
            \]  
        \},  
        \{title: "Document with some children (expanded on init)", key: "id4", expand: true,  
            children: \[  
                \{title: "Sub-item 4.1 (active on init)", activate: true,  
                    children: \[  
                        \{title: "Sub-item 4.1.1", key: "id4.1.1" \},  
                        \{title: "Sub-item 4.1.2", key: "id4.1.2" \}  
                    \]  
                \},  
                \{title: "Sub-item 4.2 (selected on init)", select: true,  
                    children: \[  
                        \{title: "Sub-item 4.2.1", key: "id4.2.1" \},  
                        \{title: "Sub-item 4.2.2", key: "id4.2.2" \}  
                    \]  
                \},  
                \{title: "Sub-item 4.3 (hideCheckbox)", hideCheckbox: true \},  
                \{title: "Sub-item 4.4 (unselectable)", unselectable: true \}  
            \]  
        \}  
    \];  
上面这个数据源，包含了怎么禁用选择、怎么隐藏选择框、怎么初始化激活节点、展开节点、工具提示等。

3）带地址[链接][Link 28]的数据源

\[  
                \{title: "[Search][] [ engine][engine]s", isFolder: true, expand: true,  
                    children: \[  
                        \{title: "[Google][]", url: "http://www.google.com"\},  
                        \{title: "[Yahoo][]", url: "http://yahoo.com"\}  
                    \]  
                \},  
                \{title: "jQuery", isFolder: true, expand: true,  
                    children: \[  
                        \{title: "jQuery", url: "http://www.jquery.com"\},  
                        \{title: "jQuery UI", url: "http://jqueryui.com"\},  
                        \{title: "[API][] browser", url: "http://api.jquery.com"\},  
                        \{title: "dynatree", url: "http://code.google.com/p/dynatree/"\}  
                    \]  
                \},  
                \{title: "Misc", isFolder: true, expand: true,  
                    children: \[  
                        \{title: "Welcome", url: "sample-iframe-1.html"\}  
                    \]  
                \}  
            \]  
当然，单击链接，弹出窗口打开链接，如果想要在当前页面内显示，请使用iframe，或者[内部链接][Link 29]用DIV显示[网页][Link 30][内容][Link 31]

dynatree-doc.html包含常用的各种属性和事件

常用属性，举例说明

var tree = $("\#tree");  
        tree.dynatree(\{

checkbox: false,// 是否显示选择框  
            clickFolderMode: 3,// 单击目录：1-激活, 2-展开, 3-激活并展开  
            selectMode: 1,// 选择模式：1-单选, 2-多选, 3:级联多选  
            strings: \{ loading: "正在加载…", loadError: "加载失败！" \},// 加载提示  
            init[Ajax][]: \{ url: "/System\_Area/InitTree" \}, // 初始化数据请求  
            onPostInit: function (isReloading, isError) \{// 初始化请求结束，呈现网页前  
            \},  
            onLazyRead: function (node) \{// 延迟加载下级节点  
            \},  
            onActivate: function (node) \{// 激活节点  
            \},  
            onDblClick: function (node) \{// 双击节点  
            \}  
        \});  
    \});  
当然，支持拖放[调整][Link 32]树形，具体自己看官方提供实例。

一般我们会添加一个动态树形节点类：  
    public class DynamicTreeNode  
    \{  
        public string key \{ get; set; \}  
        public string title \{ get; set; \}  
        public bool expand \{ get; set; \}  
        public bool isFolder \{ get; set; \}  
        public bool isLazy \{ get; set; \}  
        public bool select \{ get; set; \}  
        public List<DynamicTreeNode> children \{ get; set; \}  
    \}

[控制][Link 33]器接收AJAX请求，[建议][Link 34]使用EF4.1查询数据：

List<xxx> list = (from p in db.System\_Areas  
                                            select new System\_Area\_Tree() \{ AreaCode = p.AreaCode, AreaName = p.AreaName, ParentCode = p.ParentCode \}).ToList();

添加一个生成树形节点的[方法][Link 35]，业务不同，字段也不一样，自己编写这么一个类似的方法：

/// <summary>  
        /// 创建节点  
        /// </summary>  
        /// <param name="list">数据源</param>  
        /// <param name="parentNode">上级节点</param>  
        /// <returns></returns>  
        public DynamicTreeNode CreateNode(List<xxx> list, DynamicTreeNode parentNode)  
        \{  
            List<xxx> rows;  
            string parentCode = parentNode.key;  
            bool root = \*;//判断是否根节点  
            if (root)  
            \{  
                rows = list.Where(\*)).OrderBy(\*).ToList();  
            \}  
            else  
            \{  
                rows = list.Where(\*).OrderBy(\*).ToList();  
            \}  
            if (rows.Count() > 0)  
            \{  
                parentNode.children = new List<DynamicTreeNode>();  
            \}  
  
            foreach (var row in rows)  
            \{  
                DynamicTreeNode itemNode = new DynamicTreeNode();  
                itemNode.key = row.xxxCode;  
                itemNode.title = row.xxxName;  
                List<xxx> subs = \*;// [ 获取][Link 36]下级节点  
                if (subs.Count() == 0)  
                \{  
                    parentNode.children.Add(itemNode);  
                    continue;  
                \}  
  
                itemNode.isFolder = true;  
                parentNode.children.Add(CreateNode(list, itemNode));  
            \}  
  
            return parentNode;  
        \}

这个方法，我删除了限制层级的代码，延迟加载一般只需要加载下面一级子节点，限制层级就有必要了。

调用这个方法，返回JSON数据：

JsonResult jsonResult = new JsonResult() \{ JsonRequestBehavior = JsonRequestBehavior.AllowGet \};  
jsonResult.Data = CreateNode(list, rootNode);

前端 initAjax: \{ url: "/System\_Area/InitTree" \} 发出的初始化请求，自动会初始化数据。

如果初始化完成，还需要加载网格数据，一般在 onPostInit 事件中处理，或者直接AJAX请求网格数据，和树形初始化并发进行效率要高[一些][Link 37]。

如果这棵树是带选择框的，那么就需要保存数据，举例说明：

$('\#save').click(function () \{

// 获取选择内容  
            var checked = menu.dynatree("getSelectedNodes");  
            。。。  
            // 保存当前数据  
            $.ajax(\{type:'post', url: '\*', data: \*...\});  
        \});  
讲了这么多，不知道你们听明白了没有。其实，你只要看开发包的实例，就能明白怎么使用了。[动态树形1.1.1开发包见这里下载][1.1.1] 。

[Link 1]: http://www.haogongju.net/tag/%e6%8f%90%e4%be%9b
[UI]: http://www.haogongju.net/tag/UI
[Link 2]: http://www.haogongju.net/tag/%e5%ba%94%e7%94%a8
[Link 3]: http://www.haogongju.net/tag/%e5%b8%b8%e7%94%a8
[Link 4]: http://www.haogongju.net/tag/%e9%a1%b5%e9%9d%a2
[Link 5]: http://www.haogongju.net/tag/%e5%af%bc%e8%88%aa
[Link 6]: http://www.haogongju.net/tag/%e8%8f%9c%e5%8d%95
[Link 7]: http://www.haogongju.net/tag/%e5%88%9d%e5%ad%a6%e8%80%85
[Link 8]: http://www.haogongju.net/tag/%e5%bc%95%e6%93%8e
[Link 9]: http://www.haogongju.net/tag/%e9%80%89%e6%8b%a9
[Com]: http://www.haogongju.net/tag/com
[one]: http://www.haogongju.net/tag/one
[Link 10]: http://www.haogongju.net/tag/%e5%bc%80%e5%8f%91
[Link 11]: http://www.haogongju.net/tag/%e5%ad%a6%e4%b9%a0
[Link 12]: http://www.haogongju.net/tag/%e4%bc%98%e7%a7%80
[Link 13]: http://www.haogongju.net/tag/%e5%9f%ba%e6%9c%ac
[Link 14]: http://www.haogongju.net/tag/%e8%b5%84%e6%ba%90
[Link 15]: http://www.haogongju.net/tag/%e7%bc%96%e8%be%91
[Link 16]: http://www.haogongju.net/tag/%e5%b7%a5%e5%85%b7
[Link 17]: http://www.haogongju.net/tag/%e4%b8%8b%e6%8b%89%e6%a1%86
[Link 18]: http://www.haogongju.net/tag/%e6%96%87%e4%bb%b6
[Link 19]: http://www.haogongju.net/tag/%e5%8f%af%e4%bb%a5
[Link 20]: http://www.haogongju.net/tag/%e5%bc%8a%e7%ab%af
[JS]: http://www.haogongju.net/tag/JS
[CSS]: http://www.haogongju.net/tag/CSS
[HTML]: http://www.haogongju.net/tag/html
[Link 21]: http://www.haogongju.net/tag/%e6%88%91%e4%bb%ac
[Link 22]: http://www.haogongju.net/tag/%e7%90%86%e8%a7%a3
[Link 23]: http://www.haogongju.net/tag/%e5%be%ae%e8%bd%af
[Link 24]: http://www.haogongju.net/tag/%e7%a8%8b%e5%ba%8f%e5%91%98
[Link 25]: http://www.haogongju.net/tag/%e5%9b%a2%e9%98%9f
[ASP.NET]: http://www.haogongju.net/tag/ASP.NET
[For]: http://www.haogongju.net/tag/for
[HTML 1]: http://www.haogongju.net/tag/HTML%e4%bb%a3%e7%a0%81
[Link 26]: http://www.haogongju.net/tag/%e5%8a%9f%e8%83%bd
[Link 27]: http://www.haogongju.net/tag/%e6%95%b0%e6%8d%ae
[in]: http://www.haogongju.net/tag/in
[Link 28]: http://www.haogongju.net/tag/%e9%93%be%e6%8e%a5
[Search]: http://www.haogongju.net/tag/Search
[engine]: http://www.haogongju.net/tag/engine
[Google]: http://www.haogongju.net/tag/Google
[Yahoo]: http://www.haogongju.net/tag/Yahoo
[API]: http://www.haogongju.net/tag/API
[Link 29]: http://www.haogongju.net/tag/%e5%86%85%e9%83%a8%e9%93%be%e6%8e%a5
[Link 30]: http://www.haogongju.net/tag/%e7%bd%91%e9%a1%b5
[Link 31]: http://www.haogongju.net/tag/%e5%86%85%e5%ae%b9
[Ajax]: http://www.haogongju.net/tag/AJAX
[Link 32]: http://www.haogongju.net/tag/%e8%b0%83%e6%95%b4
[Link 33]: http://www.haogongju.net/tag/%e6%8e%a7%e5%88%b6
[Link 34]: http://www.haogongju.net/tag/%e5%bb%ba%e8%ae%ae
[Link 35]: http://www.haogongju.net/tag/%e6%96%b9%e6%b3%95
[Link 36]: http://www.haogongju.net/tag/%e8%8e%b7%e5%8f%96
[Link 37]: http://www.haogongju.net/tag/%e4%b8%80%e4%ba%9b
[1.1.1]: http://dynatree.googlecode.com/files/dynatree-1.1.1.zip