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 相关文章推荐
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
Jul 21 Javascript
jQuery EasyUI API 中文文档 可调整尺寸
Sep 29 Javascript
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
Jan 15 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
Mar 08 Javascript
AngularJS 遇到的小坑与技巧小结
Jun 07 Javascript
jQuery EasyUI Tab 选项卡问题小结
Aug 16 Javascript
ajax级联菜单实现方法实例分析
Nov 28 Javascript
js实现产品缩略图效果
Mar 10 Javascript
Bootstrap提示框效果的实例代码
Jul 12 Javascript
总结js函数相关知识点
Feb 27 Javascript
vue 兄弟组件的信息传递的方法实例详解
Aug 30 Javascript
vue循环数组改变点击文字的颜色
Oct 14 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
用PHP生成自己的LOG文件
2006/10/09 PHP
一个简单的PHP投票程序源码
2007/03/11 PHP
PHP的5个安全措施小结
2012/07/17 PHP
PHP使用ffmpeg给视频增加字幕显示的方法
2015/03/12 PHP
PHP实现基于mysqli的Model基类完整实例
2016/04/08 PHP
PHP convert_cyr_string()函数讲解
2019/02/13 PHP
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
2009/12/07 Javascript
JavaScript 获取当前时间戳的代码
2010/08/05 Javascript
jQuery学习笔记之DOM对象和jQuery对象
2010/12/22 Javascript
JQuery与JSon实现的无刷新分页代码
2011/09/13 Javascript
简单讲解AngularJS的Routing路由的定义与使用
2016/03/05 Javascript
基于JS实现省市联动效果代码分享
2016/06/06 Javascript
js css实现垂直方向自适应的三角提示菜单
2016/06/26 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
2016/07/01 Javascript
jquery中绑定事件的异同
2017/02/28 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
2017/04/21 Javascript
JS实现验证码倒计时的注册页面
2018/01/02 Javascript
JavaScript防止全局变量污染的方法总结
2018/08/02 Javascript
JavaScript中call和apply方法的区别实例分析
2018/08/03 Javascript
JS实现扫码枪扫描二维码功能
2020/01/03 Javascript
Vue程序化的事件监听器(实例方案详解)
2020/01/07 Javascript
js实现简单的倒计时
2021/01/28 Javascript
tornado捕获和处理404错误的方法
2014/02/26 Python
Python urls.py的三种配置写法实例详解
2017/04/28 Python
在PyCharm中三步完成PyPy解释器的配置的方法
2018/10/29 Python
python消除序列的重复值并保持顺序不变的实例
2018/11/08 Python
对python判断ip是否可达的实例详解
2019/01/31 Python
python opencv捕获摄像头并显示内容的实现
2019/07/11 Python
Python制作词云图代码实例
2019/09/09 Python
html5唤起app的方法
2017/11/30 HTML / CSS
英国最大的电子产品和家电零售企业:Currys PC World
2016/09/24 全球购物
美国领先的家居装饰和礼品商店:Kirkland’s
2017/01/30 全球购物
波兰最大的度假胜地和城市公寓租赁运营商:Sun & Snow
2018/10/18 全球购物
2016应届毕业生实习评语
2015/12/01 职场文书
幼师自荐信范文(2016推荐篇)
2016/01/28 职场文书
教你如何用Python实现人脸识别(含源代码)
2021/06/23 Python