若依中使用zTree 添加复选框，并设置选中和回显功能示例

zTree 添加复选框，并设置选中和回显功能示例

zTree 是一个依靠 jQuery 实现的多功能 “树插件”，这篇文章主要介绍zTree添加复选框的使用方法，非常具有实用价值，需要的朋友可以参考下。

一、页面加载树，请求后台接口返回数据集，并加载到树中

• 加载js和css并添加树元素

 <th:block th:include="include :: ztree-css"/>
 <th:block th:include="include :: ztree-js"/>
 
 <div id="tree" class="ztree"></div>

• 打开页面时，加载数据

 $(function () {
	var url = ctx + "fdc/tree/getTree";
	var options = {
	    url: url,
	    expandLevel: 0,
	    check: {
	        enable: true,//显示复选框
	        chkStyle: "checkbox"
	    },
	    onCheck: zOnCheck, // 复选框选中方法
	    callBack: callBack // 回显回调方法
	
	};
	$.tree.init(options);
});

二、调用复选框方法，并获取选中值，以及取消选中如何移除

// 全局变量
var checks = [];

// 复选框调用
function zOnCheck(event, treeId, treeNode) {
   if (treeNode.checked) {//如果是选中节点
       if (treeNode.isParent) {//如果选中的是父节点
           //获取选中的父节点的所有子节点
           var childrenNodes = treeNode.children;
           for (var i = 0; i < childrenNodes.length; i++) {
               checks.push({id: childrenNodes[i].id, name: childrenNodes[i].name});
           }
       } else {
           checks.push({id: treeNode.id, name: treeNode.name});
       }
   } else {//如果是取消选中
       if (treeNode.isParent) {//如果取消的是父节点
           //获取父节点的所有子节点，并移除取消项
           var childrenNodes = treeNode.children;
           for (var i = 0; i < childrenNodes.length; i++) {
               removeCheck(childrenNodes[i].id);
           }
       } else {
           removeCheck(treeNode.id);
       }
   }
}

三、当取消复选项时，需要从checks数组中移除，主要使用splice

// 移除元素
function removeCheck(chkid) {
    $.each(checks, function (idx, item) {
        if (item != undefined && item.id == chkid) {
            checks.splice(idx, 1);
        }
    })
}

四、回显选中项，回显前需要对checks进行赋值

// 回显选中
function callBack () {
   var treeObj = $.fn.zTree.getZTreeObj("tree"); // 获取到树
   if (undefined !== treeObj) {
       $.each(checks, function (idx, item) {
           //根据id获取节点
           var nodes = treeObj.getNodesByParamFuzzy("id", item.id, null); 
           if (nodes.length > 0) {
               treeObj.checkNode(nodes[0], true, true);
           }
       });
   }
}

五、还可以把信息输出到页面上，如：

 // 添加到页面
function setSelectHtml() {
	 $("#list").html('');
	 $.each(checks, function (idx, item) {
	     $("#list").append('<p id="' + item.id + '">' + item.name + '</p>');
	 });
 }

以上就是zTree的复选框应用，仅供参考。