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的复选框应用,仅供参考。