木头人
2017-12-13 22:18:25
jquery实现的树形插件ztree使用遇到的问题
ztree是基于jquery实现的树形插件(此处介绍省略。。。)
遇到一个需求,就是把ftp上的文件目录在前台显示成一个tree,但是tree只显示文件夹,和文件夹平级的图片加载在显示图片的div里面。由于要做成异步加载,我的第一反应就是用ztree做。
在网上查看资料就使用了代码;
var zTreeObj; // zTree 的参数配置,深入使用请参考 API 文档(setting 配置详解) var setting = { check: { enable: false, //nocheckInherit: false //chkStyle: 'checkbox', //chkboxType: { "Y": "ps", "N": "ps" } }, view : { selectedMulti: false, showIcon: true, //设置是否显示节点图标 showLine: true, //设置是否显示节点与节点之间的连线 // fontCss: setFontCss }, async: { enable: true, // 设置 zTree是否开启异步加载模式 加载全部信息 url: "获取节点子节点的url", // Ajax 获取数据的 URL 地址 autoParam: ["id"],//异步加载时自动提交父节点属性的参数,假设父节点 node = {id:1, name:"test"},异步加载时,提交参数 zId=1 //dataFilter: filter }, data: { // 必须使用data simpleData: { enable: true, idKey: "id", // id编号命名 默认 pIdKey: "pId", // 父id编号命名 默认 rootPId: 0 // 用于修正根节点父节点数据,即 pIdKey 指定的属性值 } } };
然后在页面初始化加载
$(document).ready(function(){ //显示区域树 $.ajax({ type: "POST", url: "获取节点的路径", data: {}, dataType:"json", success: function(data){ zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, data.data); }, }); });
问题来了,我后台封装的是一个对象{message:"success",data:[{}{}{}{}{}]}形如这个格式。我用的异步加载。但是怎么接受返回的数据呢。在前台debug下,我看到了每次点击根节点,后天返回的数据。现在就是要处理数据。这个时候async中的dataFilter出现在我的眼里。我看了帮助文档,写了一个
function filter(treeId, parentNode, responseData),用这个来接受我的后台返回的数据。现在是处理了,但是问题来了。异步加载完成后的数据,收起tree再展开tree的时候就不会发送请求了。那我怎么再从新加载图片呢,调试了很久,发现了ztree的回调参数配置callback。
经过了漫长的测试,我在onExpend里面又写了一个发送ajax的请求,再去动态添加一遍树,但是都会发送两次请求。我最后把原来的async的配置注释掉,才实现了这个需求。没办法需求不能改,只能这样摸着石头过河了。
评论
最近浏览
sosgo167
2021年8月18日
暂无贡献等级
2252536772 LV21
2019年9月10日
mking813 LV1
2019年7月28日
阿昌先生 LV13
2019年1月30日
baoleissss LV2
2019年1月15日
taoziyy LV2
2019年1月15日
smallfight LV8
2019年1月2日
qqaazz1 LV5
2018年10月18日
zq671366 LV14
2018年7月31日
haoayou LV8
2018年7月13日