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写的很好，我正好项目带中间自定义控件

所以我先生成

<%@ 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" onclick="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>

 

 

再在主页面调用

 

 

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" onchange="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是标记量判断是折叠还是展开的。