zTree:实现checkbox、全选、取消全选功能

时间:2022-01-20 03:24:40

今天下午需要ztree实现取消全选,于是尝试了下,先看最终效果

开始

zTree:实现checkbox、全选、取消全选功能

点击勾选

zTree:实现checkbox、全选、取消全选功能

点击取消勾选

zTree:实现checkbox、全选、取消全选功能

代码如下

<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: "" //用于修正根节点父节点数据 默认值:null } } }; var nodes = [ {id :"1",pId:"0",name :"maomao"}, {id :"2",pId:"0",name : "maomao"}, {id :"3",pId:"0",name : "maomao"}, {id :"4",pId:"0",name : "maomao"}, {id :"11",pId:"1",name: "maomao"}, {id :"12",pId:"1",name: "maomao"}, {id :"21",pId:"2",name: "maomao"}, {id :"22",pId:"2",name: "maomao"}, {id :"31",pId:"3",name: "maomao"}, {id :"32",pId:"3",name: "maomao"}, {id :"41",pId:"4",name: "maomao"}, {id :"42",pId:"4",name: "maomao"}, {id :"43",pId:"4",name: "maomao"}, {id :"111",pId:"11",name:"maomao"}, {id :"112",pId:"11",name: "maomao"}, {id :"121",pId:"12",name: "maomao"}, {id :"122",pId:"12",name: "maomao"} ]; 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"); //那个树对象 console.log(zTreeObj); var nodes = zTreeObj.transformToArray(zTreeObj.getNodes()); console.log(nodes); </script>
</body>

下载地址:http://download.csdn.net/download/allenjay11/10004008