jQueryzTree树插件动态加载

来源：动视网责编：小采时间：2020-11-27 20:06:34

jQueryzTree树插件动态加载

jQueryzTree树插件动态加载:本文主要介绍了jQuery zTree树插件动态加载效果的实例代码,需要的朋友可以参考下，希望能帮助大家更好理解zTree功能。需求：由于项目中家谱图数据量超大，而一般加载方式是通过，页面加载时 zTree.init方法进行数据加载，将所有数据一次性加载到页面中。而在

推荐度：

点击下载本文 文档为doc格式

导读jQueryzTree树插件动态加载:本文主要介绍了jQuery zTree树插件动态加载效果的实例代码,需要的朋友可以参考下，希望能帮助大家更好理解zTree功能。需求：由于项目中家谱图数据量超大，而一般加载方式是通过，页面加载时 zTree.init方法进行数据加载，将所有数据一次性加载到页面中。而在

本文主要介绍了jQuery zTree树插件动态加载效果的实例代码,需要的朋友可以参考下，希望能帮助大家更好理解zTree功能。

需求：

　　由于项目中家谱图数据量超大，而一般加载方式是通过，页面加载时 zTree.init方法进行数据加载，将所有数据一次性加载到页面中。而在项目中家谱级别又非常广而深，成千上万级，因此一次加载，完全加载不出来。于是需要进行优化为动态加载（增量加载）的方式，以便数据加载，提高体验度。

解决断路：

　　这应该好办，只要找到父节点单击事件，然后进行数据加载，结点附加即可。时间紧，任务重，完全没给研究的时间。只能硬着上，随便搜索一个“zTree动态加载”，出是出来了，标题也对，可里面的代码根本没找到添加结点一说……一边是需求催，一边是没找到类似。无语……对啊，不是有官网，于是把所有api函数浏览一遍，终于发现一个叫addNodes的函数。喜！

控件代码

<p class="UserTree">
 <ul id="treeDemo" class="ztree"></ul>
</p>

脚本代码（实现结点展开、单击事件时进行动态加载）：

<script>
 var zNodes;
 var zTree;
 $(function () {
 $.ajax({
 cache: true,
 type: "get",
 url: "/User/NextLeve",
 async: false,
 success: function (data) {
 zNodes = data;
 },
 error: function (data) {
 alert("error");
 }
 });
 zTree = ZTreeCustom.init($("#treeDemo"), setting, zNodes);
 zTree.expandAll(false);
 })
 var setting = {
 view: {
 nameIsHTML: true
 },
 data: {
 simpleData: {
 enable: true
 },
 keep: {
 parent: true
 }
 },
 open: false,
 callback: {
 onClick: nodeClick,
 onExpand: function (event, treeId, treeNode) {
 addSubNode(treeNode);
 }
 }
 };
 function showIconForTree(treeId, treeNode) {
 return !treeNode.isParent;
 };
 function searchM() {
 var username = $("#txtName").val()
 }
 function nodeClick(event, treeId, treeNode, clickFlag) {
 addSubNode(treeNode);
 }
 function addSubNode(treeNode) {
 if (!treeNode.isParent) return;
 var s = treeNode.children;
 if (s != undefined)
 return;
 $.ajax({
 cache: true,
 type: "get",
 url: "/User/NextLeve",
 data: { userId: treeNode.id },
 async: true,
 success: function (data) {
 zTree.addNodes(treeNode, data);
 },
 error: function (data) {
 alert("error");
 }
 });
 }
</script>

其中后端请求：

　　其中数据来源为请求路径“/User/NextLeve?userId=xxx”，为返回如下结构的列表的json数据（即List<UserNode>类型的.ToJson()数据），其中userId可为，为空时默认取当前登录用户：

public class UserNode
{
 public long id { get; set; }
 public long pId { get; set; }
 public string name { get; set; }
 public bool open { get; set; }
 public bool isParent { get; set; }
 public string icon { get; set; }
}

效果，则实现为单击父结点/展开父结点时动态加载子结点。

jQueryzTree树插件动态加载

推荐度：

点击下载本文 文档为doc格式

标签：加载 ztree jQuery

热门焦点

jQueryzTree树插件动态加载

jQueryzTree树插件动态加载

jQueryzTree树插件动态加载

最新推荐

猜你喜欢

热门推荐