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

来源：互联网发布：广州cnc编程招聘编辑：程序博客网时间：2024/05/16 19:30

最近在做宿舍管理系统小型项目，在进行用户角色设定、角色资源（菜单）设定的时候，需要使用树行结构进行动态设置。使用到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文档.

运行结果如下:

0 0