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;
            }
        }
    }
}