①带有父子关系的标准
zTreeNodes
举例:
Js代码
1.var zTreeNodes = [
2.{"id":1, "name":"test1", "nodes":[
3.{"id":11, "name":"test11", "nodes":[
4.{"id":111, "name":"test111"}
5."id":12, "name":"test12"}
②带有父子关系的简单
Array
格式
(isSimpleData)的zTreeNodes
举例:
Js代码
1.var treeNodes = [
2. {"id":1, "pId":0, "name":"test1"},
3.{"id":11, "pId":1, "name":"test11"},
4. {"id":12, "pId":1, "name":"test12"},
5. {"id":111, "pId":11, "name":"test111"},
例子:
(Java代码)
①在页面引用
zTree的js和css:
Html代码
1.
<!-- ZTree树形插件 -->
2.<link
rel="stylesheet"
href="<%=root%>/Web/common/css/zTreeStyle/zTreeStyle.css"type
="text/css">
3.<!-- <link rel="stylesheet" href="<%=root%>/Web/common/css/zTreeStyle/zTreeIcons.css" type="text/css"> -->
4.<script ype="text/javascript"src="<%=root%>/Web/common/js/jquery-ztree-2.5.min.js"
></script>
思路就是:找出父节点的所有子节点的checked的属性设置成与父节点一致即可我是利用jquery实现,看看是否符合你的要求
<script src="../lib/jquery.js" type="text/javascript"></script>
<script src="../jquery.treeview.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#tree").treeview()
$("input[name='ids']").click(function(){
var checkedValue = this.checked
$(this).parent("li").find("input[name='ids']").attr("checked",checkedValue)
})
})
</script>
<ul id='tree'>
<li>
<input type='checkbox' name='ids' id="test"/>
<span class='folder'>test1</span>
<ul>
<li>
<input type='checkbox' name='ids' />
<span class='folder'>test11</span>
</li>
</ul>
<ul>
<li>
<input type='checkbox' name='ids' />
<span class='folder'>test12</span>
<ul>
<li>
<input type='checkbox' name='ids' />
<span class='folder'>test121</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>