Ztree的使用默认勾选，并且打开树状结构展开勾选的层级

最新推荐文章于 2024-03-21 19:15:08 发布

win from within

最新推荐文章于 2024-03-21 19:15:08 发布

阅读量1.1k

点赞数 1

分类专栏：前端文章标签： javascript html

本文链接：https://blog.csdn.net/weixin_42553570/article/details/108141137

版权

本文介绍了如何在Ztree中设置使得在再次打开树状结构时，能保持之前选中的节点状态，并自动展开相应层级。提供了一个包含搜索框的树状结构示例，并附带了相应的JavaScript代码实现。

摘要由CSDN通过智能技术生成

选中节点再次打开之后默认勾选之前选中的节点

//选中节点展示
var productCodeList=product_code.split(';');//productCodeList是后端传过来的之前选中的数组
if(productCodeList!=""){
   
  for(var i=0;i<productCodeList.length;i++){
   
	  var node = treeobj.getNodeByParam("id",productCodeList[i]);
 	  if(node != null) {
   
 		treeobj.checkNode(node, true)
	  }

	}
}

再次打开树状结构之后默认勾选之前选中的并且打开选中节点的层级

//展开默认选中节点
var tree = $.fn.zTree.getZTreeObj("treeDemo");
var nodes=tree.getCheckedNodes(true); 
for(var j=0;j<nodes.length;j++){
   
	var node = tree.getNodeByParam("id",nodes[j].id);
	var parent = node.getParentNode();
	//判断是否有子节点
	if(parent){
   
		if(!parent.open){
   
			tree.expandNode(parent,true,true);
		}
		tree.checkNode(node , true,true); 
		
	}
	
}

完整代码附上
带搜素框的树状结构展示

<table class="gritter-with-table" id="productsearch" cellspacing="1" style="display: table;">
		<tbody>
		<tr>
		<td style="border-right: none;width:50%; ">
		<input type="text" id="keyWord" class="form-control" value="" style=" " placeholder="请填写查询关键字">
		</td>