jquery树形插件zTree使用示例--入门

最新推荐文章于 2024-07-16 10:23:26 发布

yaoyy09

最新推荐文章于 2024-07-16 10:23:26 发布

阅读量1w

点赞数 3

本文链接：https://blog.csdn.net/yaoyy09/article/details/53186536

版权

最近在做宿舍管理系统小型项目，在进行用户角色设定、角色资源（菜单）设定的时候，需要使用树行结构进行动态设置。使用到jquery树形结构插件zTree。整理一下入门级的使用zTree的方法。

1、通过官网下载demo或者下载zTree相关的插件；

官网地址：zTree官网

2、页面文件引入需要的zTree插件：

主要引入的对象有：zTreeStyle.css、 jquery-1.4.4.min.js、 jquery.ztree.all.js。

引入示例：

  <link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">
  <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
  <script type="text/javascript" src="jquery.ztree.all.js"></script>

3、编写js脚本，设定树形结构的一些属性值以及加载文件位置：

页面内容：

<BODY>
<div>
   <ul id="treeDemo" class="ztree"></ul>
</div>
</BODY>

js脚本文件：

 <SCRIPT LANGUAGE="JavaScript">
    //js方法
	function test(event, treeId, treeNode){
		 alert(treeNode.tId + ", " + treeNode.name + "," + treeNode.checked);
	}
	
   // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
   var setting = {
	check:{
		enable: true,
		autoCheckTrigger:true,
		chkStyle:"checkbox"
	},
	callback:{
		onCheck:test
	}
   };
   // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
   var zNodes = [
   {name:"test1", open:true,"checked":"true", children:[
      {name:"test1_1","checked":"true"}, {name:"test1_2"}]},
   {name:"test2", open:true, children:[
      {name:"test2_1"}, {name:"test2_2"}]}
   ];
   $(document).ready(function(){
     //页面加载成功后,开始加载树形结构
   $.fn.zTree.init($("#treeDemo"), setting, zNodes);
   });
  </SCRIPT>

至此,一个完整的树形结构完成,如果需要对树进行其他操作可以参考官网API文档.

运行结果如下:

yaoyy09

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
jquery树形插件zTree使用示例--入门

最近在做宿舍管理系统小型项目，在进行用户角色设定、角色资源（菜单）设定的时候，需要使用树行结构进行动态设置。使用到jquery树形结构插件zTree。整理一下入门级的使用zTree的方法。1、通过官网下载demo或者下载zTree相关的插件；官网地址：zTree官网 2、页面文件引入需要的zTree插件：主要引入的对象有：zTreeStyle.css、 jquery-1.4.4
复制链接

扫一扫