jQuery zTree树插件动态加载实例代码

需求:

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

解决断路:

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

控件代码

脚本代码(实现结点展开、单击事件时进行动态加载):

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,treeNode,clickFlag) { addSubNode(treeNode); } function addSubNode(treeNode) { if (!treeNode.isParent) return; var s = treeNode.children; if (s != undefined) return; $.ajax({ cache: true,data: { userId: treeNode.id },async: true,success: function (data) { zTree.addNodes(treeNode,data); },error: function (data) { alert("error"); } }); }

其中后端请求:

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

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

以上所述是小编给大家介绍的jQuery zTree树插件动态加载效果实例代码。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

相关文章

jQuery插件的种类 1、封装对象方法 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进...
扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间。 入门 编写一个jQuery插件开始于给...
最近项目中需要实现3D图片层叠旋转木马切换的效果,于是用到了jquery.roundabout.js。 兼容性如图: ht...
一、什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异...
AMD 模块 AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一...