节点1,节点2,节点3
有以下四种方法
//展开树
function open(objNode){
//...your code 展开树
addClose(objNode)
}
//关闭树
function close(objNode){
//...your code 关闭树
addClose(objNode)
}
//添加展开事件
function addOpen(objNode){
//objNode节点对象
objNode.detachEvent.attachEvent("onclick",close)
objNode.attachEvent("onclick",open)
}
//添加关闭事件
function addClose(objNode){
//objNode节点对象
objNode.detachEvent.attachEvent("onclick",open)
objNode.attachEvent("onclick",close)
}
那么在生成树的时候给所有节点绑定方法open(objNode)就可以了。
上面的代码是用原生的JS写的。JQuery的。。你可以在网上找找如何绑定与删除事件。
用z-tree插件①带有父子关系的标准
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>