jQuery zTree树插件动态加载实例代码
程序员文章站
2023-08-26 16:36:09
需求:
由于项目中家谱图数据量超大,而一般加载方式是通过,页面加载时 ztree.init方法进行数据加载,将所有数据一次性加载到页面中。而在项目中家谱级别又非常广而...
需求:
由于项目中家谱图数据量超大,而一般加载方式是通过,页面加载时 ztree.init方法进行数据加载,将所有数据一次性加载到页面中。而在项目中家谱级别又非常广而深,成千上万级,因此一次加载,完全加载不出来。于是需要进行优化为动态加载(增量加载)的方式,以便数据加载,提高体验度。
解决断路:
这应该好办,只要找到父节点单击事件,然后进行数据加载,结点附加即可。时间紧,任务重,完全没给研究的时间。只能硬着上,随便搜索一个“ztree动态加载”,出是出来了,标题也对,可里面的代码根本没找到添加结点一说……一边是需求催,一边是没找到类似。无语……对啊,不是有官网,于是把所有api函数浏览一遍,终于发现一个叫addnodes的函数。喜!
控件代码
<div class="usertree"> <ul id="treedemo" class="ztree"></ul> </div>
脚本代码(实现结点展开、单击事件时进行动态加载):
<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; } }
效果,则实现为单击父结点/展开父结点时动态加载子结点。
以上所述是小编给大家介绍的jquery ztree树插件动态加载效果实例代码,希望对大家有所帮助
上一篇: photoshop制作简单粗暴的表情包