ant design pro 实战 : 使用 ztree
应当指出,antd 是有 ztree 组件的,但是太简单,无法满足复杂的业务需求。
所以我还是决定使用zTree.
- 用 npm | cnpm 或者 yarn | tyarn 安装,这一步略。
- 在 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 $
- 在合适的生命周期中渲染它。
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' }, }) } }
posted on 2020-01-01 20:59 fox_charon 阅读(914) 评论(0) 编辑 收藏 举报