ztree树组件使用方法总结

109 阅读1分钟

ztree组件搜索后需要增加搜索前勾选的数据

树组件渲染时再次勾选数据时执行配置中的onCheck组件,不需要再另写方法了。

不起作用的方法

我之前想写一个方法,在doFilter中调用。代码如下:

 function getCheckedNodes() {
     beforeCheckNode = beforeCheckNode.concat(checkbox ? treeObj.getCheckedNodes(true) : treeObj.getSelectedNodes())
    }
    
    
    //然后在doFilter中调用
    function doFilter() {
        getCheckedNodes()
        ......其它代码
        var nodeList = []
        var searchText = $('#searchText').val()
    }

好使的方法

每次渲染树结构数据后,勾选数据时都会去调用setting中的onCheck事件,因此在这里面每搜索一次往beforeCheckNode中push数据即可。代码如下:


onCheck: function (event, treeId, treeNode) {
      beforeCheckNode = beforeCheckNode.concat(checkbox ? treeObj.getCheckedNodes(true) : treeObj.getSelectedNodes())
      beforeCheckNode.forEach((item, index, arr) => {
        if (!item.checked) {
          arr.splice(index, 1)
        }
      })
      beforeCheckNode = uniqueArray(beforeCheckNode)   //去重
      
      ....其它代码
      
      
     
},

$('#btnOk').click(function () {
    var nodes = []
    if (beforeCheckNode.length > 0) {
      nodes = beforeCheckNode
    } else {
      nodes = checkbox ? treeObj.getCheckedNodes(true) : treeObj.getSelectedNodes()
    }
)}