ztree指定节点 设置复选框

ztree指定节点 设置复选框

首先，需引入ztree的js文件

<script src="../../assets/ztree/js/jquery.ztree.core-3.5.min.js"></script>
<script src="../../assets/ztree/js/jquery.ztree.excheck-3.5.min.js"></script>

在请求接口成功的情况下初始化：

$.fn.zTree.init($("#tree"), Setting, data);

第一个参数为插件固定的ID，setting为树的相关配置比如（添加复选框，是否多选，相关回调），data为后台返回的ztree数据。

setting设置：

var Setting = {
data: {            //这里不动
simpleData: {
enable: true,
idKey: "id",
pidKey: "pId",
rootPid: '-1'
}
},
check: {
enable: true,     //这里设置是否显示复选框
chkboxType: { "Y": "", "N": "" }      //设置复选框是否与 父/子 级相关联
},
view: {
showIcon: false    //禁止多选
},
callback: {
onCheck: zTreeOnCheck,         //点击复选框相关回调（回调名称固定）
beforeCheck : function(treeId, treeNode) {      //选择复选框前相关回调
if (treeNode.isParent) {
if(treeNode.myAttr !== "1"){ //判断是否是需要显示复选框的节点
treeNode.nocheck = true;   //设置复选框不显示
}
return false;
}
}
}
};

在初始化的时候就设置除了指定节点需要复选框，其他不显示复选框

var zTree = $.fn.zTree.getZTreeObj("tree"),        // 获取ztree对象
node = zTree.getNodes(),      //获取根节点
nodes = zTree.transformToArray(node);    //遍历所有节点
if(nodes.length>0){
for(var i=0;i<nodes.length;i++){
if(nodes[i].myAttr !== "1"){         //判断需要显示复选框的条件
nodes[i].nocheck=true;               //nocheck为true表示没有选择框
zTree.updateNode(nodes[i]);         //刷新
}
}
}
zTree.setting.callback.onCheck(zTree, zTree.setting.treeId, node); // 调用回调
zTree.setting.callback.beforeCheck(zTree.setting.treeId, node);

function zTreeOnCheck(zTree, treeId, treeNode) {
try{
if(treeNode.myAttr == "1"){
if(treeNode.checked){
treeNode.getParentNode().checked = false;
}

}else{
treeNode.checked = false;
}
}catch(e){
$.showAlert('error',"无查找结果");
}

}

获取被选中的某某值

$("#get").click(function(){
var dataNodes = "",
nodes = zTree.getCheckedNodes(true);
if(0 === nodes.length) {
alert("请选择!");
return;
}
for(var i = 0; i < nodes.length; i++) {
dataNodes += nodes[i].id + "|";
}
alert(dataNodes);
})

详情看ztree API ztree API