第三方依赖库zTree树结构封装使用

• 下载包

  http://www.treejs.cn/v3/main.php#_zTreeInfo
  

• 导入包

  <link rel="stylesheet" href="/assets/js/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
  <script type="text/javascript" src="/assets/js/zTree_v3/js/jquery.ztree.core.js"></script>
  <script type="text/javascript" src="/assets/js/zTree_v3/js/jquery.ztree.excheck.js"></script>
  <script type="text/javascript" src="/assets/js/zTree_v3/js/jquery.ztree.exedit.js"></scrip
  

• 导入自定义封装包

  <script src="/js/common_zTree.js"></script>
  

• 初始化使用

  
  $(function () {
      //初始化树
      setTimeout(function () {
          let initConfig = {
              "async":true,
              "treeDomId":"areaTree",//节点初始化Id
              "LevelNum": parseInt($("#SysSettingLevelNum").val()),//限制层数，从0开始 未启用
              "ChildNum": 5,//限制子节点个数 未启用
              "dataUrl": "/pro_line/factory_area",//获取节点数据的地址
              "optionsFunction": "",//添加删除重命名方法
              "isShowAddBtn":true,
              "isShowRemoveBtn":true,
              "isShowRenameBtn":true,
          };
          //初始化数据
          common_zTree(initConfig,ajaxCallBack,clickFunc,removeFunc,renameFunc,addFunc);
      },500)
  
  });
  //初始化树完成后回调函数
  function ajaxCallBack() {
      //页面控件保存tId，从而页面加载完成后设置点击事件(弃用)
      let clickTid=$("#AreaTid").val();
      $("#"+clickTid).addClass("curSelectedNode")
      
      //获取treeId
      let clickTreeId=$("#TreeId").val();
      if (clickTreeId!==""){
      //根据treeId 获取节点对象
      var treeObj = $.fn.zTree.getZTreeObj("modalTree");
      var node = treeObj.getNodeByParam("id", clickTreeId);
      //根据节点对象获取tId
      let tId=node.tId
      //根据tId获取节点Id
      let nodeId=tId+"_a"
      //设置点击样式
      $("#"+nodeId).addClass("curSelectedNode")
     }
  }
  var childArr=[];
  function clickFunc(event, treeId, treeNode, clickFlag){
      console.log(treeNode);
      $("#AreaTid").val(treeNode.tId+"_a");
  
      getTreeNodeChildIds(treeNode,childArr);
      console.log(childArr);
      let areaIds=childArr.join(",");
      $("#AreaId").val(areaIds);
      //重新清空
      childArr=[];
      searchData(1)
  }
  
  //获取点击的节点下所有的子节点的Id
  function getTreeNodeChildIds(treeNode) {
      childArr.push("'"+treeNode.id+"'");
      //获取子节点Id
      if (treeNode.children&&treeNode.children.length>0){
          //遍历获取数据
          $(treeNode.children).each(function (i,v) {
              if (v.children&&v.children.length>0) {
                  getTreeNodeChildIds(v)
              }else{
                  childArr.push("'"+v.id+"'");
              }
          })
      }
  }
  

function addFunc(treeNode) {
optionsFunction(treeNode,1,"/pro_line/factory_area/options")
}
function removeFunc(treeId,treeNode) {
optionsFunction(treeNode,2,"/pro_line/factory_area/options")
}
function renameFunc(treeId, treeNode) {
optionsFunction(treeNode,3,"/pro_line/factory_area/options")
}
//自定义操作方法
function optionsFunction(treeNode,options,url) {
}