ztree 异步加载大数据(一)
要求:接口如下:/mattersbookingbuild/getCatesTree?catePId=0(首次参数) catePId是每次数据的id查询 接口数据默认cateid为0,查询出来的接口数据为第一层父级元素,后端要求想要查询其子级元素,需要将id 传到接口进行查询。大数据异步查询 如图一
![](https://upload-images.jianshu.io/upload_images/19486310-81deb458a60bd552.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
图一 首次数据结构
![](https://upload-images.jianshu.io/upload_images/19486310-00e51779c2fe7dc3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
图二 效果展示
与ztree的demo中异步加载的对比如图三,没有设置父级,参数是isParent:
![](https://upload-images.jianshu.io/upload_images/19486310-dee1237811058b93.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
图三 区别
所以在设置时获取节点数据时添加参数isParent,设置父级(十字框)。
根据后台数据(一般后台都会给节点类型)中的cateType来判断是否为最末节点,是的话,isParent为false,其余为true。这样我们就能快速添加父节点。
思路步骤:
1.在第一层数据上加上根节点
![](https://upload-images.jianshu.io/upload_images/19486310-54117f600aeef34a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
图4 根节点添加
2.添加父级节点
![](https://upload-images.jianshu.io/upload_images/19486310-c9180361f0d48337.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
图5
3.以上都是第一次查询,即初始化的操作,若点击父级节点,查看子节点又该怎么办呢?根据ztree的demo和api参考,设置async参数,利用URL方法,如图6
![](https://upload-images.jianshu.io/upload_images/19486310-ef3541a7938149b7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
图6
7.
![](https://upload-images.jianshu.io/upload_images/19486310-6285e28cb51eca4a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
图7
8.点击十字框加载异步
![](https://upload-images.jianshu.io/upload_images/19486310-c03208a0e2e3dd51.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
图8
9.最终效果
![](https://upload-images.jianshu.io/upload_images/19486310-632eaebae04588cb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
图9