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 相关文章推荐
jquery 插件学习(一)
Aug 06 Javascript
js获取当前日期代码适用于网页头部
Jun 27 Javascript
javascript常见数据验证插件大全
Aug 03 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
Jan 08 Javascript
js自制图片放大镜功能
Jan 24 Javascript
javascript表达式和运算符详解
Feb 07 Javascript
jQuery插件echarts去掉垂直网格线用法示例
Mar 03 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
Mar 28 Javascript
原生javascript实现文件异步上传的实例讲解
Oct 26 Javascript
浅析Vue自定义组件的v-model
Nov 26 Javascript
玩转Koa之koa-router原理解析
Dec 29 Javascript
vue spa应用中的路由缓存问题与解决方案
May 31 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
NOD32 v2.70.32 简体中文封装版 提供下载了
2007/02/27 PHP
PHP实现HTML页面静态化的方法
2015/11/04 PHP
Laravel框架集成UEditor编辑器的方法图文与实例详解
2019/04/17 PHP
JavaScript 异步调用框架 (Part 1 - 问题 &amp; 场景)
2009/08/03 Javascript
修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
2009/10/11 Javascript
JavaScript 学习技巧
2010/02/17 Javascript
js的表单操作 简单计算器
2011/12/29 Javascript
javascript的内存管理详解
2013/08/07 Javascript
Node.js实现简单聊天服务器
2014/06/20 Javascript
js 加密压缩出现bug解决方案
2014/11/25 Javascript
原生javascript实现简单的datagrid数据表格
2015/01/02 Javascript
Javascript无参数和有参数类继承问题解决方法
2015/03/02 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
2015/10/22 Javascript
微信小程序之数据缓存的实例详解
2017/09/29 Javascript
Angular 容器部署的方法
2018/04/17 Javascript
vue微信分享到朋友圈 vue微信发送给好友
2018/11/28 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
2019/02/27 Javascript
JavaScript 反射和属性赋值实例解析
2019/10/28 Javascript
webpack5 联邦模块介绍详解
2020/07/08 Javascript
Python爬虫之模拟知乎登录的方法教程
2017/05/25 Python
Python Pandas中根据列的值选取多行数据
2019/07/08 Python
python实现获取单向链表倒数第k个结点的值示例
2019/10/24 Python
基于Django OneToOneField和ForeignKey的区别详解
2020/03/30 Python
社区版pycharm创建django项目的方法(pycharm的newproject左侧没有项目选项)
2020/09/23 Python
Sperry澳大利亚官网:源自美国帆船鞋创始品牌
2019/07/29 全球购物
应届专科生个人的自我评价
2014/01/05 职场文书
上班离岗检讨书
2014/01/27 职场文书
教师民族团结演讲稿
2014/08/27 职场文书
交通事故和解协议书
2014/09/25 职场文书
分居协议书范本(律师见证版)
2014/11/26 职场文书
水知道答案观后感
2015/06/08 职场文书
婚庆答谢词大全
2015/09/29 职场文书
Python内置数据结构列表与元组示例详解
2021/08/04 Python
Ajax实现三级联动效果
2021/10/05 Javascript
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS
numpy array找出符合条件的数并赋值的示例代码
2022/06/01 Python