ztree官网地址：Home [zTree -- jQuery 树插件] (treejs.cn)

最近项目涉及树型结构，ztree兼容性很好，故而选则了该组件，下面总结下使用。

1、引入相关依赖 登入官网下载对应js跟css，如下：

2、前台渲染 设置配置信息

<div id="ztree" class="ztree" width="100%" height="400" name="tree"></div>

<script type="text/javascript">
var zTreeObj;
var showNodesMap;
var setting = {
   view: {
      selectedMulti: true, //设置是否能够同时选中多个节点
      showIcon: true,  //设置是否显示节点图标
      showLine: true,  //设置是否显示节点与节点之间的连线
   },
   data: {
      simpleData: {
         enable: true, //设置是否启用简单数据格式（zTree支持标准数据格式跟简单数据格式，上面例子中是标准数据格式）
         idKey: "id",  //设置启用简单数据格式时id对应的属性名称
         pidKey: "parentId" //设置启用简单数据格式时parentId对应的属性名称,ztree根据id及parentId层级关系构建树结构
      }
   },
   check: {
      enable: true,   //设置是否显示checkbox复选框
      chkStyle: 'checkbox',
      chkboxType: {"Y": "s", "N": "ps"} //设置树前的复选框 是否全选反选
   },
   callback: {
      beforeCheck: function (treeId, treeNode) {
         //子节点取消选中 父节点也跟随取消
         if (treeNode.parentTId) {
            uncheckAllParentNode(treeNode);
         }
      },
      onCheck: zTreeOnCheck
   }

调用后台方法，获取树形数据，后台数据结构是对象数组，对象属性含有id跟parentId、name，根据两者关系，ztree会渲染上下结构，name是显示的节点名字，如有自定义图标 属性中添加iconSkin

$(function () {
  $.ajax({
   type: "POST",
   url: "/getTree",
   success: function (data) {

      //排序 如果后台数据已经排序 则不需要，若前台进行排序
      data = data.sort(function (a, b) {
         return a.orderBy.localeCompare(b.name, 'zh-CN', {numeric: true});
      })
      //ztree是渲染属树div的id
      zTreeObj = $.fn.zTree.init($("#ztree"), setting, data);

      let treeObj = $.fn.zTree.getZTreeObj("ztree");
      let nodes = treeObj.getNodes();
      for (var i = 0; i < nodes.length; i++) {  //设置节点展开
         treeObj.expandNode(nodes[i], true, false, true);
      }
    
      //如果是编辑 回显树
     var value = parent.document.getElementById('showTree').value;
      if (value != null && value != '') {
         var arr = JSON.parse(value);
         for (var k = 0; k < arr.length; k++) {
            var node = treeObj.getNodesByParamFuzzy("id", arr[k].id, null);
            if (node != null && node.length > 0) {
               // 展开节点 treeObj.expandNode(nodeParent[0], true, false, true);
               // 选中节点
               treeObj.checkNode(node[0], true, true);
            }
         }
      }

   }
});});

/**
 * 每次点击 checkbox 或 radio 后， 弹出该节点的 tId、name 以及当前勾选状态的信息
 * @param event js event 对象
 * @param treeId 对应 zTree 的 treeId，便于用户操控
 * @param treeNode 被勾选 或 取消勾选的节点 JSON 数据对象
 */
function zTreeOnCheck(event, treeId, treeNode) {
//调用父页面的addNode方法，记录变化的节点信息，进行逻辑处理
   parent.addNode(zTreeObj.getChangeCheckedNodes());
}

/**
 * 取消选中某节点的全部父节点
 * @param node 节点对象
 */
function uncheckAllParentNode(node) {
   var parentNode = node.getParentNode();
   parentNode.checked = false;
   if (parentNode.parentTId) {
      uncheckAllParentNode(parentNode);
   }
}

3、异步加载树结构（全部加载完）

在setting中添加异步配置，异步加载需要设置isParent是true，否则会有只加载第一层节点情况，不继续加载剩余节点

async: {
   enable: true, 是否异步
   url: "/getTree", //接口url
   autoParam: ["id"]//传入参数
},

在callback方法中添加加载成功后的回调

callback: {
   beforeCheck: function (treeId, treeNode) {
      //子节点取消选中 父节点也跟随取消
      if (treeNode.parentTId) {
         uncheckAllParentNode(treeNode);
      }
   },
   onCheck: zTreeOnCheck,
   onAsyncSuccess: zTreeOnAsyncSuccess,//树加载成功时的回调函数
}

在初始化时调用

$(function () {
   zTreeObj = $.fn.zTree.init($("#ztree"), setting);
});

/**
 * 加载成功的回调函数 
 * 树第一次加载成功则强制异步加载子节点
 * 展开其下面的子节点
 */
function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
  //如果最后一级已经加载过切没有下级节点，设置isParent属性是flase，否则该节点前会有+号图标
   if (treeNode != undefined && treeNode.children.length == 0) {
      treeNode.isParent = false;
   }
   //防止数据量过大，延迟加载
   setTimeout(function () {
      console.log("time")
      var treeObj = $.fn.zTree.getZTreeObj("ztree");
      var rootNodes = treeObj.transformToArray(treeObj.getNodes());
      //循环判断该节点是否已加载子节点，是则进入下一次循环，否则加载子节点，确保加载子节点只加载一次，若加载多次会影响效率
      for (var i = 0; i < rootNodes.length; i++) {
         if (rootNodes[i].zAsync == false) {
            treeObj.reAsyncChildNodes(rootNodes[i], "refresh", true);
         } else {
            continue;
         }
      }
   }, 1000);
}

</script>