介绍:简单树形结构 可动态修改数据 实现点击事件 只选择叶子结点 以及多选框 等事件

使用规则如下:

onlyLeaf属性	叶子结点--值为true时:只能选择叶子结点..值为false时:都可选择 默认为false
onlyIcon属性	图标属性--当为true时:点击图标才可显示下一级节点..值为false时 :点击文字也可显示下一级节点
checkBox属性	复选框属性--当为true时:出现节点复选框..值为false时 :不显示 默认false

1.引入样式表文件

2. 引入:jquery-1.9.1.min.js 

3.默认 树形容器div 

 

4.js代码如下:

 (对于ids里面的json数据 格式如下 可根据需要添加其他属性,添加后即可 最后都会添加到标签内)

var ids=[            {id:1,pid:0,name:'行政档案'},            {id:2,pid:0,name:'财务档案'},            {id:3,pid:0,name:'研发档案'},            {id:4,pid:0,name:'运营档案'},            {id:12,pid:1,name:'行政中心明细'},            {id:121,pid:12,name:'2017年行政中心财务报告'},            {id:123,pid:12,name:'2017年行政中心财务报告'},            {id:122,pid:12,name:'2017年行政中心财务报告'},            {id:1221,pid:122,name:'2017年行政中心报告明细'},            {id:13,pid:1,name:'统计工作'},            {id:131,pid:13,name:'2017年统计工作统计报告'},            {id:21,pid:2,name:'财务中心明细'},            {id:31,pid:3,name:'研发中心明细'}            ];                         init(ids);                            function init(data){                 var dul=document.createElement("ul");                 dul.marginLeft="0px";                 document.getElementById("tree").appendChild(dul);                for (var i=0;i

普通效果:

多选框效果:

//点击事件 可自己添加nodeClick(sender)事件 其中sender 为当前点击对象

效果如下: