🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

The jQuery sim-tree plugin lets you create a checkable, hierarchical tree with support for asynchronous data loading and indeterminate (tri-state) checkboxes.

tree-view

Documentation

sim-tree

一个操作简单的基于jquery写的树展示插件,支持异步展示子节点

没有那么多复杂功能,回归简单

npm直接安装

npm install sim-tree --save

简单使用

引入dist目录下的simTree.css 和simTree.js

demo图片

    <div id="tree"></div>     <div id="tree2"></div>
    // 数据格式1 有children     var list = [{         "id": '350102000000',         "pid": '',         "name": "鼓楼区",         "children": [             {                 "id": '350103000000',                 "pid": '350102000000',                 "name": "东街口"             }         ]     },     {         "id": '350103000000',         "pid": '',         "name": "台江区"     },     {         "id": '350104000000',         "pid": '',         "name": "仓山区"     }];     // 数据格式2 同级     var list = [{         "id": '350102000000',         "pid": '',         "name": "鼓楼区",     },     {         "id": '350103000000',         "pid": '350102000000',         "name": "东街口"     },     {         "id": '350103000000',         "pid": '350101000000',         "name": "宝龙"     },     {         "id": '350103000000',         "pid": '',         "name": "台江区"     },     {         "id": '350104000000',         "pid": '',         "name": "仓山区"     }];     // 写法1     var tree = simTree({         el: '#tree',         data: list,         //check: true, // true 开启多选         //linkParent: true, // 父子关联         // 点击节点触发         onClick: function (item) {             console.log(item);         },         // 改变节点触发         onChange: function (item) {             console.log(item);         },         // 树生成后触发         done: function (data) {          }     });     // 绑定事件也可以这样写     tree.on('click', function (item) {         console.log(item);     });     // 改变节点触发     tree.on('change', function (item) {         console.log(item);     });     // 树生成后触发     tree.on('done', function (item) {         console.log(item);     });     // 写法2     var tree2 = $('#tree2').simTree({         data: list,         //check: true, // true 开启多选         //linkParent: true, // 父子关联         // 点击节点触发         onClick: function (item) {             console.log(item);         },         // 改变节点触发         onChange: function (item) {             console.log(item);         },         // 树生成后触发         done: function (data) {          }     });

简单说明文档

交流 & 提问

todo

  • 下拉树

关于作者

  • linjingming

You May Also Like