zTree树形插件异步加载方法详解


Posted in Javascript onJune 14, 2017

本文实例为大家分享了zTree树形插件异步加载,Struts2框架,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>异步加载</title>
<link rel="stylesheet"
  href="${pageContext.request.contextPath}/zTree_v3-master/css/demo.css">
<link rel="stylesheet"
  href="${pageContext.request.contextPath}/zTree_v3-master/css/zTreeStyle/zTreeStyle.css">
<script type="text/javascript"
  src="${pageContext.request.contextPath}/jquery-2.1.1.min.js"></script>
<script type="text/javascript"
  src="${pageContext.request.contextPath}/zTree_v3-master/js/jquery.ztree.core.min.js"></script>
<script type="text/javascript">
  var setting = {
    async : {
      enable : true,
      url : "${pageContext.request.contextPath}/ztreeAction!getMenusById.jhtml",
      autoParam : [ "id" ],
    //dataFilter : filter
    },
    data : {
      key : {
        url : "xUrl"
      },
      simpleData : {
        enable : true,
        pIdKey : "pid"
      }
    },

  };
  $(document).ready(function() {
    $.fn.zTree.init($("#treeDemo"), setting);
  });
</script>



</head>
<body>
  <div class="ztree"
    style="width: 20%; height: 500px; padding-top: 10px; float: left; border: 1px solid #FF0000;">
    <ul id="treeDemo"></ul>
  </div>

</body>
</html>

上面呢,是jsp页面的代码,因为是纯插件测试,可以直接复制过去使用的,

action层代码,可以直接复制使用

public void getMenusById(){
    List<Ztree> list=null;
    try {
      list=ztreeService.getMenusById(ztree);
    } catch (Exception e) {
      e.printStackTrace();
    }
    super.writeJson(list);
}
public List<Ztree> getMenusById(Ztree ztree) throws Exception;
//接口
//service代码,几本都可以复制使用


package com.jk.service.impl;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

import com.jk.dao.ZtreeDao;
import com.jk.model.Ztree;
import com.jk.service.ZtreeService;
@Repository("ztreeService")
public class ZtreeServiceImpl implements ZtreeService {
  
  @Autowired
  private ZtreeDao ztreeDao;

  @Override
  public List queryList(Ztree ztree) throws Exception {
    String hql=" from Ztree where 1=1 ";
    Map<String, Object> params = new HashMap<String, Object>();
//传的对象是否为空,拼接sql+id
      if(ztree.getId()!=null){
        hql+=" and id = :id ";
        params.put("id",ztree.getId());
      }
    
    
    return ztreeDao.queryList(hql, params);
  }
  //递归查询
  @Override
  public List<Ztree> getMenusById(Ztree ztree) throws Exception {
    String hql=" from Ztree where 1=1 ";
    Map<String,Object> params=new HashMap<String,Object>();
    if(ztree.getId()==null||ztree.getId().equals("")){
      hql+=" and pid is null ";
    }else{
      hql+= " and pid = :id ";
      params.put("id",ztree.getId());
    }
    List<Ztree> queryZtree = ztreeDao.queryList(hql, params);
    List<Ztree> list=new ArrayList<Ztree>();
    for(Ztree ztree2:queryZtree){
      if(queryBoolean(ztree2)){
        ztree2.setIsParent("true");
      }
      list.add(ztree2);
    }
    return list;
  }
  //熟悉递归的朋友应该可以看懂,我就不解释了,我也聊不清楚这个递归,不误导了,代码在这,可以复制进去直接运行,
  public boolean queryBoolean(Ztree ztree) throws Exception{
    boolean flag=false;
    String hql= " from Ztree where pid = :id ";
    
    Map<String,Object> params=new HashMap<String,Object>();
    params.put("id", ztree.getId());
    List<Ztree> queryZtree = ztreeDao.queryList(hql, params);
    if(queryZtree!=null&&queryZtree.size()>0){
      flag=true;
    }
    return flag;
  }

  
}

dao层就不用写了吧,只是一个查询,下面我把ztree的表字段附上

zTree树形插件异步加载方法详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript alert消息换行的方法
Aug 07 Javascript
js实现图片和链接文字同步切换特效的方法
Feb 20 Javascript
JavaScript的this关键字的理解
Jun 18 Javascript
BootStrap按钮标签及基本样式
Nov 23 Javascript
微信小程序利用co处理异步流程的方法教程
May 20 Javascript
详解Vue 方法与事件处理器
Jun 20 Javascript
jQuery常用选择器详解
Jul 17 jQuery
webpack学习笔记之代码分割和按需加载的实例详解
Jul 20 Javascript
js移动端图片压缩上传功能
Aug 18 Javascript
vue2导航根据路由传值,而改变导航内容的实例
Nov 10 Javascript
JavaScript如何使用插值实现图像渐变
Jun 28 Javascript
原生JS实现分页
Apr 19 Javascript
详解Angular2响应式表单
Jun 14 #Javascript
vue过渡和animate.css结合使用详解
Jun 14 #Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
Jun 14 #Javascript
详解Vue.use自定义自己的全局组件
Jun 14 #Javascript
详解vue-router2.0动态路由获取参数
Jun 14 #Javascript
微信小程序动态添加分享数据
Jun 14 #Javascript
vue实现百度搜索下拉提示功能实例
Jun 14 #Javascript
You might like
sourcesafe管理phpproj文件的补充说明(downmoon)
2009/04/11 PHP
浅析php中jsonp的跨域实例
2013/06/21 PHP
PHP错误提示的关闭方法详解
2013/06/23 PHP
解析php中eclipse 用空格替换 tab键
2013/06/24 PHP
PHP swfupload图片上传的实例代码
2013/09/30 PHP
php中__destruct与register_shutdown_function执行的先后顺序问题
2014/10/17 PHP
PHP实现恶意DDOS攻击避免带宽占用问题方法
2015/05/27 PHP
php写入文件不覆盖的实例讲解
2019/09/17 PHP
PHP安全之register_globals的on和off的区别
2020/07/23 PHP
用js模拟JQuery的show与hide动画函数代码
2010/09/20 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
2013/06/21 Javascript
JS正则表达式获取分组内容的方法详解
2013/11/15 Javascript
JavaScript三元运算符的多种使用技巧
2015/04/16 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
2016/08/03 Javascript
老生常谈JQuery data方法的使用
2016/09/09 Javascript
零基础轻松学JavaScript闭包
2016/12/30 Javascript
原生js实现对Ajax的封装(仿jquery)
2017/01/22 Javascript
微信小程序中使用javascript 回调函数
2017/05/11 Javascript
JS实现简单表格排序操作示例
2017/10/07 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
2018/10/12 Javascript
javascript异步处理与Jquery deferred对象用法总结
2019/06/04 jQuery
[01:23:24]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第三场 2月7日
2021/03/11 DOTA
python复制与引用用法分析
2015/04/08 Python
理解python正则表达式
2016/01/15 Python
Python使用装饰器模拟用户登陆验证功能示例
2018/08/24 Python
pytorch实现focal loss的两种方式小结
2020/01/02 Python
Python计算信息熵实例
2020/06/18 Python
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
西安夏日科技有限公司Java笔试题
2013/01/11 面试题
幼教个人求职信范文
2013/12/02 职场文书
医生个人年终总结
2015/02/28 职场文书
小学国庆节活动总结
2015/03/23 职场文书
2016年教师节慰问信
2015/12/01 职场文书
小程序教您怎样你零成本推广获取数万用户的方法
2019/07/30 职场文书
用Python爬取各大高校并可视化帮弟弟选大学,弟弟直呼牛X
2021/06/11 Python
设置IIS Express并发数
2022/07/07 Servers