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

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办公协同系统，从这个根节点下开始其子节点：

jquery zTree 异步加载 jquery ztree用法_数据

  • 所以我们首先修改实体类的属性，增加一个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;   
 }