jQuery zTree树插件动态加载实例代码
网络编程 2021-07-04 18:32www.168986.cn编程入门
这篇文章主要介绍了jQuery zTree树插件动态加载效果的实例代码,需要的朋友可以参考下
需求
由于项目中家谱图数据量超大,而一般加载方式是通过,页面加载时 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, suess: 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, suess: 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树插件动态加载效果实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持!
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程