<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../css/zTreeStyle/zTreeStyle.css">
<script src="../js/jquery-1.4.4.min.js"></script>
<script src="../js/jquery.ztree.all.min.js"></script>
</head>
<body>
<ul id="leftTree" class="ztree"></ul>
<a id="checkAllTrue" href="#" >全选</a>
<a id="checkAllFalse" href="#">全不选</a>
<script>
var setting = {
check:{
enable:true
},
view: {
showLine: true,
selectedMulti: false
},
data: {
simpleData: {
enable:true,
idKey: "id",
pIdKey: "pId",
rootPId: ""
}
}
};
var nodes = [
{id :"1",pId:"0",name :"父1"},
{id :"11",pId:"1",name : "子-1"},
{id :"111",pId:"1",name : "子-1"},
{id :"2",pId:"0",name : "父2"},
{id :"22",pId:"2",name: "子-2"},
{id :"222",pId:"2",name: "子-2"},
{id :"3",pId:"3",name: "父3"},
{id :"33",pId:"3",name: "子-3"}
];
var tree = $.fn.zTree.init($('#leftTree'), setting, nodes);
tree.expandAll(tree);
function checkNode(e) {
var zTree = $.fn.zTree.getZTreeObj("leftTree"),
type = e.data.type,
nodes = zTree.getSelectedNodes();
console.log(type.indexOf("All"));
if (type.indexOf("All") < 0 && nodes.length == 0) {
alert("请先选择一个节点");
}
if (type == "checkAllTrue") {
zTree.checkAllNodes(true);
} else if (type == "checkAllFalse") {
zTree.checkAllNodes(false);
}
}
$("#checkAllTrue").bind("click", { type: "checkAllTrue" }, checkNode);
$("#checkAllFalse").bind("click", { type: "checkAllFalse" }, checkNode); 选不选
var zTreeObj = $.fn.zTree.getZTreeObj("leftTree");
var nodes = zTreeObj.transformToArray(zTreeObj.getNodes());
</script>
</body>
</html>