<!DOCTYPE html>
<HTML>
<HEAD>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<link rel="stylesheet" href="bower_components/ztree/css/zTreeStyle/demo.css" type="text/css">
<link rel="stylesheet" href="bower_components/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="bower_components/ztree/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="bower_components/ztree/js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="bower_components/ztree/js/jquery.ztree.excheck-3.5.js"></script>
<SCRIPT type="text/javascript">
var setting = {
check: {
enable: true,
//chkStyle: "radio", //设置为单选框
chkStyle: "checkbox", //设置为复选框
chkboxType : {"Y" : "ps", "N" : "ps"}, //设置为影响
//chkboxType: {"Y" : "", "N" : ""} //设置为不影响
//Y 属性定义 checkbox 被勾选后的情况；
//N 属性定义 checkbox 取消勾选后的情况；
//"p" 表示操作会影响父级节点；
//"s" 表示操作会影响子级节点。
nocheckInherit: true, //可以显示/隐藏单/复选框
chkDisabledInherit: true //单/复选框禁/选用
},
data: {
simpleData: {
enable: true
}
}
};
var nodes =[
{ id:1, pId:0, name:"1", open:true},
{ id:11, pId:1, name:"111"},
{ id:12, pId:1, name:"222",chkDisabled:true},
{ id:13, pId:1, name:"333",checked:true, halfCheck:true}, //强制半勾选状态
];
function is_check(e) {
var zTree = $.fn.zTree.getZTreeObj("sys"),
nocheck = e.data.nocheck,
nodes = zTree.getSelectedNodes();
if (nodes.length == 0) {
alert("请先选择一个节点");
}
for (var i=0, l=nodes.length; i<l; i++) {
nodes[i].nocheck = nocheck;
zTree.updateNode(nodes[i]);
}
}
$(document).ready(function(){
$.fn.zTree.init($("#sys"), setting, nodes);
$("#hid").bind('click',{nocheck: true},is_check);
$("#dis").bind('click',{nocheck: false},is_check);
});
</SCRIPT>
</HEAD>
<BODY>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="sys" class="ztree"></ul>
</div>
<button id="dis" οnclick="return false;">显示</button>
<button id="hid" οnclick="return false;">隐藏</button>
</div>
</BODY>
</HTML>