ZTree的选择性展开树节点_ztree展开节点-CSDN博客

本文链接：https://blog.csdn.net/jeromer26/article/details/81139737

最近项目需要用ZTree插件，之前没有接触过，所以研究了半天API，发现这个Ztree很灵活，确实非常好用，支持的功能也很多，话不多说，我需要根据子节点的名字展开对应父节点，并且对其名字的样式进行改变，在网上找了很久对该插件的样式改变的方法，最后总结了利用实现了功能需求，下面是实现的代码：

<!DOCTYPE html>
<HTML>
 <HEAD>
  <TITLE> ZTREE DEMO </TITLE>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <!--这里引入ztree的样式-->
  <link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">
 </HEAD>

<BODY>
<ul id="tree" class="ztree" ></ul>
<div>ip:</div><input type="text" name="ipId" id="ipId"  /><span><button id="select" onclick="select()">查看</button></span>

<!--这里引入ztree的对应包-->
  <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
  <script  src="js/jquery.ztree.core.js"></script>
  <script  src="js/jquery.ztree.excheck.js" ></script>
  <script  src="js/jquery.ztree.exhide-3.5.min.js" ></script>
 </BODY>
 <SCRIPT type="text/javascript" >
		 
 		var ztreeObj;
		
		
		function select(){
			 var data=document.getElementById("ipId").value;
			var result =ztreeObj.getNodesByParamFuzzy("name",data,null);
			//获取所有节点，使其为展开状态
			for(var i=0;i<result.length;i++){
            var parent = result[i].getParentNode();
            if(!parent.open){
        	   ztreeObj.expandNode(parent,true,true);
            }
            ztreeObj.checkNode(result[i] , true,true); 
			}
			//获取所有满足要求的节点，对其样式改变
			for(var i=0;i<result.length;i++){
				result[i].open=true;
				ztreeObj.updateNode(result[i]);
				//对对应的节点样式颜色设置，此处是红色
				ztreeObj.setting.view.fontCss["color"] ="#FF0000";
				//对节点更新
				ztreeObj.updateNode(result[i]);
			}
		}
		
        var setting={
            view: {
              showLine:true,
      	      showIcon: true//显示节点图片
      	      //chkboxType: { "Y": "", "N": "" }
            }
        };
        //模拟的数据，也可以动态获取
var zTreeNodes=[
    {
  "isParent": true,
   "open":true,
  "name": "共享平台—分布式消息中间件",
  "children": [
    {
      "id": 1,
      //"open":true,
      "name": "NameServer",
      "isParent": true,
      "children": [
        {
          "id": 101,
          "isParent": "false",
          "name": "10.145.216.130:9876"
        },
        {
          "id": 102,
          "isParent": "false",
          "name": "10.145.216.131:9876"
        }
      ]
    },
    {
      "id": 2,
      //"open":true,
      "name": "Controller",
      "isParent": true,
      "children": [
        {
          "id": 201,
          "isParent": "false",
          "name": "10.145.216.130:8021"
        }
      ]
    },
    {
      "id": 3,
      //"open":true,
      "name": "web",
      "isParent": true,
      "children": [
        {
          "id": 301,
          "isParent": "false",
          "name": "10.145.216.130:10911"
        },
        {
          "id": 302,
          "isParent": "false",
          "name": "10.145.216.130:10921"
        },
        {
          "id": 303,
          "isParent": "false",
          "name": "10.145.216.131:10913"
        },
        {
          "id": 304,
          "isParent": "false",
          "name": "10.145.216.131:10923"
        }
      ]
    },
    {
      "id": 4,
      //"open":true,
      "name": "Broker",
      "isParent": true,
      "children": [
        {
          "id": 401,
          "isParent": "false",
          "name": "10.145.216.130:11281"
        },
        {
          "id": 402,
          "isParent": "false",
          "name": "10.145.216.130:11981"
        },
        {
          "id": 403,
          "isParent": "false",
          "name": "10.145.216.131:11281"
        },
        {
          "id": 404,
          "isParent": "false",
          "name": "10.145.216.131:11981"
        }
      ]
    },
    {
      "id": 5,
      //"open":true,
      "name": "Deamon",
      "isParent": true,
      "children": [
        {
          "id": 501,
          "isParent": "false",
          "name": "10.145.217.3:8081"
        }
      ]
    },
    {
      "id": 6,
      //"open":true,
      "name": "conf_db",
      "isParent": true,
      "children": [
        {
          "id": 601,
          "isParent": "false",
          "name": "10.145.217.3:8806"
        }
      ]
    },
    {
      "id": 7,
      //"open":true,
      "name": "Zookeeper",
      "isParent": true,
      "children": [
        {
          "id": 701,
          "isParent": "false",
          "name": "10.145.217.13:2122"
        },
        {
          "id": 702,
          "isParent": "false",
          "name": "10.145.217.14:2122"
        },
        {
          "id": 703,
          "isParent": "false",
          "name": "10.145.217.15:2122"
        },
        {
          "id": 704,
          "isParent": "false",
          "name": "10.145.217.16:2122"
        },
        {
          "id": 705,
          "isParent": "false",
          "name": "10.145.217.17:2122"
        }
      ]
    }
  ]
}
];
    $(function(){ ztreeObj=$.fn.zTree.init($("#tree"), setting, zTreeNodes);    
//第一个参数为zTree的DOM容器，第二个为zTree设置详情可见官网api,第三个为zTree的节点数据 
});
  </SCRIPT>

</HTML>

运行结果为