一个操作简单的基于jquery写的树展示插件,支持异步展示子节点
没有那么多复杂功能,回归简单
npm install sim-tree --save
引入dist目录下的simTree.css 和simTree.js
<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) {
}
});