{"_id":"z-angular-tree","_rev":"2-001f3a77e0f238ef11a9c486c9a3b6e8","name":"z-angular-tree","description":"基于AngularJS1.2.x版本开发,支持1.2.x或更高(Angular 1.2.x or higher),JQuery1.x即可","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.1":{"name":"z-angular-tree","version":"1.0.1","dependencies":{},"scripts":{"build":"gulp build"},"devDependencies":{"browser-sync":"~2.9.11","browser-sync-spa":"~1.0.3","del":"~2.0.2","gulp":"~3.9.0","gulp-angular-templatecache":"~1.8.0","gulp-concat":"^2.6.0","gulp-filter":"~3.0.1","gulp-load-plugins":"~0.10.0","gulp-minify-html":"~1.0.4","gulp-uglify":"~1.4.1","gulp-rename":"~1.2.2","gulp-autoprefixer":"~3.0.2","gulp-sourcemaps":"~1.6.0","gulp-sass":"~2.0.4","gulp-util":"~3.0.6","http-proxy-middleware":"~0.9.0","main-bower-files":"~2.9.0","uglify-save-license":"~0.4.1"},"engines":{"node":">=0.10.0"},"description":"基于AngularJS1.2.x版本开发,支持1.2.x或更高(Angular 1.2.x or higher),JQuery1.x即可","main":"gulpfile.js","directories":{"example":"example"},"repository":{"type":"git","url":"git+https://github.com/pop-lee/z-angular-tree.git"},"keywords":["angular","tree","component","树型","控件"],"author":{"name":"liyunpeng@live.com"},"license":"Apache-2.0","bugs":{"url":"https://github.com/pop-lee/z-angular-tree/issues"},"homepage":"https://github.com/pop-lee/z-angular-tree#readme","gitHead":"81c7b751aa519d05ecec98ed4fd661d3f5a35714","_id":"z-angular-tree@1.0.1","_shasum":"fac5be9e1e8036947007bad8c6a77a07442d09d9","_from":".","_npmVersion":"3.10.10","_nodeVersion":"6.11.3","_npmUser":{"name":"roc-lee","email":"liyunpeng@live.com"},"dist":{"shasum":"fac5be9e1e8036947007bad8c6a77a07442d09d9","tarball":"https://registry.npmjs.org/z-angular-tree/-/z-angular-tree-1.0.1.tgz","integrity":"sha512-Ck8eEcC+7GNsPIq3Sift2ICs77P1hzx1x7bLA7zZw5cUpY/YVGWjGNDkIaxb2ZeP0XiOFKx11Lh2owVTTeHlzg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDA9K7PNHPnNI+2dhnsQucNrErRENXknjLj+LptSlN32gIgdF9vCT9C9/Q2X5YQgD9752IH+Dzr6LGrWsb03WJrtew="}]},"maintainers":[{"name":"roc-lee","email":"liyunpeng@live.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/z-angular-tree-1.0.1.tgz_1512720955628_0.12072270247153938"}}},"readme":"# Z-Angular-Tree\n##　　　———— By LiYunpeng（云鹏@大连）\n\n基于AngularJS1.2.x版本开发,支持1.2.x或更高(Angular 1.2.x or higher),JQuery1.x即可\n\n如果您觉得好用,麻烦给加颗星!!谢谢支持!\n\n\n## 栗子 [example](http://pop-lee.github.io/z-angular-tree/example/index.html)\n例子可直接下载运行,无需构建,也可使用gulp进行构建运行\n\n\n## 目前为止实现的功能有 Support Feature\n* 节点展开、关闭\n* 同级节点新增\n* 子集节点新增\n* 删除节点\n* 选中节点\n* 通过数据源配置选中节点\n* 可根据需求自行加入缓动动画(与其他库无任何依赖),可参看例子(例子中使用的是angular-animate以及ui-bootstrap中的collapse)\n\n还可配置\n* childrenField 数据源中子节点的字段名称(default \"children\")\n* leafNodeCanSelect 是否只有叶子节点才可选中(default true)\n* useToggle 是否使用节点互斥(default false)\n* canMultiple 是否允许多选(default true)\n* defaultCollapsed 默认子节点是折叠还是展开状态(default false)\n\n后续会加入拖拽功能\n\n## 安装 install\n```\nbower install z-angular-tree\n```\n\n## 开始 Get Start\n\n### 指令 Directive\n* zTree 树的核心,使用它来创建树\n* zTreeNodeChildren 代表节点的子节点,树形每个节点的子节点放置在这个指令内,所以若想将子节点放置某个位置,仅需控制此指令的位置即可\n* zTreeNodeIndent 代表节点的缩进(可选,当然也可通过其他方式,如z-tree-node-children的class自定义样式),通过此指令可以设置缩进,可将缩进放置在想要放置的某个位置,并且可以控制缩进量,可以通过修改z-tree-node-indent的class样式来调整每一个单元的缩进量,同时可通过该指令的值设置缩进多少个单元,如$model.nodeLevel个单元,也可设置为永远缩进1个单元等.\n\n\n\n\n```html\n<div z-tree tree-data=\"dataList\">\n    <!-- node context 节点内容 -->\n    <label>this is a node</label>\n    <!-- node children position 节点的子节点位置 -->\n    <div z-tree-node-children></div>\n</div>\n```\n\n\n### 数据源 dataSource\ntree-data=\"dataList\",其中dataList的结构如：\n```json\n[{\n    \"label\": \"a\",\n    \"children\": []\n }, {\n    \"label\": \"b\",\n    \"children\": [{\n        \"label\": \"b1\",\n        \"children\": [{\n            \"label\": \"b1-1\",\n            \"children\": []\n        },{\n            \"label\": \"b1-2\",\n            \"children\": []\n        }]\n    }]\n}]\n```\n\n### 节点数据 node data\n* 可通过node来进行访问传入的数据\n* 还可访问节点的是否关闭状态,是否选中状态,是否在自己的子集包含选中节点,当前节点的层级数\n```html\n<div z-tree=\"tree\" tree-data=\"dataList\">\n    {{node.label}}\n    -- collapsed:\"{{$model.$collapsed}}\"\n    -- hasSelect:\"{{$model.$hasSelect}}\"\n    -- selected:\"{{$model.$selected}}\"\n    -- nodeLevel:\"{{$model.$nodeLevel}}\"\n    -- index:\"{{$model.$index}}\"\n    -- isFirst:\"{{$model.$isFirst}}\"\n    -- isLast:\"{{$model.$isLast}}\"\n    -- isMiddle:\"{{$model.$isMiddle}}\"\n</div>\n```\n\n### 控件引用 tree reference\n```html\n<div z-tree=\"tree\">\n```\n$scope.tree 就是引用了树形控件的对象,可以进行如下调用\n```javascript\n$scope.tree.toggle(node);\n$scope.tree.addNode(node);\n$scope.tree.addChildNode(node);\n$scope.tree.delNode(node);\n$scope.tree.selectNode(node);\n```\n\n\n### 添加事件 event handle\n相应事件卸载controller内即可\n```html\n<div z-tree=\"tree\" tree-data=\"dataList\">\n    <button class=\"btn btn-xs btn btn-info\" ng-click=\"toggle(node)\">toggle</button>\n    <button class=\"btn btn-xs btn-primary\" ng-click=\"addSameLevelNode(node)\">add</button>\n    <button class=\"btn btn-xs btn-success\" ng-click=\"addSubNode(node)\">add sub</button>\n    <button class=\"btn btn-xs btn-danger\" ng-click=\"delNode(node)\">del</button>\n</div>\n```\n\n### 节点的子节点,可以放在任何想安放的位置 children node position\n```html\n<div z-tree=\"tree\" tree-data=\"dataList\">\n    <button>test</button>\n    <div z-tree-node-children></div>\n</div>\n```\nor\n```html\n<div z-tree=\"tree\" tree-data=\"dataList\">\n    <div z-tree-node-children></div>\n    <button>test</button>\n</div>\n```\nor\n```html\n<div z-tree=\"tree\" tree-data=\"dataList\">\n    <button>test</button>\n    <div>\n        <div>\n            <div>\n                <div z-tree-node-children></div>\n            </div>\n        </div>\n    </div>\n</div>\n```\n\n## 开源许可协议 License\n[The Apache License](https://github.com/pop-lee/z-angular-tree/blob/master/LICENSE)","maintainers":[{"name":"roc-lee","email":"liyunpeng@live.com"}],"time":{"modified":"2022-06-29T08:43:53.791Z","created":"2017-12-08T08:15:56.266Z","1.0.1":"2017-12-08T08:15:56.266Z"},"homepage":"https://github.com/pop-lee/z-angular-tree#readme","keywords":["angular","tree","component","树型","控件"],"repository":{"type":"git","url":"git+https://github.com/pop-lee/z-angular-tree.git"},"author":{"name":"liyunpeng@live.com"},"bugs":{"url":"https://github.com/pop-lee/z-angular-tree/issues"},"license":"Apache-2.0","readmeFilename":"README.md"}