JQuery插件中的treeview与asp.net mvc的结合使用实例

时间:2009-10-09 10:00来源:未知 作者:admin 点击:次我要投稿  高质量的ASP.NET空间，完美支持1.0/2.0/3.5/4.0/MVC等

本文章主要介绍jquery插件中的treeview插件通过ajax异步从服务器上下载所需json字符串的实现，服务器端使用asp.net mvc实现。
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; }
    }
到此代码就全部结束。

本站推荐文章：

本站热点文章：

顶一下

(2)

100%

踩一下

(0)

0%

------分隔线----------------------------