总结zTree使用过程中遇到的问题

最近项目需要向想做树形导航来管理各个层级的类目,对于中间遇到的一些问题,总结一下,感觉跟着牛人开发确实涨了好多见识。
想必网上好多zTree的例子可以参考,可是,我想说的是zTree的异步加载,以及在使用的时候该如何处理。
下面是其中的一段示例代码,详情可参考zTree官网提供的API:

var setting = {
   async: {
    enable: true,//启用异步加载
    url:"../../xxxxx/xxxxx.do", //异步请求地址
    autoParam:["id", "str1"], //需要传递的参数,为你在ztree中定义的参数名称
    otherParam:{},
    dataFilter: ajaxDataFilter
   }
   },
   callback: {
    onAsyncSuccess: onAsyncSuccess,
    beforeClick: function(treeId, treeNode) 
    var zTree = $.fn.zTree.getZTreeObj("ztree");
     if (treeNode.isParent) {
      zTree.expandNode(treeNode);
      return false;
     } else {
      productIframe.attr("src",treeNode.url);
      return true;
     }
    }
   }
  };
  function ajaxDataFilter(treeId, parentNode, responseData) {
    if (responseData) {
      //处理返回值,这里的返回值字段必须是json格式
   }
    return responseData;
};

我想说其实,zTree异步加载的优点个人理解类似于我们最熟悉的分页,我们点下一页的时候才去从后台查数据,而不是一次性查所有数据,这对大数量的情况非常有用。zTree就是采用类似的原理,首先加载的是根节点或者父节点,然后,点击“+”展开的时候再触发后台查询子节点的数据再做展示。
我遇到的问题如下:
1、async中配一个url地址就能达到多次触发的效果?
是这样的,每次展开父节点的时候就是一次加载的过程,需要根据这个url触发后台控制器获取下级节点的数据。
2、dataFilter: ajaxDataFilter方法是用来做什么的?
ajaxDataFilter这个方法中的最后一个参数responseData就是返回的结果,决定着你的树中节点的属性构成,如果你在后台控制器中做了其他封装,那么就需要在该方法中处理得到一个你想要的节点属性的json。
3、autoParam配了值为啥在后端没有取到?例如
autoParam:[“id”, “str1”],
在后端使用request.getParameter(“id”)的方式并没有取到值?
第一次加载的时候是取不到的,因为这颗树还没渲染出来,之后再点“+”就应该能取到,如果取不到,需要检查dataFiler中构造的树节点的属性中有没有这个属性。要保持命名的一致性。
4、为啥点击“+”展开父节点没有通过URL调到后台?
具体我也没搞清楚,估计是zTree内部机制的原因,我试了N次都没搞定,后来无意中在后台java代码中将返回结果的map中多加了一个isParent属性,即设置是否是父节点:map.put(“isParent”:”true”);//或false
这样竟然就可以了。
5、异步加载成功后需要使用updateNode刷新树节点
如:

 function onAsyncSuccess(event, treeId, treeNode, msg) {
   cancelHalf(treeNode);
  }
  function cancelHalf(treeNode) {
   var zTree = $.fn.zTree.getZTreeObj("ztree");
   treeNode.halfCheck = false;
   zTree.updateNode(treeNode);   //异步加载成功后刷新树节点
  }
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值