PHP>> ztree>> 返回
项目作者： shann09

项目描述 ：
list->tree js/cljs lib，work with ant design's Table or Tree. 用clojurescript写的js库，根据list中元素的id和parentId等字段把list转换为tree，获取tree中的子孙节点、祖先节点、兄弟节点、上下兄弟节点等。
高级语言： Clojure
项目地址: git://github.com/shann09/ztree.git
创建时间： 2017-08-25T03:12:34Z
项目社区：https://github.com/shann09/ztree
开源协议：
下载


ztree

用clojurescript写的js库，根据list中元素的id和parentId等字段把list转换为tree，获取tree中的子孙节点、祖先节点、兄弟节点、上下兄弟节点等

可以用js调用，也可以被clojurescript调用，源码稍作修改也可以被clojure调用

可用于配合蚂蚁金服(antd)的Table和Tree组件使用。

list->tree js/cljs lib，work with ant design’s Table or Tree.

当前版本

npm：

[“cl-js-ztree”: “^1.3.2”]

使用文档

编译：

  1. lein clean;lein cljsbuild auto dev;
  2. 或
  3. lein clean;lein cljsbuild once min;

查看：

  1. 在浏览器中打开tree.html，打开console查看打印结果
  3. 示例树的层级结构如下：
  5.      0
  6.    /   \
  7.   1      2
  8.  /|\    / \
  9. 3 8 4  5  7
  10.        |
  11.        6

js: 参考tree.html

  1. 导入
  2.     html的<script>引入js，请反注释^:export，注释掉(aset js/exports k f)，然后编译，再引入
  4.     commonjs导入依赖，请增加依赖 "cl-js-ztree": "^x.x.x"，然后import ztree from 'cl-js-ztree';
  6.     具体细节，参考下面的"打包成依赖库"
  8. ;创建一棵树，
  9. ;  第一个参数[id字段 父节点id字段 排序字段 子节点字段]是定义树的结构，
  10. ;      前3个可根据list中字段名称灵活定义，子节点字段可以指定生成的json-tree的子节点字段名称
  11. ;  第二个参数是所有节点组成的list
  12. var tree = ztree.create_js_tree(
  13.     ["key","parentKey","sortNum","children"],
  14.     [
  15.       { "key": "3" ,"parentKey": "1" ,"sortNum": 3, "name": "d"},
  16.       { "key": "7" ,"parentKey": "2" ,"sortNum": 7, "name": "h"},
  17.       { "key": "4" ,"parentKey": "1" ,"sortNum": 8 ,"name": "e"},
  18.       { "key": "0" ,"parentKey": null ,"sortNum": 0 ,"name": "a"},
  19.       { "key": "6" ,"parentKey": "5" ,"sortNum": 6, "name": "g"},
  20.       { "key": "2" ,"parentKey": "0" ,"sortNum": 2, "name": "c"},
  21.       { "key": "1" ,"parentKey": "0" ,"sortNum": 1, "name": "b"},
  22.       { "key": "5" ,"parentKey": "2" ,"sortNum": 5, "name": "f"},
  23.       { "key": "8" ,"parentKey": "1" ,"sortNum": 3, "name": "i"},
  24.     ]);
  25.   ;ztree.get_raw
  26.   ;返回list，获取原始list
  27.   console.log("raw",ztree.get_raw(tree));
  29.   ;ztree.get_treelike
  30.   ;返回list，获取排序后的list，按层级和sortNum排序，这是一个中间结果，其他api都是基于这个中间结果计算出来的
  31.   console.log("treelike",ztree.get_treelike(tree));
  33.   ;ztree.get_tree
  34.   ;返回tree，获取真正的tree，即树形的json
  35.   console.log("full-tree",ztree.get_tree(tree));
  37.   ;ztree.pluck_descendant
  38.   ;返回list，获取指定n个key的节点及其所有子孙节点，直到叶子节点，不重复
  39.   console.log("descendant 1",ztree.pluck_descendant(tree,["1"]));
  40.   console.log("descendant 1 5",ztree.pluck_descendant(tree,["1","5"]));
  42.   ;ztree.pluck_ancestors
  43.   ;返回list，获取指定n个key的节点及其所有父辈节点，直到根节点，不重复
  44.   console.log("ancestors 5",ztree.pluck_ancestors(tree,["5"]));
  45.   console.log("ancestors 5 7",ztree.pluck_ancestors(tree,["5","7"]));
  47.   ;ztree.pluck_survivors
  48.   ;返回list，获取（指定n个key的节点及其所有子孙节点）以外的所有节点，即所有节点和descendant的差集
  49.   console.log("survivors 2",ztree.pluck_survivors(tree,["2"]));
  50.   console.log("survivors 2 4",ztree.pluck_survivors(tree,["2","4"]));
  52.   ;ztree.pluck_siblings
  53.   ;返回list，获取指定1个key的节点及其所有兄弟节点，不含子孙节点
  54.   console.log("siblings 100",ztree.pluck_siblings(tree,"100"));
  55.   console.log("siblings 0",ztree.pluck_siblings(tree,"0"));
  56.   console.log("siblings 3",ztree.pluck_siblings(tree,"3"));
  57.   console.log("siblings 6",ztree.pluck_siblings(tree,"6"));
  59.   ;ztree.pluck_prenext
  60.   ;返回长度为3的list，获取指定1个key的节点及其前后2个兄弟节点，[前一个兄弟, 自己, 下一个兄弟]，如果没有对应兄弟，则对应位置会是null
  61.   console.log("prenext 6",ztree.pluck_prenext(tree,"6"));
  62.   console.log("prenext 4",ztree.pluck_prenext(tree,"4"));
  63.   console.log("prenext 0",ztree.pluck_prenext(tree,"0"));
  64.   console.log("prenext 8",ztree.pluck_prenext(tree,"8"));
  66.   ;ztree.find
  67.   ;返回object，获取指定1个key的节点
  68.   console.log("find 6",ztree.find(tree,"6"));
  70.   输出如下：
  71.     raw-list [
  72.     {"key":"3","parentKey":"1","sortNum":3,"name":"d"},
  73.     {"key":"7","parentKey":"2","sortNum":7,"name":"h"},
  74.     {"key":"4","parentKey":"1","sortNum":8,"name":"e"},
  75.     {"key":"0","parentKey":null,"sortNum":0,"name":"a"},
  76.     {"key":"6","parentKey":"5","sortNum":6,"name":"g"},
  77.     {"key":"2","parentKey":"0","sortNum":2,"name":"c"},
  78.     {"key":"1","parentKey":"0","sortNum":1,"name":"b"},
  79.     {"key":"5","parentKey":"2","sortNum":5,"name":"f"},
  80.     {"key":"8","parentKey":"1","sortNum":3,"name":"i"}]
  82.     treelike [
  83.     {"key":"0","parentKey":null,"sortNum":0,"name":"a"},
  84.     {"key":"1","parentKey":"0","sortNum":1,"name":"b"},
  85.     {"key":"2","parentKey":"0","sortNum":2,"name":"c"},
  86.     {"key":"3","parentKey":"1","sortNum":3,"name":"d"},
  87.     {"key":"8","parentKey":"1","sortNum":3,"name":"i"},
  88.     {"key":"5","parentKey":"2","sortNum":5,"name":"f"},
  89.     {"key":"7","parentKey":"2","sortNum":7,"name":"h"},
  90.     {"key":"4","parentKey":"1","sortNum":8,"name":"e"},
  91.     {"key":"6","parentKey":"5","sortNum":6,"name":"g"}]
  93.     full-tree [
  94.     {"key":"0","parentKey":null,"sortNum":0,"name":"a","children":[
  95.        {"key":"1","parentKey":"0","sortNum":1,"name":"b","children":[
  96.            {"key":"3","parentKey":"1","sortNum":3,"name":"d"},
  97.            {"key":"8","parentKey":"1","sortNum":3,"name":"i"},
  98.            {"key":"4","parentKey":"1","sortNum":8,"name":"e"}]},
  99.        {"key":"2","parentKey":"0","sortNum":2,"name":"c","children":[
  100.            {"key":"5","parentKey":"2","sortNum":5,"name":"f","children":[
  101.                {"key":"6","parentKey":"5","sortNum":6,"name":"g"}]},
  102.            {"key":"7","parentKey":"2","sortNum":7,"name":"h"}]}]}]
  104.     descendant 1 [
  105.     {"key":"1","parentKey":"0","sortNum":1,"name":"b"},
  106.     {"key":"3","parentKey":"1","sortNum":3,"name":"d"},
  107.     {"key":"8","parentKey":"1","sortNum":3,"name":"i"},
  108.     {"key":"4","parentKey":"1","sortNum":8,"name":"e"}]
  110.     descendant 1 5 [
  111.     {"key":"1","parentKey":"0","sortNum":1,"name":"b"},
  112.     {"key":"3","parentKey":"1","sortNum":3,"name":"d"},
  113.     {"key":"8","parentKey":"1","sortNum":3,"name":"i"},
  114.     {"key":"4","parentKey":"1","sortNum":8,"name":"e"},
  115.     {"key":"5","parentKey":"2","sortNum":5,"name":"f"},
  116.     {"key":"6","parentKey":"5","sortNum":6,"name":"g"}]
  118.     ancestors 5 [
  119.     {"key":"0","parentKey":null,"sortNum":0,"name":"a"},
  120.     {"key":"2","parentKey":"0","sortNum":2,"name":"c"},
  121.     {"key":"5","parentKey":"2","sortNum":5,"name":"f"}]
  123.     ancestors 5 7 [
  124.     {"key":"0","parentKey":null,"sortNum":0,"name":"a"},
  125.     {"key":"2","parentKey":"0","sortNum":2,"name":"c"},
  126.     {"key":"5","parentKey":"2","sortNum":5,"name":"f"},
  127.     {"key":"7","parentKey":"2","sortNum":7,"name":"h"}]
  129.     survivors 2 [
  130.     {"key":"0","parentKey":null,"sortNum":0,"name":"a"},
  131.     {"key":"1","parentKey":"0","sortNum":1,"name":"b"},
  132.     {"key":"3","parentKey":"1","sortNum":3,"name":"d"},
  133.     {"key":"8","parentKey":"1","sortNum":3,"name":"i"},
  134.     {"key":"4","parentKey":"1","sortNum":8,"name":"e"}]
  136.     survivors 2 4 [
  137.     {"key":"0","parentKey":null,"sortNum":0,"name":"a"},
  138.     {"key":"1","parentKey":"0","sortNum":1,"name":"b"},
  139.     {"key":"3","parentKey":"1","sortNum":3,"name":"d"},
  140.     {"key":"8","parentKey":"1","sortNum":3,"name":"i"}]
  142.     siblings 100 []
  144.     siblings 0 [
  145.     {"key":"0","parentKey":null,"sortNum":0,"name":"a"}]
  147.     siblings 3 [
  148.     {"key":"3","parentKey":"1","sortNum":3,"name":"d"},
  149.     {"key":"8","parentKey":"1","sortNum":3,"name":"i"},
  150.     {"key":"4","parentKey":"1","sortNum":8,"name":"e"}]
  152.     siblings 6 [
  153.     {"key":"6","parentKey":"5","sortNum":6,"name":"g"}]
  155.     prenext 6 [
  156.     null,
  157.     {"key":"6","parentKey":"5","sortNum":6,"name":"g"},
  158.     null]
  160.     prenext 4 [
  161.     {"key":"8","parentKey":"1","sortNum":3,"name":"i"},
  162.     {"key":"4","parentKey":"1","sortNum":8,"name":"e"},
  163.     null]
  165.     prenext 0[
  166.     null,
  167.     {"key":"0","parentKey":null,"sortNum":0,"name":"a"},
  168.     null]
  170.     prenext 8 [
  171.     {"key":"3","parentKey":"1","sortNum":3,"name":"d"},
  172.     {"key":"8","parentKey":"1","sortNum":3,"name":"i"},
  173.     {"key":"4","parentKey":"1","sortNum":8,"name":"e"}]
  175.     find 6 
  176.     {"key":"6","parentKey":"5","sortNum":6,"name":"g"}

cljs: 参考ztree/core_test.cljs

  1. (defn test []
  2.   (let [d [
  3.            { :key "3" :parentKey "1" :sortNum 3 :name "d"}
  4.            { :key "7" :parentKey "2" :sortNum 7 :name "h"}
  5.            { :key "4" :parentKey "1" :sortNum 8 :name "e"}
  6.            { :key "0" :parentKey nil :sortNum 0 :name "a"}
  7.            { :key "6" :parentKey "5" :sortNum 6 :name "g"}
  8.            { :key "2" :parentKey "0" :sortNum 2 :name "c"}
  9.            { :key "1" :parentKey "0" :sortNum 1 :name "b"}
  10.            { :key "5" :parentKey "2" :sortNum 5 :name "f"}
  11.            { :key "8" :parentKey "1" :sortNum 3 :name "i"}
  12.            ]
  13.         tree (ztree/create-cljs-tree [:key :parentKey :sortNum :children] d)
  14.         ]
  15.     (.log js/console "raw-list" (.stringify js/JSON (clj->js (ztree/get-raw tree))))
  16.     (.log js/console "treelike" (.stringify js/JSON (clj->js (ztree/get-treelike tree))))
  17.     (.log js/console "full-tree" (.stringify js/JSON (clj->js (ztree/get-tree tree))))
  18.     (.log js/console "descendant 1" (.stringify js/JSON (clj->js (ztree/pluck-descendant tree ["1"]))))
  19.     (.log js/console "descendant 1 5" (.stringify js/JSON (clj->js (ztree/pluck-descendant tree ["1","5"]))))
  20.     (.log js/console "ancestors 5" (.stringify js/JSON (clj->js (ztree/pluck-ancestors tree ["5"]))))
  21.     (.log js/console "ancestors 5 7" (.stringify js/JSON (clj->js (ztree/pluck-ancestors tree ["5","7"]))))
  22.     (.log js/console "survivors 2" (.stringify js/JSON (clj->js (ztree/pluck-survivors tree ["2"]))))
  23.     (.log js/console "survivors 2 4" (.stringify js/JSON (clj->js (ztree/pluck-survivors tree ["2","4"]))))
  24.     (.log js/console "siblings 100" (.stringify js/JSON (clj->js (ztree/pluck-siblings tree "100"))))
  25.     (.log js/console "siblings 0" (.stringify js/JSON (clj->js (ztree/pluck-siblings tree "0"))))
  26.     (.log js/console "siblings 3" (.stringify js/JSON (clj->js (ztree/pluck-siblings tree "3"))))
  27.     (.log js/console "siblings 6" (.stringify js/JSON (clj->js (ztree/pluck-siblings tree "6"))))
  28.     (.log js/console "prenext 6" (.stringify js/JSON (clj->js (ztree/pluck-prenext tree "6"))))
  29.     (.log js/console "prenext 4" (.stringify js/JSON (clj->js (ztree/pluck-prenext tree "4"))))
  30.     (.log js/console "prenext 0" (.stringify js/JSON (clj->js (ztree/pluck-prenext tree "0"))))
  31.     (.log js/console "prenext 8" (.stringify js/JSON (clj->js (ztree/pluck-prenext tree "8"))))
  32.     (.log js/console "find 6" (.stringify js/JSON (clj->js (ztree/find tree "6"))))
  33.     ))
  35.     输出同js

打包成依赖库

ztree是一个用cljs写的list->tree库，也是一个打包cljs为npm依赖包的教程，源码中有足够丰富的注释

  1. ztree.cljs
  3. ;使用cljs来写代码可以获得不少好处：
  4. ;    不变性，gcc高级编译，lisp函数式写法，宏，clojure代码重用，记忆函数，尾递归优化等等等等
  5. ;cljs非常适合编写依赖库
  6. ;
  7. ;export的目的就是为了让js可以调用编译好的包，
  8. ;如果只是想让cljs调用（参考core_test.cljs），那就不需要export相关代码（可以删掉^:exoprt和aset js/exports）
  9. ;
  10. ;export的方式有2种
  11. ;  一种是^:export
  12. ;      这种方式会把被标记为^:export的方法或对象暴露到全局，
  13. ;      当前项目不使用这种方式，所以上面的标记都被注释掉，标记方式类似如下
  14. ;          (defprotocol (^:export some-fn []) (^:export some-fn-2 []) )
  15. ;          (defn ^:export some-fn-3 [] ... )
  16. ;      用于直接在html的<script>标签中引入js包
  17. ;      然后用namespace.exported_fn的方式调用，参考tree.html，类似如下
  18. ;          ztree.create_js_tree(...);
  19. ;  另一种是aset js/exports
  20. ;      即把暴露的方法或对象绑定到exports上
  21. ;      这种方式用于将代码打包为npm依赖包，上传到npm仓库上，
  22. ;          参考package.json，npm init,npm login,npm publish
  23. ;      需要引用该依赖包的代码可以配置package.json增加 "cl-js-ztree": "^x.x.x",
  24. ;      并使用npm install来下载该依赖，然后调用方式类似如下
  25. ;          //在.js或.jsx文件中引入
  26. ;          import ztree from 'cl-js-ztree';
  27. ;          ztree.create_js_tree(...);

相关脚本：

  1. lein new ztree
  3. npm init //生成package.json，需修改一些配置才能发布成功
  5. npm login //需要在npm官网注册账号
  7. npm publish //发布
  9. npm unpublish <package>@<version>

License

Copyright © 2017 shann09

Distributed under the Eclipse Public License either version 1.0 or (at
your option) any later version.