C#使用Jquery zTree实现树状结构显示_异步数据加载

JQuery-Ztree下载地址：https://github.com/zTree/zTree_v3

JQuery-Ztree数结构演示页面：  http://www.treejs.cn/v3/demo.php#_101

关于zTree的详细解释请看演示页面，还有zTree帮助Demo。

 

下面简要讲解下本人用到的其中一个实例（直接上关键代码了）：

异步加载节点数据：  

A-前台：

<link href="zTree_v3-master/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
    <script src="zTree_v3-master/js/jquery.ztree.core.js" type="text/javascript"></script>
    <script language="JavaScript" type="text/javascript">
    var setting = {
        async: {
            enable: true,
            url: "../Handler/ShoppingHandler.ashx",   //请求的一般处理程序
            autoParam: ["id"],                          //自带参数id--来自于节点id
            otherParam: { "type": "GetUserLevelList" },  //其他参数自定义
            dataFilter: filter,    //数据过滤
            type: "post"    //请求方式
        }
    };

    function filter(treeId, parentNode, childNodes) {
        if (!childNodes) return null;
        for (var i = 0, l = childNodes.length; i < l; i++) {
            childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
        }
        return childNodes;
    }

    $(document).ready(function () {
        $.fn.zTree.init($("#treeDemo"), setting);  //渲染树结构
    });
    </script>
<div class="zTreeDemoBackground left">
        <ul id="treeDemo" class="ztree"></ul>
</div>

B后台：

using MobileBusiness.Common.Data;
using MobileBusiness.Library.Passport;
using MobileBusiness.Shopping.Data;
using MobileBusiness.Shopping.Data.Common;
using MobileBusiness.Shopping.Data.Entity;
using MobileBusiness.Web.Library.Script;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using ShoppingData = MobileBusiness.Shopping.Data.Entity;

namespace MobileBusiness.Shopping.BusinessManage.Handler
{
    /// <summary>
    /// Shopping 的摘要说明
    /// </summary>
    public class ShoppingHandler : IHttpHandler
    {
        //当前登录用户信息
        WeChatUser weChatUser = WeChatIdentity.CurrentUser;

        public void ProcessRequest(HttpContext context)
        {
            string result = "";
            if (context.Request["type"] != null)
            {
                string requestType = context.Request["type"];

                try
                {
                    switch (requestType)
                    {
                        //获取用户信息等级列表
                        case "GetUserLevelList":
                            result = this.GetUserLevelList(context); break;
                        default:
                            break;
                    }
                }
                catch (Exception ex)
                {
                    result = ex.Message;
                }
            }

            context.Response.ContentType = "text/html";
            context.Response.Write(result);
            context.Response.End();
        }

        private string GetUserLevelList(HttpContext context)
        {
            string parentUserPhone = context.Request["id"];
            return GetUserCollByPhone(parentUserPhone);
        }
        private string GetUserCollByPhone(string phone)
        {
            //编码，父编码，名称，是否打开，打开图片，关闭图片
            //{ id:1, pId:0, name:"展开、折叠 自定义图标不同", open:true, iconOpen:"../../../css/zTreeStyle/img/diy/1_open.png", iconClose:"../../../css/zTreeStyle/img/diy/1_close.png"},
            //编码，父编码，名称，是否打开，显示图片
            //{ id: 11, pId: 1, name: "叶子节点1", icon: "../../../css/zTreeStyle/img/diy/2.png"},
            List<object> result = new List<object>();

            ShoppingData.UserInfoCollection userColl = ShoppingData.UserInfoAdapter.Instance.LoadByParentUserPhone(phone);
            userColl.ForEach(user =>
            {
                result.Add(new
                {
                    id = user.Phone,
                    pid = phone,
                    name = user.UserName,
                    isParent = ShoppingData.UserInfoAdapter.Instance.LoadByParentUserPhone(user.Phone).Count > 0 ? true : false
                });
            });
            return JsonConvert.SerializeObject(result);
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}