这里来使用前端插件帮助我们实现功能模块表中在前端实现文件树的展示

官方学习

Ztree官方网站

Ztree的简单学习

1.Ztree是什么？

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。常常应用于PC端。zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发，尤其是树状菜单、树状数据的Web显示、权限管理等等。zTree 是开源免费的软件（MIT 许可证）。在开源的作用下，zTree 越来越完善，目前已经拥有了不少粉丝，并且今后还会推出更多的 zTree 扩展功能库，让 zTree 更加强大。

2.Ztree有什么特点

● zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载
● 采用了延迟加载技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀
● 兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器
● 支持 JSON 数据
● 支持静态和 Ajax 异步加载节点数据
● 支持任意更换皮肤 / 自定义图标（依靠css）
● 支持极其灵活的 checkbox 或 radio 选择功能
● 提供多种事件响应回调
● 灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽哟
● 在一个页面内可同时生成多个 Tree 实例
● 简单的参数配置实现灵活多变的功能

3.Ztree如何使用？

下载js和css文件，可以点击官网的码云下载
在页面中导入js和css文件，别忘记jq也要导入，这里需要导入两个js文件（这里的路径是动态服务器路径）

  <script src="${pageContext.request.contextPath}/js/plugins/ztree/jquery.ztree.core.min.js"></script>   <script src="${pageContext.request.contextPath}/js/plugins/ztree/jquery.ztree.excheck.js"></script>

在Html页面的Body里面写一个ul标签

<body>
<ul id="treeDemo" class="ztree"></ul>
</body>

在< script >标签里面写js代码渲染

<script>
var setting={
check: {              enable: true   },       view:{"showLine":true}
};
var zNodes=[           {"id":1,"name":"日常管理","open":true,            "children":[                {"id":2,"name":"我的任务"},               {"id":3,"name":"我的考勤"},                {"id":4,"name":"我的福利"}            ]},
{"id":5,"name":"权限管理",             "children":[                {"id":6,"name":"资源管理"},                 {"id":7,"name":"角色管理"},                 {"id":8,"name":"剪贴","icon":"${pageContext.request.contextPath}/img/1705.jpg"}             ]}        ];        $(function(){            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
</script>

有关var变量setting里面的属性可以去官方api文档自学，十分详细
这里实现对ul标签进行渲染成一个文件夹树的是使用这句核心代码

 $.fn.zTree.init($("#treeDemo"), setting, zNodes); 。

4.Ztree的使用案例

这里环境使用Maven项目，相关依赖都已导入
这里看一下数据的表，这是一张自连接的表，树的根节点是oa办公协同系统，从这个根节点下开始其子节点：

所以我们首先修改实体类的属性，增加一个boolean类型的open和List集合类型的children来保存其子类
我们可以使用ztree的异步设置来请求后台返回一个符合规范的json数据来让其解析渲染，所以这里代码如下

<SCRIPT type="text/javascript">var setting = {async: {enable: true,url: "${pageContext.request.contextPath}/sources/getRootSourcesByPid"},view : {addHoverDom : function(treeId, treeNode) {var aObj = $("#" + treeNode.tId + "_a");aObj.attr("href", "javascript:void(0);");aObj.attr("target","_self");if (treeNode.editNameFlag || $("#btnGroup" + treeNode.tId).length > 0)return;var s = '<span id="btnGroup'+treeNode.tId+'">';if (treeNode.level == 1) {if (treeNode.children.length == 0) {s += '<span class="button edit" οnclick="editNode('+ treeNode.id + ')" ></span>';s += '<span class="button remove" οnclick="deleteNode('+ treeNode.id + ')"></span>';}else{s += '<span class="button edit" οnclick="editNode('+ treeNode.id + ')" ></span>';}} else if (treeNode.level == 2) {s += '<span class="button edit" οnclick="editNode('+ treeNode.id + ')" ></span>';s += '<span class="button remove" οnclick="deleteNode('+ treeNode.id + ')" ></span>';}s += '</span>';aObj.append(s);},removeHoverDom : function deleteNode(treeId, treeNode) {$("#btnGroup" + treeNode.tId).remove();}}};

这里后台需要查询数据库来返回数据：

 public List<Sources> getRootSourcesByPid(int pid) {
SourcesExample sourcesExample=new SourcesExample();
SourcesExample.Criteria criteria = sourcesExample.createCriteria();
criteria.andPidEqualTo(pid);
List<Sources> sourcesList = sourcesMapper.selectByExample(sourcesExample);
for (Sources sources : sourcesList) {
List<Sources> subList=getRootSourcesByPid(sources.getId());sources.setChildren(subList);        }
return sourcesList;   }

最终效果：

JQ插件Ztree的简单使用相关推荐

jq插件处女座图片轮播
好久没写博客了,变得好懒呀,无地自容.最近一直在学sass和jq插件的写法,照猫画虎的谢了一个jq的插件,也算是第一次真正称得上插件的插件 ,废话不多说上代码 (function($) { $.fn ...
【传智播客郑州校区分享】JQ插件机制
JQ插件概述所谓的jquery插件,其实就是利用jquery语法,完成的一些工具或者模块.jquery插件是jQuery功能的扩展.可以让开发人员能更好更快速的完成某些特定的需求,只需要用很少的代码 ...
MAC下 Intellij IDEA GO语言插件安装及简单案例
MAC下 Intellij IDEA GO语言插件安装及简单案例 GoLang专有IDE GoLand : http://www.jetbrains.com/go/ 下载地址 Intellij IDE ...
前端表格插件Jquery DataTable简单汉化
前端表格插件Jquery DataTable简单汉化项目需要求,需要用到Jquery DataTable插件,功能强大,可以实现前端数据分页和页面检索,数据10000条类可以考虑.但由于国外插件,页 ...
jq插件的编写方法（自定义jq插件）
jq插件用起来很方便,给客户端的编程带来很大的好处,节省大量的开发时间我用Jq也有好长时间了,今天在一个项目中用一个插件的时候,忽然感觉这个插件有一个bug 这让我心生了自己写一个jq插件的想法下 ...
JS_自己写的JQ插件
看了<<锋利的jQuery>>之后,受益匪浅,特别是有关代码风格方面的内容. 于是想把以前写的一些JQ插件整理一下,以留备用...(里面也有一些书中的例子,我也放进去了) 其它 ...
jq插件的基础知识，以及小demo
什么是插件 ,jq插件,优点,缺点 ,未完待续- JQ插件就是用JQ代码编写的工具.就比如说我们用的模板,如EasyUi.我们只需要引入EasyUi的JS文件,然后调用它对应的方法,效果就出来了.实现 ...
html5 div拖拽插件,div拖拽插件——JQ.MoveBox.js(自制JQ插件)
有一段时间没更新博客了,都不知道忙些什么,学习也没什么进展,惭愧. 这一周空闲的时间学着自己写一下JQ插件. 以前用原生的JS做过类似拖拽div的效果,现在按原思路改做成一个JQ的小插件,当作制作JQ ...
jq插件调用常见错误处理
在调用jq插件时,有时会遇到莫名其妙的错误.特别是当使用jq老版本或者年代久远的插件时更为常见. 这时多半是由于jq的更新太快造成的. 在jq的发展中,特别是1.8.3之后的jq放弃了以前的很多写法, ...

JQ插件Ztree的简单使用