ztree异步加载

最新推荐文章于 2024-08-21 16:19:19 发布

怜眸

最新推荐文章于 2024-08-21 16:19:19 发布

阅读量228

点赞数

CC 4.0 BY-SA版权

分类专栏： ztree

本文链接：https://blog.youkuaiyun.com/weixin_44588946/article/details/95031901

ztree 专栏收录该内容

0 篇文章

订阅专栏

本文介绍了如何使用zTree这个jQuery插件实现异步加载功能，特别是针对只有父节点的情况。同时展示了如何将zTree与下拉菜单结合，通过MVC代码和HTML、JQuery代码展示具体实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ztree异步加载

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

我这个是只有父节点的tree

效果图：
在这里插入图片描述

MVC代码：

public ActionResult SelectGenera()//绑定维修大类
{
	var list = (from tb in myModels.D_ServiceGenera
                select new
                {
                	id = tb.ServiceGeneraID,
                    text = tb.Name,
                    number = tb.Number,
                    name = tb.Number + " - " + tb.Name
                 });
	return Json(list, JsonRequestBehavior.AllowGet);
}

我这个SelectGenera()方法是用ztree异步加载和绑定下拉框的
text是绑定下拉菜单的
name是ztree异步加载的
id是ztree异步加载和绑定下拉框
number是ztree异步加载用来判断节点是否有编号的

Model表：
在这里插入图片描述

html代码：

<link href="~/Contents/zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<script src="~/Contents/js/jquery.3.3.1.min.js"></script>
<script src="~/Contents/zTree_v3/js/jquery.ztree.all.min.js"></script>

<ul id="tree"></ul>

JQuery代码：

var zNodes = []; //声明树形图
var setting = {
	data: {
		simpleData: {
			enable: true
		}
	},
	callback: {
		onClick: onClick
	}
};
//访问控制器查询的递归表数据，赋值给声明的树形图
$.post("SelectGenera", function (data) {
	if (data != null) {
		for (var i in data) {
			var Genera = {}; //声明树形图的节点
			Genera.id = data[i].id; //赋值树形图的节点的ID
			if (data[i].number != null) {
				Genera.name = $.trim(data[i].name);
				Genera.id = data[i].id;
			}
			else {
				Genera.name = $.trim(data[i].name)
				Genera.id = data[i].id;
			}
			Genera.open = true;
			//push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。 向声明的树形图中添加子节点
			zNodes.push(Genera);
		}
		$(document).ready(function () {
			$.fn.zTree.init($("#tree"), setting, zNodes);
		});
	}
});