加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 编程开发 > asp.Net > 正文

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

发布时间:2020-12-16 08:55:09 所属栏目:asp.Net 来源:网络整理
导读:JQuery-Ztree下载地址:https://github.com/zTree/zTree_v3 JQuery-Ztree数结构演示页面: ?http://www.treejs.cn/v3/demo.php#_101 关于zTree的详细解释请看演示页面,还有zTree帮助Demo。 ? 下面简要讲解下本人用到的其中一个实例(直接上关键代码了):

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>
    language="JavaScript">
    var setting = {
        async: {
            enable: true,url: "../Handler/ShoppingHandler.ashx//请求的一般处理程序
            autoParam: [id],1)">自带参数id--来自于节点id
            otherParam: { type: GetUserLevelList },1)">其他参数自定义
            dataFilter: filter,1)">数据过滤
            type: post"    请求方式
        }
    };

    function filter(treeId,parentNode,childNodes) {
        if (!childNodes) return null;
        for i = 0 childNodes.length; i < l; i++) {
            childNodes[i].name  childNodes[i].name.replace(/.ng,1)">'.);
        }
        return childNodes;
    }

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

B后台:

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

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

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

                try
                {
                    switch (requestType)
                    {
                        获取用户信息等级列表
                        case GetUserLevelList:
                            result = this.GetUserLevelList(context); break;
                        default:
                            ;
                    }
                }
                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);
        }
        string GetUserCollByPhone( 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
                });
            });
             JsonConvert.SerializeObject(result);
        }
        bool IsReusable
        {
            get
            {
                return ;
            }
        }
    }
}
View Code

?

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读