首页 > 编程 > C# > 正文

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

2020-01-24 00:52:34
字体:
来源:转载
供稿:网友

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

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表