@beisen-cmps/ux-draggable-tree

基于 zTree 二次封装的可拖拽树形组件

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
@beisen-cmps/ux-draggable-tree
Minified + gzip package size for @beisen-cmps/ux-draggable-tree in KB

Readme

注意事项

  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 节点数据详解。
    image
  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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.