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 浏览器关闭事件
Jul 08 Javascript
如何实现修改密码时密码框显示保存到cookie的密码
Dec 10 Javascript
Javascript玩转继承(一)
May 08 Javascript
AngularJS实用开发技巧(推荐)
Jul 13 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
Oct 25 Javascript
JavaScript判断输入是否为数字类型的方法总结
Sep 28 Javascript
JS 实现获取验证码 倒计时功能
Oct 29 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
Apr 29 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
May 03 Javascript
JS实现简易留言板特效
Dec 23 Javascript
vue+高德地图实现地图搜索及点击定位操作
Sep 09 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
Nov 17 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
杏林同学录(二)
2006/10/09 PHP
最令PHP初学者们头痛的十四个问题
2007/01/15 PHP
apache mysql php 源码编译使用方法
2012/05/03 PHP
关于查看MSSQL 数据库 用户每个表 占用的空间大小
2013/06/21 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
ThinkPHP防止重复提交表单的方法实例分析
2018/05/10 PHP
jquery getScript动态加载JS方法改进详解
2012/11/15 Javascript
javascript的原生方法获取数组中的最大(最小)值
2012/12/19 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
2013/01/16 Javascript
使用js对select动态添加和删除OPTION示例代码
2013/08/12 Javascript
Jquery 的outerHeight方法使用介绍
2013/09/11 Javascript
JavaScript判断变量是否为undefined的两种写法区别
2013/12/04 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
2013/12/16 Javascript
javascript中for/in循环及使用技巧
2015/09/01 Javascript
jquery判断输入密码两次是否相等
2020/04/22 Javascript
微信小程序 教程之WXSS
2016/10/18 Javascript
JS身份证信息验证正则表达式
2017/06/12 Javascript
VUE2实现事件驱动弹窗示例
2017/10/21 Javascript
clipboard.js在移动端复制失败的解决方法
2018/06/13 Javascript
深入浅出理解JavaScript高级定时器原理与用法
2018/08/02 Javascript
脚手架vue-cli工程webpack的基本用法详解
2018/09/29 Javascript
Vue自定义属性实例分析
2019/02/23 Javascript
layer.alert自定义关闭回调事件的方法
2019/09/27 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
2020/01/12 Javascript
详解Python中的__getitem__方法与slice对象的切片操作
2016/06/27 Python
python中partial()基础用法说明
2018/12/30 Python
Python合并2个字典成1个新字典的方法(9种)
2019/12/19 Python
python中time.ctime()实例用法
2021/02/03 Python
HTML5的标签的代码的简单介绍 HTML5标签的简介
2012/05/28 HTML / CSS
介绍一下Ruby中的对象,属性和方法
2012/07/11 面试题
社区活动总结报告
2014/05/05 职场文书
个人诉讼委托书范本
2014/10/17 职场文书
五年级学生评语大全
2014/12/26 职场文书
幼儿园教师培训心得体会
2016/01/21 职场文书
nginx配置之并发频次限制
2022/04/18 Servers
如何利用python实现列表嵌套字典取值
2022/06/10 Python