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);
})

其他参考https://blog.csdn.net/lyyxp/article/details/50846690###;

一般情况下,通过zTree官方API的方法获取得到的是一个包含所有子节点的根节点(子节点都处于 children 属性下)

var treeObj = $.fn.zTree.getZTreeObj(“tree");
var nodes = treeObj.getNodes();

当我们需要一次获取所有树节点的时候,有两种方法:
一种是通过递归的方式(此处就不提及了)。
另一种就是通过zTreet提供的方法:

     var treeObj = $.fn.zTree.getZTreeObj(”tree“);
    var node = treeObj.getNodes();
    var nodes = treeObj.transformToArray(node);

这种方法得到的就是整颗树的所有节点集合

Ztree 树插件 树节点名称太长的解决方案(给背景div加滚动条):https://www.cnblogs.com/danywdd/p/5588136.html

使用省略号方法:使用addDiyDom http://blog.csdn.net/zhengbo0/article/details/17759543

 var setting = {
            view: {
                addDiyDom: addDiyDom
            }
        };

 function addDiyDom(treeId, treeNode) {
            var spaceWidth = 5;
            var switchObj = $("#" + treeNode.tId + "_switch"),
            icoObj = $("#" + treeNode.tId + "_ico");
            switchObj.remove();
            icoObj.parent().before(switchObj);
            var spantxt = $("#" + treeNode.tId + "_span").html();
            if (spantxt.length > 17) {
                spantxt = spantxt.substring(0, 17) + "...";
                $("#" + treeNode.tId + "_span").html(spantxt);
            }
        }
**有checkbox时**
function addDiyDom(treeId, treeNode) {
            var spaceWidth = 5;
            var switchObj = $("#" + treeNode.tId + "_switch"),
            checkObj = $("#" + treeNode.tId + "_check"),
            icoObj = $("#" + treeNode.tId + "_ico");
            switchObj.remove();
            checkObj.remove();
            icoObj.parent().before(switchObj);
            icoObj.parent().before(checkObj);

            var spantxt = $("#" + treeNode.tId + "_span").html();
            if (spantxt.length > 17) {
                spantxt = spantxt.substring(0, 17) + "...";
                $("#" + treeNode.tId + "_span").html(spantxt);
            }
        
  }

另外,设置node节点checked选中,有两种方法实现:
(1)、zTree.checkNode(node, true, true);
(2)、node.checked = true;

取消当前所有被选中节点的选中状态

var treeObj = $.fn.zTree.getZTreeObj("tree");
treeObj.cancelSelectedNode();

取消当前第一个被选中节点的选中状态

var treeObj = $.fn.zTree.getZTreeObj("tree");
var nodes = treeObj.getSelectedNodes();
if (nodes.length>0) { 
    treeObj.cancelSelectedNode(nodes[0]);
}

详情看ztree API [ztree API](http://www.treejs.cn/v3/api.php

回复资料获得视频资料
在这里插入图片描述

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐