C#使用Jquery zTree实现树状结构显示_异步数据加载
JQuery-Ztree下载地址：https://github测试数据/zTree/zTree_v3
JQuery-Ztree数结构演示页面： http://HdhCmsTesttreejs.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 t; 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 ;
}
}
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：http://HdhCmsTestcnblogs测试数据/lxhbky/archive/2016/12/18/6195053.html
dy("nrwz");
查看更多关于C#使用Jquery zTree实现树状结构显示 异步数据加载的详细内容...