{"_id":"@beisen/ux-draggable-tree","_rev":"3-91439db0df311566723c0ceb6c1a1c46","name":"@beisen/ux-draggable-tree","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@beisen/ux-draggable-tree","version":"0.0.1","description":"基于 zTree 二次封装的可拖拽树形组件","main":"lib/index.js","scripts":{"build:lib":"gulp","build:eslint":"node_modules/eslint/bin/eslint.js src/** -f html -o ./.build/.quality-report.html","build:screenshot":"node node_modules/@beisen/storybook-lib/bin/make-screenshot.js `pwd`","build:demos":"node node_modules/@beisen/storybook-lib/bin/make-demos.js `pwd`","build:publish":"npm run build:demos && npm run build:lib && npm run build:eslint","examples":"node node_modules/@beisen/storybook-lib/bin/index.js `pwd`"},"keywords":["beisen","react-component","es6"],"author":{"name":"shixin","email":"shixin@beisen.com"},"maintainers":[{"name":"beisencorp","email":"ci@beisen.com"},{"name":"lgm","email":"it1011@qq.com"},{"name":"neozw","email":"lihegaozhong@gmail.com"}],"license":"ISC","repository":{"type":"git","url":""},"dependencies":{"react":"^15.0.1","react-dom":"^15.0.1","deepmerge":"^2.1.0","jquery":"^3.3.1","ztree":"^3.5.24"},"devDependencies":{"@beisen/storybook-lib":"0.0.35","babel-cli":"^6.26.0","babel-core":"^6.26.3","babel-loader":"^7.1.4","babel-plugin-add-module-exports":"^0.2.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-object-assign":"^6.22.0","babel-plugin-transform-proto-to-assign":"^6.26.0","babel-plugin-transform-react-display-name":"^6.25.0","babel-plugin-transform-react-jsx":"^6.24.1","babel-plugin-transform-runtime":"^6.23.0","babel-preset-env":"^1.6.1","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","del":"^3.0.0","eslint":"^4.19.1","gulp":"^3.9.1","gulp-babel":"^7.0.1","gulp-cssbeautify":"^1.0.0","gulp-postcss":"^7.0.1","gulp-replace":"^0.6.1","gulp-sass":"^4.0.1","os":"^0.1.1"},"gitHead":"736d0fb3016d29f8c3608b2ce110e2e42a630002","_id":"@beisen/ux-draggable-tree@0.0.1","_npmVersion":"6.0.1","_nodeVersion":"8.11.2","_npmUser":{"name":"beisencorp","email":"ci@beisen.com"},"dist":{"integrity":"sha512-wErMCOjrilYgGP4I9UPWEsBqCTyanHA3LBwv1mfo/Xe2BC3PDNSxJVW5i6/5Ocw3Kj57fsrggr4btyWJqybmwg==","shasum":"4d7643d796512a55c30eabc68ed53c360e1cc6d3","tarball":"https://registry.npmjs.org/@beisen/ux-draggable-tree/-/ux-draggable-tree-0.0.1.tgz","fileCount":54,"unpackedSize":1912923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa/ssGCRA9TVsSAnZWagAAVMoP+QASIIO02jGdi5fW+YoQ\n5pdsC3MJqYtgRmS25LhIwb1U8WUnl/0A32jKhrjXHrv23k1FMOygbq4gJF5s\nF9F75qXmJYdP8UjGV2U+rZM06athtDpSYUSIF1K7jjlGp8gjcIjnEVe1p+jO\nkHe5yaAYjZEs7FjqHX9QDnUINfuEsr7LaTOjdZ2+O5gQFrxA9SoKi96QCfSk\nQHfRLEwSfB3H4Hd/zsGfL8s4AWuip6XiJE2xxY9p1Vw9HklvqJboLQNzWJbY\nFH3VRRwlJP4P8TpDhHSa3JQLP8iSEIzoLTcL+4rDJLgjmP2Ax2acOPKEP1bt\nAVj2cgiBXoKmhQbOAmgoX/j0otuCFrxNuBkhb5YLW5StN4i2fuH+RfEFKfKF\npDIlYAjA9H1Sn3sNppuPJ1HzCIoslXY+vzKIORdpkigDpMp+MQH42q9LkNMn\nfx/CFoJOOeBpfjh2rcJe/t5oIirBfzTjKkUTUrV6TBC0IG6bfwoarLSC4xWp\n4w8cdrwnHTsWGHIkarly3uAbUk5zvkUso8dG0JCHXPRNU+K4uJJVzIK0N7Iw\nZaWy/boRyqUsljj5NJOWjio+vq9MyX+jdUx/ZTUPP9V2Xyh986/laaNW6yha\njqOIuJMoU4/KbXlann27ZVOQviAHLQ8aeWHHJ8XBxELp6xuQ8gnWEn4fJ1PZ\n96w6\r\n=LAr4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDWyLAUYF0ygepJNodvIiAOIFfVrDD+1iGjugxYWrx9mgIhAIHuRfYJdxdsqx5vg5gmTDrxv3qry8pQvDHAVaxYaBVs"}]},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ux-draggable-tree_0.0.1_1526647556580_0.7584771949508504"},"_hasShrinkwrap":false}},"time":{"created":"2018-05-18T12:45:56.299Z","0.0.1":"2018-05-18T12:45:56.684Z","modified":"2022-04-04T18:19:37.620Z"},"maintainers":[{"email":"albertzhang.pro@gmail.com","name":"albert-zhang"},{"email":"liugenpeng@beisen.com","name":"liugenpeng"},{"email":"ci@beisen.com","name":"beisencorp"},{"email":"it1011@qq.com","name":"lgm"},{"email":"lihegaozhong@gmail.com","name":"neozw"}],"description":"基于 zTree 二次封装的可拖拽树形组件","keywords":["beisen","react-component","es6"],"repository":{"type":"git","url":""},"author":{"name":"shixin","email":"shixin@beisen.com"},"license":"ISC","readme":"### 注意事项\n\n1. 本组件为基于 jQuery.zTree 的二次封装，具体 API 可以参考 zTree 官方文档（http://www.treejs.cn/v3/api.php ）。  \n2. 组件内部提供了 zTreeObj 的引用和 setttings 的动态合并，但由于二次封装功能时有使用到 settings 中的一些特性，没有特殊情况不建议覆盖其中的配置，有可能会造成交互不正常。  \n3. 因为是基于 jQuery 的组件，请不要让 React 触发重绘该组件的区域，如果重绘会造成重新渲染，之前的操作就都没了。  \n\n---\n### 使用说明\n#### 安装\nnpm install @beisen/draggableTree --save\n#### 属性说明\n1. data  \n   树形数据，具体格式可以参考 zTree 官方文档（http://www.treejs.cn/v3/api.php ）-> treeNode 节点数据详解。  \n   ![image](./readme/1.png)\n2. settings  \n   组件的全部设置，具体参数如下：  \n```\nsettings = {\n    styleType: 'fullPage', // 布局设置， fullpage 为节点长度贯穿页面，默认不启用\n    template: {\n      additional: [\n        '(共计：<a href=\"javascript:void(0)\" type=\"number\">{totalNum}</a>人，<span>负责人</span>：<a href=\"javascript:void(0)\" type=\"person\">{master}</a>)',\n        '<span class=\"isDisabledLabel\" isShow=\"isDisabled\">已停用</span>'\n      ], // 节点名称后的附加信息，需要处理 isShow 的节点独立出来便于管理\n      buttons: [\n        '<a href=\"javascript:void(0)\" class=\"add\" type=\"add\" isShow=\"!isDisabled\" tip=\"添加\">添</a>',\n        '<a href=\"javascript:void(0)\" class=\"edit\" type=\"edit\" isShow=\"!isDisabled\" tip=\"编辑\">编</a>',\n        '<a href=\"javascript:void(0)\" class=\"move\" type=\"move\" isShow=\"!isDisabled\" tip=\"转移\">转</a>',\n        '<a href=\"javascript:void(0)\" class=\"change\" type=\"change\" isShow=\"!isDisabled\" tip=\"变更负责人\">变</a>',\n        '<a href=\"javascript:void(0)\" class=\"enable\" type=\"enable\" isShow=\"isDisabled\" tip=\"启用\">启</a>',\n        '<a href=\"javascript:void(0)\" class=\"disable\" type=\"disable\" isShow=\"!isDisabled\" tip=\"停用\">停</a>',v\n        '<a href=\"javascript:void(0)\" class=\"delete\" type=\"delete\" tip=\"删除\">删</a>'\n      ] // 按钮区正文，每个按钮都需要定义一个 type，在点击事件调用时会传递回来\n    },\n    zTreeProps: {}, // zTree 标准的属性信息，注意这里设置的项会覆盖组件中默认的，没有特殊情况不建议设置\n    callbacks: {\n      onNodeUpdate: this.onNodeUpdate, // 在节点生成和更新 DOM 后调用，以处理节点禁用样式和根节点不显示按钮等情况\n      clickEvent: this.clickEvent // 点击事件发生时调用，参数中含有触发节点的 type 信息，针对不同的 type 再继续处理相关逻辑\n      onAsyncError: '', // 异步请求出错时的回调，此处应该做提示处理\n\t\t\tonAsyncSuccess: '' // 异步请求成功的回调\n    }\n  }\n```\n#### template 说明\n- 格式为数组，每个\b项都是 html 字符串\n- 内部变量使用{}包裹，渲染时会进行替换\n- isShow 为是否展示的判定条件，目前仅支持一个\b属性，反向判断的前面加!即可，如果需要更复杂的判断，请使用 onNodeUpdate 回调来操作\n- type 为\b点击事件触发时判定是哪个按钮被点击的依据，回调中会作为参数传递\n- tip 为鼠标悬浮时显示的文字 这个文字会直接显示没有做是否截断的判定\n\n#### 其他函数说明\n1. getAllData  \n   获取当前树的所有数据，需要使用子组件的 ref 来进行调用\n2. onSearch\n   根据名称搜索全部节点，此处为字符串精确匹配，需要使用子组件的 ref 来进行调用\n3. 其他 zTree 自身的方法，例如 updateNode、expandAll 等\n   这类方法需要使用 zTreeRef 调用，具体方法请参照组件 demo","readmeFilename":"README.md"}