jquery ztree 使用教程

冷不防 2022-04-22 02:14 265阅读 0赞

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

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

官网地址：[zTree官网  
][zTree_]

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

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

引入示例：

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

页面内容：

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文档.

运行结果如下:

!\[在这里插入图片描述\](https://img-blog.csdn.net/20161116150539152?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)

[zTree_]: http://www.treejs.cn