木头人的gravatar头像
木头人 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。
jquery实现的树形插件ztree使用遇到的问题

经过了漫长的测试,我在onExpend里面又写了一个发送ajax的请求,再去动态添加一遍树,但是都会发送两次请求。我最后把原来的async的配置注释掉,才实现了这个需求。没办法需求不能改,只能这样摸着石头过河了。


打赏

已有1人打赏

最代码官方的gravatar头像
最近浏览
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日
顶部 客服 微信二维码 底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友