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

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

发布时间 - 2026-01-10 21:56:08 点击率：次

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# Jquery # zTree树状结构 # C#异步加载 # zTree树状结构显示 # C# WPF如何反射加载Geometry几何图形数据图标 # c# WPF中自定义加载时实现带动画效果的Form和FormItem # c# 实现网页加载后将页面截取为长图片 # C# 根据表格偶数、奇数加载不同颜色 # C# 动态加载程序集信息 # C#中调用DLL时未能加载文件或程序集错误的处理方法(详解) # C#中加载dll并调用其函数的实现方法 # c# 动态加载dll文件 # 并实现调用其中的简单方法 # C#使用反射加载多个程序集的实现方法 # C#实现动态加载dll的方法 # c#动态加载卸载DLL的方法 # 3种C# 加载Word的方法 # 自定义 # 加载 # 下载地址 # 树状 # 来自于 # 其中一个 # 自带 # 大家多多 # 解下 # ashx # Handler # ShoppingHandler # autoParam # zTreeDemoBackground # otherParam # id # left # url # language # JavaScript

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：python用reduce和map把字符串转为数字的方法

下一篇：asp.net分页控件使用详解【附实例下载】

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：python用reduce和map把字符串转为数字的方法

下一篇：asp.net分页控件使用详解【附实例下载】

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

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