@beisen-cmps/ux-draggable-tree

注意事项

1. 本组件为基于 jQuery.zTree 的二次封装，具体 API 可以参考 zTree 官方文档（http://www.treejs.cn/v3/api.php ）。
2. 组件内部提供了 zTreeObj 的引用和 setttings 的动态合并，但由于二次封装功能时有使用到 settings 中的一些特性，没有特殊情况不建议覆盖其中的配置，有可能会造成交互不正常。
3. 因为是基于 jQuery 的组件，请不要让 React 触发重绘该组件的区域，如果重绘会造成重新渲染，之前的操作就都没了。

---

使用说明

安装

npm install @beisen-cmps/ux-draggable-tree --save

属性说明

1. data
   树形数据，具体格式可以参考 zTree 官方文档（http://www.treejs.cn/v3/api.php ）-> treeNode 节点数据详解。
   
2. settings
   组件的全部设置，具体参数如下：

settings = {
    styleType: 'fullPage', // 布局设置， fullpage 为节点长度贯穿页面，默认不启用
    template: {
      additional: [
        '(共计：<a href="javascript:void(0)" type="number">{totalNum}</a>人，<span>负责人</span>：<a href="javascript:void(0)" type="person">{master}</a>)',
        '<span class="isDisabledLabel" isShow="isDisabled">已停用</span>'
      ], // 节点名称后的附加信息，需要处理 isShow 的节点独立出来便于管理
      buttons: [
        '<a href="javascript:void(0)" class="add" type="add" isShow="!isDisabled" tip="添加">添</a>',
        '<a href="javascript:void(0)" class="edit" type="edit" isShow="!isDisabled" tip="编辑">编</a>',
        '<a href="javascript:void(0)" class="move" type="move" isShow="!isDisabled" tip="转移">转</a>',
        '<a href="javascript:void(0)" class="change" type="change" isShow="!isDisabled" tip="变更负责人">变</a>',
        '<a href="javascript:void(0)" class="enable" type="enable" isShow="isDisabled" tip="启用">启</a>',
        '<a href="javascript:void(0)" class="disable" type="disable" isShow="!isDisabled" tip="停用">停</a>',v
        '<a href="javascript:void(0)" class="delete" type="delete" tip="删除">删</a>'
      ] // 按钮区正文，每个按钮都需要定义一个 type，在点击事件调用时会传递回来
    },
    zTreeProps: {}, // zTree 标准的属性信息，注意这里设置的项会覆盖组件中默认的，没有特殊情况不建议设置
    callbacks: {
      onNodeUpdate: this.onNodeUpdate, // 在节点生成和更新 DOM 后调用，以处理节点禁用样式和根节点不显示按钮等情况
      clickEvent: this.clickEvent // 点击事件发生时调用，参数中含有触发节点的 type 信息，针对不同的 type 再继续处理相关逻辑
      onAsyncError: '', // 异步请求出错时的回调，此处应该做提示处理
			onAsyncSuccess: '' // 异步请求成功的回调
    }
  }

template 说明

• 格式为数组，每个项都是 html 字符串
• 内部变量使用{}包裹，渲染时会进行替换
• isShow 为是否展示的判定条件，目前仅支持一个属性，反向判断的前面加!即可，如果需要更复杂的判断，请使用 onNodeUpdate 回调来操作
• type 为点击事件触发时判定是哪个按钮被点击的依据，回调中会作为参数传递
• tip 为鼠标悬浮时显示的文字 这个文字会直接显示没有做是否截断的判定

其他函数说明

1. getAllData
   获取当前树的所有数据，需要使用子组件的 ref 来进行调用
2. onSearch
   根据名称搜索全部节点，此处为字符串精确匹配，需要使用子组件的 ref 来进行调用
3. insideEditName
   在节点上直接编辑名称，名称输入框做了自适应处理，具体方法看 demo
4. 其他 zTree 自身的方法，例如 updateNode、expandAll 等
   这类方法需要使用 zTreeRef 调用，具体方法请参照组件 demo

补充说明

1. zTree 内部提供了添加编辑节点的功能，但是因为跟我们的交互不符，故而没有使用
2. zTreeProps.async 可以配置异步获取的 url，默认传递参数是 id 和 name，如需额外参数可以继续添加，具体形式看 demo