ztree的简单使用

比眉伴天荒 2022-03-26 12:15 493阅读 0赞

ztree是一个不错的树形结构插件，有许多功能，相信许多人刚开始用对要求的数据并不太了解(我搞了半天才弄懂。。)，下面直接上代码!  
下载ztree:官网http://www.treejs.cn/v3/api.php 直接下载解压至项目即可  
需要的引用(引用路径请根据自己文件所在的位置进行更改)：  
首先添加对css的引用

添加对jq的引用 和ztree的js文件

引用搞定，接下来就是基本的配置

<table id="user_tree" data-toolbar="#toolbar"></table>
    <script type="text/javascript">
    var zTree;
    	var setting = {
    		view : {
    			dblClickExpand : false,//双击节点时，是否自动展开父节点的标识
    			showLine : true,//是否显示节点之间的连线
    			fontCss : {
    				'color' : 'black',
    				'font-weight' : 'bold'
    			},//字体样式函数
    			selectedMulti : false
    		//设置是否允许同时选中多个节点
    		},
    		check : {
    			//chkboxType: { "Y": "ps", "N": "ps" },
    			chkStyle : "checkbox",//复选框类型
    			enable : true
    		//每个节点上是否显示 CheckBox 
    		},
    		data : {
    			simpleData : {//简单数据模式
    				enable : true,
    				idKey : "id",//后台封装的子节点的属性
    				pIdKey : "pid",//后台封装的父节点的属性
    				rootPId : ""//父节点的修正
    			},key :{
    				name :"name"//节点显示的名称
    			}
    		},
    		callback : {
    			beforeClick : function(treeId, treeNode) {
    				zTree = $.fn.zTree.getZTreeObj("user_tree");
    				if (treeNode.isParent) {
    					zTree.expandNode(treeNode);//如果是父节点，则展开该节点
    					//alert("treeId自动编号：" + treeNode.tId + ", 节点id是：" + treeNode.id + ", 节点文本是：" + treeNode.name);
    				} else {
    					zTree.checkNode(treeNode, !treeNode.checked, true, true);//单击勾选，再次单击取消勾选
    				}
    			}
    		}
    	};
    	/**
    	 * 页面初始化
    	 */
    	$(document).ready(function(){
    	  onLoadZTree();
    	});
    
    	/**
    	 * 加载树形结构数据
    	 */
    	function onLoadZTree(){
    	  var treeNodes;
    	  $.ajax({
    	    async:false,//是否异步
    	    cache:false,//是否使用缓存
    	    type:'POST',//请求方式：post
    	    dataType:'json',//数据传输格式：json
    	    url:"show",//请求的action路径
    	    error:function(){
    	      //请求失败处理函数
    	      alert('亲，请求失败！');
    	    },
    	    success:function(data){
    	      //console.log(data);
    	       //后台数据格式
    	   var treeNodes = [
    	    {"id":1, "pId":0, "name":"test1"},
    	    {"id":11, "pId":1, "name":"test11"},
    	    {"id":12, "pId":1, "name":"test12"},
    	    {"id":111, "pId":11, "name":"test111"}
    		];
    	      //请求成功后处理函数
    	      treeNodes = data;//把后台封装好的简单Json格式赋给treeNodes
    	    }
    	  });
    	  var t = $("#user_tree");
    	  //初始化ztree树
    	  t = $.fn.zTree.init(t, setting, treeNodes);
    	}
    </script>

页面ztree显示成功，搞定