ztree配置async异步加载子节点，展开不触发请求的问题解决记录

普通渲染方式

如果是数据量不大，普通加载，按照ztree的数据格式，直接渲染就行

//这是我自己使用的数据格式
var zNodes = [{childs: [{ directory: false, name: "cxptest", childs: [] }],directory: true,name: "test",Path: "E:\test",id:01}
];
var setting = {async: {enable: true,//异步请求一定要是truetype: "get",//根据请求类型自己定义url: "/getTree",autoParam: ["id=ids"],//这个是会自动加上的参数，这里的参数，可以用别名，例如：id=Path,传参的时候就是ids = '1'；但是需要注意的是，这里的参数只支持ztree设置的数据属性，例如我们想传递Path字段，就不能在这里自动匹配了，需要另外写方法了dataFilter: function(treeId, parentNode, resData){//这里要过滤你的数据，把请求回来的数据组装成你想要的格式,resData就是请求接口返回的数据//我们假装这里的数据就是我们自己想要的return resData},},
}
// 这里需要说明一下，如果初始的时候需要初始化tree，就不要传第三个参数，zNodes
var tree = JX.selfForm.treeObj = $.fn.zTree.init($("#treeDemo"), setting);

说明

基本上通过上面setting就可以实现一各异步加载树了，setting的配置在ztree的官网上介绍的很详细，我在这里说一下我遇到的坑。
1、我也是通过上面的setting设置好了树，在初始化的时候，向后台发送了一次请求，但是在展开子节点懒加载数据的时候，就不会触发请求了，经过一系列的测试，发现异步加载的一些默认规则。
2、通常ztree提供的数据格式并不能满足我们实际的业务需求，我们需要改变一些字段，例如我上面放的zNodes格式，ztree也给我们提供了使用自定义属性的配置，类似于element el-tree的defaultProps

//先列举一些常用的属性
var setting = {data: {key: {name: "label",//展示的树名字isParent: "directory",//是否是父节点children:"childs"//子节点}}
}

3、配置好自定义的属性，我们就可以使用异步加载了，由于是异步加载，后端返回了树形的结构，类似下面

[{childs: [],directory: true,name: "test2",Path: "E:\test2",id:02}
]

由于上面的数据结构带上了childs,而我们的setting里面设置自定义属性的时候指定了childs为子节点，所以，ztree会认为这是一个空树，就不会触发异步
4、如果是用ztree做异步，建议后端只返回list数据,ztree会自动组装

[{directory: true,name: "test2",Path: "E:\test2",id:02},{directory: true,name: "test3",Path: "E:\test2",id:03},{directory: true,name: "test4",Path: "E:\test2",id:04},
]

总结

这个问题鼓捣了老半天，看了官网的例子对比了数据才发现了差异，对ztree也没有深入的研究，如果有错误的地方恳请指正。

ztree配置async异步加载子节点，展开不触发请求的问题解决记录相关推荐

ajax treegrid 选中,easyui treeGrid异步加载子节点示例
easyui treeGrid异步加载子节点示例.如果要异步加载treegrid的子节点,需要输出扁平的数据结构,然后通过_parentId来控制treegrid的父节点子节点结构.嵌套的childr ...
extjs2.0 ie8 下拉树_extjs2下拉树选项框comboxWithTree(支持异步加载子节点）
extjs版本:2.2 简介:支持单选.异步加载子节点(当然一下子拼接好全部节点的json也是绝对没问题的),要支持多选则需要自行设置,(已测试通过)浏览器兼容ie8.谷歌.FF. 资料参考:搜索一下 ...
LayUi 树形组件tree 实现懒加载模式，展开父节点时异步加载子节点数据
LayUi框架中树形组件tree官方还在持续完善中,目前最新版本为v2.5.5 官方树形组件目前还不支持懒加载方式,我自己修改了下最新源码tree.js,简单粗暴的方式支持懒加载模式.(Ps:最新更新 ...
ExtJS 异步加载树节点
var Tree_Item = Ext.tree; //定义根节点的Loader if (treepanelItem == undefined) { treepanelItem = new Tree_ ...
JQuery Datatables 动态配置参数异步加载数据
背景需求在前端动态设置datatables需要传递到后端的查询参数,异步加载返回的数据.点击这里进入datatables中文网异步加载数据说明直接上代码 var table; var url = ...
动态加载子节点_微信小游戏开发之场景切换和常驻节点传递数据
主题场景切换场景间数据传递方式小游戏全局背景音效特别说明 CocosCreator微信小游戏开发系列文章,是我在逐步开发过程中,基于官方文档之上,记录一些重点内容,以及对官方文档中有些知识点的 ...
动态加载子节点_简易数据分析 10 | Web Scraper 翻页—抓取「滚动加载」类型网页...
这是简易数据分析系列的第 10 篇文章. 原文首发于博客园:简易数据分析 10. 友情提示:这一篇文章的内容较多,信息量比较大,希望大家学习的时候多看几遍. 我们在刷朋友圈刷微博的时候,总会强调一个『 ...
动态加载子节点_省市区递归嵌套子流程动态选择实现
5.省市区递归嵌套子流程动态选择实现 5.0 流程特色展开子流程(容器)中可以无限的嵌套子流程.嵌套子流程可以无限的进行嵌套,类似递归流程. 子流程的实例可以有上一个节点进行动态选择. 子流程完成条 ...
【elementUI】el-tree搜索时加载子节点对应父节点、父节点对应子节点树
官网给的例子只能搜索树形图中与关键字匹配的级别: <el-inputplaceholder="输入关键字进行过滤"v-model="filterText" ...

ztree配置async异步加载子节点，展开不触发请求的问题解决记录

普通渲染方式

说明

总结

ztree配置async异步加载子节点，展开不触发请求的问题解决记录相关推荐

最新文章

热门文章