JQuery插件中的treeview与asp.net mvc的结合使用实例(转)-附加自己的写法

 

本文章主要介绍jquery插件中的treeview插件通过ajax异步从服务器上下载所需json字符串的实现，服务器端使用asp.net mvc实现。
treeview插件的官方demo地址：http://jquery.bassistance.de/treeview/demo/
实现步骤：
一、新建一JQueryTreeviewController，其默认的Index View内容如下：
<link rel="stylesheet" href="/Content/jquery.treeview.css" />

<script src="/Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.treeview.js" type="text/javascript"></script>
<script src="/Scripts/jquery.treeview.async.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){
  $("#black").treeview({
   url: '<%=Url.Action("GetMenuTree","JQueryTreeview") %>'
  });
});
</script>
    <h2>TreeViewIndex</h2>
    <ul id="black" class="navigateFiletree">
</ul>
从以上代码中可以看出，获取此视图后，当页面就绪时将调用GetMenuTree action方法来获取treeview插件所需要的json字符串，并且自动生成树形。
注：代码中引用的js和css文件，在下载的treeview插件包中可以找到。
二、实现GetMenuTree action方法，代码如下：

public JsonStringResult GetMenuTree()
        {
            string sql = "SELECT [ModuleID],[SuperModuleID] FROM [SysModules]";
            using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["ApplicationServices"].ConnectionString))
            {
                conn.Open();
                SqlCommand cmd = conn.CreateCommand();
                cmd.CommandText = sql;
                DataTable dt = new DataTable();
                SqlDataReader reader = cmd.ExecuteReader();
                dt.Load(reader);
                reader.Close();
                conn.Close();

                return this.JsonString(JQTreeHelper.GetJsonString(dt, "ModuleID", "ModuleID", "SuperModuleID", ""));
            }
        }
其 作用就是从数据库中读取出需要显示成树形的数据，并且调用JQTreeHelper来生成相应的json字符串，其返回结果中的JsonStringResult是自定义的一个result类，其作用基本与系统自带的JsonResult相同，只是输出文本时不再进行json序列化而已。
三、实现JQTreeHelper类，代码如下：
    /// <summary>
    /// jquery插件中的treeview控件的帮助类，用于生成treeview控件所需要的html代码结构
    /// </summary>
    public static class JQTreeHelper
    {
        public static List<JQTreeNode> GetJsonData(DataTable dtAllNodes,string idColumnName,string textColumnName,string parentIdColumnName,string rootNodeParentIdValue)
        {
            List<JQTreeNode> rootNodes = new List<JQTreeNode>();
            DataView dvRootNodes = new DataView(dtAllNodes);
            dvRootNodes.RowFilter = parentIdColumnName + "='" + rootNodeParentIdValue + "'";
            foreach (DataRowView dv in dvRootNodes)
            {
                JQTreeNode node = new JQTreeNode();
                if (dv[idColumnName] != DBNull.Value)
                {
                    node.id = dv[idColumnName].ToString();
                }
                node.text = dv[textColumnName].ToString();
               node.children = GetJsonData(dtAllNodes, idColumnName, textColumnName, parentIdColumnName, dv[idColumnName].ToString());
                rootNodes.Add(node);
            }
            return rootNodes;
        }
        public static string GetJsonString(DataTable dtAllNodes, string idColumnName, string textColumnName, string parentIdColumnName, string rootNodeParentIdValue)
        {
            List<JQTreeNode> actual;
            actual = GetJsonData(dtAllNodes, idColumnName, textColumnName, parentIdColumnName, rootNodeParentIdValue);
            //序列化后，由于默认将所有字段都序列化输出，所以需要将没有赋值取默认值的字段替换为空，以此来减少输出的字符数
            StringBuilder result = new StringBuilder();
            new JavaScriptSerializer().Serialize(actual, result);
            result.Replace("/"id/":null,", "");
            result.Replace(",/"expanded/":false", "");
            result.Replace(",/"hasChildren/":false", "");
            result.Replace(",/"classes/":null", "");
            result.Replace(",/"children/":null", "");
            return result.ToString();
        }
    }
    /// <summary>
    /// jquery插件中的treeview控件进行ajax请求时返回的json数据对象
    /// </summary>
    public class JQTreeNode
    {
        /// <summary>
        /// 树节点id
        /// </summary>
        public string id { get; set; }
        /// <summary>
        /// 树节点文本
        /// </summary>
        public string text { get; set; }
        /// <summary>
        /// 是否展开
        /// </summary>
        public bool expanded { get; set; }
        /// <summary>
        /// 是否有子节点
        /// </summary>
        public bool hasChildren { get; set; }
        /// <summary>
        /// cssclass类名称
        /// </summary>
        public string classes { get; set; }
        /// <summary>
        /// 子节点集合
        /// </summary>
        public List<JQTreeNode> children { get; set; }
    }
到此代码就全部结束。

Kevin写的很好，我正好项目带中间自定义控件

所以我先生成

[javascript] view plain copy print ?

1. <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %> 
2. <mce:style type="text/css"><!-- 
3.     
4.     .newStyle 
5.     { 
6.         border-style: dotted; 
7.         border-width: 1px; 
8.         text-align: center; 
9.     } 
10.     .newStyle1 
11.     { 
12.     } 
13.     #Text13 
14.     { 
15.         width: 307px; 
16.     } 
17.      
18. --></mce:style><style type="text/css" mce_bogus="1">    
19.     .newStyle 
20.     { 
21.         border-style: dotted; 
22.         border-width: 1px; 
23.         text-align: center; 
24.     } 
25.     .newStyle1 
26.     { 
27.     } 
28.     #Text13 
29.     { 
30.         width: 307px; 
31.     } 
32.     </style> 
33. <div id="divIframe" title="类别信息"> 
34.     <fieldset> 
35.         <legend>类别</legend> 
36.        <%-- <div style="WIDTH: 164px; HEIGHT: 196px;z-index:1; OVERFLOW: scroll;position:fixed; left:19px; bottom:363px; top:40px; border-top:solid;border-left:solid;">--%> 
37.     
38.    <ul id="browser" class="filetree" style="float:left;margin:0;padding:0;WIDTH: 164px; HEIGHT: 196px; OVERFLOW: scroll;left:0px; bottom:0px; top:0px; border-top:solid;border-left:solid;"> 
39.    <% 
40.                         List<TGProject.Models.TGSGAMESHOW> GameList = (List<TGProject.Models.TGSGAMESHOW>)ViewData["Game"]; 
41.                       foreach (TGProject.Models.TGSGAMESHOW game in GameList) 
42.                         {  
43.                             { 
44.                     %> 
45.         <li class="closed" id="<%=game.GAMECODE%>"><span class="folder" οnclick="javascript:loadDefine2('<%=game.GAMECODE%>')"> <%=game.GAMENAME%></span> 
46.          
47.             <%--<ul> 
48.                 <li><span class="file"><%=game.GAMENAME%></span></li> 
49.             </ul>--%> 
50.         </li> 
51.         <%  
52.                } 
53.            } 
54.         %>   
55.          <%--  
56.         <li class="closed"><span class="folder">Folder 2</span> 
57.             <ul> 
58.                 <li class="closed"><span class="folder">Subfolder 2.1</span> 
59.                     <ul id="folder"> 
60.                         <li><span class="file">File 2.1.1</span></li> 
61.                         <li><span class="file">File 2.1.2</span></li> 
62.                     </ul> 
63.                 </li> 
64.                 <li><span class="file">File 2.2</span></li> 
65.             </ul> 
66.         </li> 
67.         <li class="closed"><span class="folder">Folder 3 (closed at start)</span> 
68.             <ul> 
69.                 <li><span class="file">File 3.1</span></li> 
70.             </ul> 
71.         </li> 
72.         <li><span class="file">File 4</span></li>--%> 
73.     </ul> 
74. <%-- </div>--%> 
75.         <button style="float:left; position:relative; left:11%;top:5%;width: 52px">添加></button><br /> 
76.         <button style="float:left; position:relative; top:40%;width: 52px"><删除</button> 
77.        
78.          
79.    <select size="2" name="D1" style="height: 196px; width: 164px;overflow:hidden;float:right;">    
80.   <option   value="1">1</option>    
81.   <option   value="1">1</option>    
82.   <option   value="1">1</option>    
83.   <option   value="1">1</option>  
84.   </select> 
85.          
86.          <br /> 
87.         <br /> 
88.       </fieldset> 
89.      
90.    </div>  

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %> <mce:style type="text/css"><!-- .newStyle { border-style: dotted; border-width: 1px; text-align: center; } .newStyle1 { } #Text13 { width: 307px; } --></mce:style><style type="text/css" mce_bogus="1"> .newStyle { border-style: dotted; border-width: 1px; text-align: center; } .newStyle1 { } #Text13 { width: 307px; } </style> <div id="divIframe" title="类别信息"> <fieldset> <legend>类别</legend> <%-- <div style="WIDTH: 164px; HEIGHT: 196px;z-index:1; OVERFLOW: scroll;position:fixed; left:19px; bottom:363px; top:40px; border-top:solid;border-left:solid;">--%> <ul id="browser" class="filetree" style="float:left;margin:0;padding:0;WIDTH: 164px; HEIGHT: 196px; OVERFLOW: scroll;left:0px; bottom:0px; top:0px; border-top:solid;border-left:solid;"> <% List<TGProject.Models.TGSGAMESHOW> GameList = (List<TGProject.Models.TGSGAMESHOW>)ViewData["Game"]; foreach (TGProject.Models.TGSGAMESHOW game in GameList) { { %> <li class="closed" id="<%=game.GAMECODE%>"><span class="folder" οnclick="javascript:loadDefine2('<%=game.GAMECODE%>')"> <%=game.GAMENAME%></span> <%--<ul> <li><span class="file"><%=game.GAMENAME%></span></li> </ul>--%> </li> <% } } %> <%-- <li class="closed"><span class="folder">Folder 2</span> <ul> <li class="closed"><span class="folder">Subfolder 2.1</span> <ul id="folder"> <li><span class="file">File 2.1.1</span></li> <li><span class="file">File 2.1.2</span></li> </ul> </li> <li><span class="file">File 2.2</span></li> </ul> </li> <li class="closed"><span class="folder">Folder 3 (closed at start)</span> <ul> <li><span class="file">File 3.1</span></li> </ul> </li> <li><span class="file">File 4</span></li>--%> </ul> <%-- </div>--%> <button style="float:left; position:relative; left:11%;top:5%;width: 52px">添加></button><br /> <button style="float:left; position:relative; top:40%;width: 52px"><删除</button> <select size="2" name="D1" style="height: 196px; width: 164px;overflow:hidden;float:right;"> <option value="1">1</option> <option value="1">1</option> <option value="1">1</option> <option value="1">1</option> </select> <br /> <br /> </fieldset> </div>

再在主页面调用

[javascript] view plain copy print ?

1. function LoadClass() { 
2.       alert("test"); 
3.      
4.       $("#divIframe").dialog("open"); 
5.   } 
6.  
7. //弹出对话框的显示是独立的 
8.   $(function() { 
9.    
10.       $("#divIframe").dialog({ 
11.           width: 500, 
12.           height: 300, 
13.           show: 'drop', 
14.           bgiframe: false, 
15.           autoOpen: false, 
16.           draggable: true, 
17.           resizable: true, 
18.           modal: true, 
19.           dialogClass: "removeCloseBtn", 
20.           closeOnEscape: false, 
21.           position: 'top', 
22.           buttons: { 
23.               "查询": function(event, ui) { 
24.                   if ($("#tab4-account").is(":hidden")) { 
25.                       alert("打卡没有成功无法进行业务考核或您尚未选择“是”进行打卡和业务考核所以无法提交考核表单！"); 
26.                       return; 
27.                   } 
28.                   var assessid = "6,7,8,9,10,11,12,13,14,15,16,17"; 
29.                   var netbarid = $("#netNumber").html(); 
30.                   var point = $("input[name='rd1']:checked").val() + "," + $("input[name='rd2']:checked").val() + "," + $("input[name='rd3']:checked").val() + "," + $("input[name='rd4']:checked").val() + "," + $("input[name='rd5']:checked").val() + "," + $("input[name='rd6']:checked").val() + "," + $("input[name='rd7']:checked").val() + "," + $("input[name='rd8']:checked").val() + "," + $("input[name='rd9']:checked").val(); 
31.                   point = point + "," + $("input[name='rd10']:checked").val() + "," + $("input[name='rd11']:checked").val() + "," + $("input[name='rd12']:checked").val(); 
32.                   var username = ""; 
33.                   var atype; 
34.  
35.                   if (power == 6 || power == 5) 
36.                       atype = "1"; 
37.                   else if (power == 8) 
38.                       atype = "2"; 
39.  
40.                   rmark = $("#TextBox3").val(); 
41.                   if (rmark != "") { 
42.                       if (rmark != null) { 
43.                           if (rmark.indexOf("script") >= 0) { 
44.                               alert("备注含有非法字符!"); 
45.                               return; 
46.                           } 
47.                       } 
48.                       var demo = /^[/u0391-/uFFE5/w]+$/; 
49.                       if (!demo.test(rmark)) { 
50.                       } 
51.                   } 
52.                   else { 
53.                       if ($("input[name='rd3']:checked").attr("title") != "否") { 
54.                           alert("单项备注不能为空！"); 
55.                           return; 
56.                       } 
57.                   } 
58.               } 
59.           } 
60.       }); 
61.       $("#browser").treeview( 
62.       { 
63.           persist: "location", 
64.           collapsed: true, 
65.           unique: true， 
66.       
67.       } 
68.        
69.       ); 
70.   }); 
71.  
72.   function loadDefine2(index) { 
73.       alert("test"); 
74. //      $("#Gclass").empty(); 
75. //      $('#test').html(''); 
76.       //      $('#test').html('<span id="test"  style="color:#000000" mce_style="color:#000000"><select    style="  width:226px;" mce_style="  width:226px;" name="class" id="Gclass" οnchange="return;return class_onclick()"  multiple="multiple"></select></span>'); 
77.       
78.           $.ajax( 
79.              { 
80.                  url: "http://" + location.host + "/ScoreQuery.aspx/loadDefine2/" + index, 
81.                  type: "POST", 
82.                  dataType: "json", 
83.                  success: loadSuccessed2 
84.              }); 
85.   } 
86.   function loadSuccessed2(result) { 
87.        
88.       if (hasClass == 0) { 
89.            
90.           if (result.rows.length > 0) { 
91.               $.each(result.rows, function(i, item) { 
92.                   branches = $("<ul><li id=" + item.cell[0] + "><span class='file'>" + item.cell[1] + "</span></li></ul>").appendTo($("#" + item.cell[2])); 
93.                   $("#browser").treeview({ 
94.                       add: branches 
95.                   }); 
96.               }); 
97.           }//增加节点 
98.           hasClass = 1; 
99.       } 
100.       else { 
101.         
102.           if (result.rows.length > 0) { 
103.               $.each(result.rows, function(i, item) { 
104.                   branches = $("<ul><li id=" + item.cell[0] + "><span class='file'>" + item.cell[1] + "</span></li></ul>").appendTo($("#" + item.cell[2])); 
105.                   $("#browser").treeview({ 
106.                       del: branches 
107.                   }); 
108.               });//删除节点 
109.           } 
110.           hasClass = 0; 
111.       } 
112.        
113.   } 

function LoadClass() { alert("test"); $("#divIframe").dialog("open"); } //弹出对话框的显示是独立的 $(function() { $("#divIframe").dialog({ width: 500, height: 300, show: 'drop', bgiframe: false, autoOpen: false, draggable: true, resizable: true, modal: true, dialogClass: "removeCloseBtn", closeOnEscape: false, position: 'top', buttons: { "查询": function(event, ui) { if ($("#tab4-account").is(":hidden")) { alert("打卡没有成功无法进行业务考核或您尚未选择“是”进行打卡和业务考核所以无法提交考核表单！"); return; } var assessid = "6,7,8,9,10,11,12,13,14,15,16,17"; var netbarid = $("#netNumber").html(); var point = $("input[name='rd1']:checked").val() + "," + $("input[name='rd2']:checked").val() + "," + $("input[name='rd3']:checked").val() + "," + $("input[name='rd4']:checked").val() + "," + $("input[name='rd5']:checked").val() + "," + $("input[name='rd6']:checked").val() + "," + $("input[name='rd7']:checked").val() + "," + $("input[name='rd8']:checked").val() + "," + $("input[name='rd9']:checked").val(); point = point + "," + $("input[name='rd10']:checked").val() + "," + $("input[name='rd11']:checked").val() + "," + $("input[name='rd12']:checked").val(); var username = ""; var atype; if (power == 6 || power == 5) atype = "1"; else if (power == 8) atype = "2"; rmark = $("#TextBox3").val(); if (rmark != "") { if (rmark != null) { if (rmark.indexOf("script") >= 0) { alert("备注含有非法字符!"); return; } } var demo = /^[/u0391-/uFFE5/w]+$/; if (!demo.test(rmark)) { } } else { if ($("input[name='rd3']:checked").attr("title") != "否") { alert("单项备注不能为空！"); return; } } } } }); $("#browser").treeview( { persist: "location", collapsed: true, unique: true， } ); }); function loadDefine2(index) { alert("test"); // $("#Gclass").empty(); // $('#test').html(''); // $('#test').html('<span id="test" style="color:#000000" mce_style="color:#000000"><select style=" width:226px;" mce_style=" width:226px;" name="class" id="Gclass" οnchange="return;return class_onclick()" multiple="multiple"></select></span>'); $.ajax( { url: "http://" + location.host + "/ScoreQuery.aspx/loadDefine2/" + index, type: "POST", dataType: "json", success: loadSuccessed2 }); } function loadSuccessed2(result) { if (hasClass == 0) { if (result.rows.length > 0) { $.each(result.rows, function(i, item) { branches = $("<ul><li id=" + item.cell[0] + "><span class='file'>" + item.cell[1] + "</span></li></ul>").appendTo($("#" + item.cell[2])); $("#browser").treeview({ add: branches }); }); }//增加节点 hasClass = 1; } else { if (result.rows.length > 0) { $.each(result.rows, function(i, item) { branches = $("<ul><li id=" + item.cell[0] + "><span class='file'>" + item.cell[1] + "</span></li></ul>").appendTo($("#" + item.cell[2])); $("#browser").treeview({ del: branches }); });//删除节点 } hasClass = 0; } }

LoadClass是在查询按钮中调用该对话框，带树形和添加删除到select html中，然后点击某节点用each迭代出
                  $("#browser").treeview({
                      add: branches
                  });

其中hasClass是标记量判断是折叠还是展开的。