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下IE与FF兼容函数收集
Sep 17 Javascript
JS 页面自动加载函数(兼容多浏览器)
May 18 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
Oct 11 Javascript
javascript表格的渲染组件
Jul 03 Javascript
jQuery图片轮播滚动切换代码分享
Apr 20 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
Mar 10 Javascript
如何提高数据访问速度
Dec 26 Javascript
微信小程序 页面跳转和数据传递实例详解
Jan 19 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
一篇文章介绍redux、react-redux、redux-saga总结
May 23 Javascript
简单了解小程序+node梳理登陆流程
Jun 24 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
Sep 02 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获取随机数组列表的方法
2014/11/13 PHP
php实现XSS安全过滤的方法
2015/07/29 PHP
laravel学习笔记之模型事件的几种用法示例
2017/08/15 PHP
javascript不同页面传值的改进版
2008/09/30 Javascript
javascript中直接写php代码的方法
2013/07/31 Javascript
javascript利用apply和arguments复用方法
2013/11/25 Javascript
JavaScript打印网页指定区域的例子
2014/05/03 Javascript
关于jQuery判断元素是否存在的问题示例探讨
2014/07/21 Javascript
jQuery实现简单的列表式导航菜单效果代码
2015/08/31 Javascript
js代码实现点击按钮出现60秒倒计时
2021/01/28 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
2016/05/17 Javascript
移动端使用localResizeIMG4压缩图片
2017/04/22 Javascript
微信小程序radio组件使用详解
2018/01/31 Javascript
JS中移除非数字最多保留一位小数
2018/05/09 Javascript
微信小程序自定义对话框弹出和隐藏动画
2018/07/19 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
2019/01/18 jQuery
vue 实现cli3.0中使用proxy进行代理转发
2019/10/30 Javascript
Vue快速实现通用表单验证的示例代码
2020/01/09 Javascript
JavaScript前后端JSON使用方法教程
2020/11/23 Javascript
python+django快速实现文件上传
2016/10/24 Python
Python2.X/Python3.X中urllib库区别讲解
2017/12/19 Python
Python调用百度根据经纬度查询地址的示例代码
2019/07/07 Python
Django中自定义admin Xadmin的实现代码
2019/08/09 Python
Pytorch 中的optimizer使用说明
2021/03/03 Python
美国最大最全的亚洲购物网站:美国亚米网(Yamibuy)
2020/05/05 全球购物
如何进行Linux分区优化
2013/02/12 面试题
幼教简历自我评价
2014/01/28 职场文书
大三学习计划书范文
2014/05/02 职场文书
写字楼租赁意向书
2014/07/30 职场文书
学生实习证明范文
2014/09/28 职场文书
民政局副局长民主生活会个人整改措施
2014/10/04 职场文书
董事长新年致辞
2015/07/29 职场文书
教师岗位说明书
2015/09/30 职场文书
医德医风学习心得体会
2016/01/25 职场文书
ztree+ajax实现文件树下载功能
2021/05/18 Javascript
Python中OpenCV实现查找轮廓的实例
2021/06/08 Python