程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> .NET網頁編程 >> 關於.NET >> C#使用Jquery zTree實現樹狀結構顯示_異步數據加載,

C#使用Jquery zTree實現樹狀結構顯示_異步數據加載,

編輯:關於.NET

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>
View Code

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

 

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved