ant design pro 实战 : 使用 ztree

应当指出，antd 是有 ztree 组件的，但是太简单，无法满足复杂的业务需求。

所以我还是决定使用zTree.

1. 用 npm | cnpm 或者 yarn | tyarn 安装，这一步略。
2. 在 jsx 文件最上面引入。

   import $$ from '@/utils/jquery-vendor.js'
   import zTree from 'zTree';
   //样式文件一定不要忘了引入，不然会没有样式
   import 'ztree/css/zTreeStyle/zTreeStyle.css';

   注意这个 jquery-vendor.js。它是让 zTree 可以正常工作的代码。
   因为 zTree 并没有考虑到 node 环境的问题——它假定 jQuery 一定在 window 对象下。
   jquery-vendor.js：
   

   import $ from 'jquery'
   window.$ = $
   window.jQuery = $
   export default $

3. 在合适的生命周期中渲染它。

   let ZtreeObject
   
   let self

       componentWillMount() {
         self = this      
   
         dispatch({
           type: 'personalWorkBranch/fetchZSKFL_Tree',
           payload: {
             ...userInfo,
             zsfl_id: 'all'
           },
         }).then(() => {
           const { ZSFLTreeData } = this.props
           if (Array.isArray(ZSFLTreeData) && ZSFLTreeData.length > 0) {
             this.initZtree(ZSFLTreeData)
           }
         });
   
       }

   无关代码都删除掉了。
   self 需要在 react 类的之外声明一下。
   当然也需要在结束时的声明周期销毁。

       componentWillUnmount() {
   
         self = null
   
         if (ZtreeObject) {
           ZtreeObject.destroy()
         }
       }

   当然，最关键的是抽出来的渲染方法。

   // ztree 初始化方法
       initZtree = (zNodes) => {
   
         var setting = {
           view: {
             showLine: true,
             fontCss: {color:"#666"},
             expandSpeed: "",
             addHoverDom: this.addHoverDom,
             removeHoverDom: removeHoverDom,
             selectedMulti: false
           },
           edit: {
             enable: true,
             renameTitle: '类目修改',
             removeTitle: '类目删除'
           },
           callback: {
             // before 执行之前
             beforeRemove: this.beforeRemove,
             beforeRename: this.beforeRename,
             beforeClick: this.ztnBeforeClick,
             // on 执行之后
             onClick: this.ztnOnClick
           }
         };
   
         // var zNodes = [
         //   { id:1, pId:0, name:"父节点1 - 展开"},
         //   { id:11, pId:1, name:"父节点11 - 折叠"},
         //   { id:111, pId:11, name:"叶子节点111"},
         //   { id:112, pId:11, name:"叶子节点112"},
         //   { id:113, pId:11, name:"叶子节点113"},
         // ];
         // var zNodes = [
         //   {
         //     id: 1,
         //     name: "父节点1 - 展开",
         //     children: [
         //       {
         //         id: 11,
         //         name: "父节点11 - 折叠",
         //         children: [
         //           {
         //             id: 111,
         //             name: "叶子节点111"
         //           },
         //           {
         //             id: 112,
         //             name: "叶子节点112"
         //           },
         //           {
         //             id: 113,
         //             name: "叶子节点113"
         //           }
         //         ]
         //       }
         //     ]
         //   }
         // ];
         // var zNodes = [
         //   {
         //     id: 1,
         //     name: "父节点1 - 展开"
         //   }
         // ];
   
         ZtreeObject = $$.fn.zTree.init($("#tree"), setting, zNodes);
       }

到这里其实就可以了。

但是我们可能会需要一些增删改查的方法。

• this.addHoverDom
  

  // ztree 添加节点
      addHoverDom = function (treeId, treeNode) {
  
        var sObj = $("#" + treeNode.tId + "_span");
        if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
        var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
          + "' title='类目新增' onfocus='this.blur();'></span>";
        sObj.after(addStr);
        var btn = $("#addBtn_"+treeNode.tId);
        if (btn) btn.bind("click", function(){
  
          const { dispatch } = self.props
          dispatch({
            type: 'personalWorkBranch/fetchaddZSKFL',
            payload: {
              ...userInfo,
              fjzskfl_id: treeNode.id,
              flmc: '新节点'
            }
          }).then(() => {
            const { newTreeDataAfterAdd, commonStatus, commonMessage } = self.props
            const $ = $$
  
            // console.log(newTreeDataAfterAdd)
            // console.log(commonStatus)
            // console.log(commonMessage)
  
            if (commonStatus == 201) {
              var zTree = $.fn.zTree.getZTreeObj(ztreeId);
              zTree.addNodes(treeNode, {
                id: newTreeDataAfterAdd.id,
                pId:treeNode.id,
                name: newTreeDataAfterAdd.name
              });
              return false;
            } else if (commonStatus == 401) {
              message.error(commonMessage)
              return false;
            } else {
              return false;
            }
          })
  
          // alert("?")
          // var zTree = $.fn.zTree.getZTreeObj("treeDemo");
          // zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"new node" + (newCount++)});
          // return false;
        });
      };

• removeHoverDom
  

  const removeHoverDom = function (treeId, treeNode) {
    $("#addBtn_"+treeNode.tId).unbind().remove();
  };

• this.beforeRemove
  

  // ztree 删除节点
      beforeRemove = (treeId, treeNode) => {
              // var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        // zTree.selectNode(treeNode);
  
        const zskfl_id = treeNode.id
        const fjzskfl_id = treeNode.getParentNode().id
  
        const { dispatch } = self.props
        dispatch({
          type: 'personalWorkBranch/fetchdelZSKFL',
          payload: {
            ...userInfo,
            fjzskfl_id: fjzskfl_id,
            zskfl_id: zskfl_id
          }
        }).then(() => {
          const { commonStatus, commonMessage } = self.props
  
          // console.log(commonStatus)
          // console.log(commonMessage)
  
          const $ = $$
          var zTree = $.fn.zTree.getZTreeObj(ztreeId);
  
          if (commonStatus == 201) {
            zTree.removeNode(treeNode)
  
            message.success(commonMessage)
            return false;
          } else if (commonStatus == 401) {
            message.error(commonMessage)
            return false;
          } else {
            return false
          }
        })
  
        return false
      }

• this.beforeRename
  

  // ztree 编辑节点
      beforeRename = (treeId, treeNode, newName) => {
              if (newName.length == 0) {
                  setTimeout(function() {
            const $ = $$
                      var zTree = $.fn.zTree.getZTreeObj(ztreeId);
                      zTree.cancelEditName();
                      message.warning("节点名称不能为空.");
                  }, 0);
                  return false;
        }
  
        const oldName = treeNode.name
        const zskfl_id = treeNode.id
        const zskfl_name = newName
  
        const { dispatch } = self.props
        dispatch({
          type: 'personalWorkBranch/fetchupdateZSKFL',
          payload: {
            ...userInfo,
            zskfl_name: zskfl_name,
            zskfl_id: zskfl_id
          }
        }).then(() => {
          const { commonStatus, commonMessage } = self.props
  
          const $ = $$
          var zTree = $.fn.zTree.getZTreeObj(ztreeId);
  
          // zTree.cancelSelectedNode(treeNode)
          // var node = zTree.getNodesByParam("key", zskfl_id, null)
  
          if (commonStatus == 201) {
            if (oldName === newName) {
            } else {
              message.success(commonMessage)
            }
  
            return false;
  
            // node.name = zskfl_name
            // zTree.updateNode(node)
  
          } else if (commonStatus == 401) {
            zTree.cancelEditName()
  
            message.error(commonMessage)
            return false;
          } else {
            zTree.cancelEditName()
  
            return false
          }
        })
  
        return true
      }

• this.ztnBeforeClick
  

  // ztree 点击
      ztnBeforeClick = (treeId, treeNode, clickFlag) => {
        return true
      }

• this.ztnOnClick
  

  //
      ztnOnClick = (e, treeId, treeNode, clickFlag) => {
        // console.log(treeNode)
        if (treeNode.isParent) {
  
          const { dispatch } = this.props;
          dispatch({
            type: 'dicData/fetchDataZSFL',
            payload: {
              zsfl_id: treeNode.id ? treeNode.id : 'all'
            },
          })
  
        }
      }