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 防止刷新,后退,关闭
Aug 07 Javascript
jQuery ajax dataType值为text json探索分享
Sep 23 Javascript
Jquery搜索父元素操作方法
Feb 10 Javascript
JavaScript中的toLocaleDateString()方法使用简介
Jun 12 Javascript
理解javascript中DOM事件
Dec 25 Javascript
CSS3 3D 技术手把手教你玩转
Sep 02 Javascript
Bootstrap警告框(Alert)插件使用方法
Mar 21 Javascript
AngularJS 限定$scope的范围实例详解
Jun 23 Javascript
Vue侧滑菜单组件——DrawerLayout
Dec 18 Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
Jul 01 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
May 10 Javascript
使用apifm-wxapi模块中的问题及解决方法
Aug 05 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 字符串正则替换函数preg_replace使用说明
2011/07/15 PHP
php实现singleton()单例模式实例
2014/11/06 PHP
PHP框架Laravel的小技巧两则
2015/02/10 PHP
php微信公众平台开发之获取用户基本信息
2015/08/17 PHP
理清PHP在Linxu下执行时的文件权限方法
2017/06/07 PHP
PHP多进程编程之僵尸进程问题的理解
2017/10/15 PHP
jquery tools 系列 scrollable(2)
2009/09/06 Javascript
Mootools 1.2教程 Tooltips
2009/09/15 Javascript
flash 得到自身url参数的代码
2009/11/15 Javascript
jquery load()在firefox(火狐)下显示不正常的解决方法
2011/04/05 Javascript
通过js简单实现将一个文本内容转译成加密文本
2013/10/22 Javascript
用js的document.write输出的广告无阻塞加载的方法
2014/06/05 Javascript
Javascript实现获取窗口的大小和位置代码分享
2014/12/04 Javascript
js实现简单的左右两边固定广告效果实例
2015/04/10 Javascript
微信小程序实现自定义modal弹窗封装的方法
2018/06/15 Javascript
vue.js高德地图实现热点图代码实例
2019/04/18 Javascript
Vue中rem与postcss-pxtorem的应用详解
2019/11/20 Javascript
[01:24:16]2018DOTA2亚洲邀请赛 4.6 全明星赛
2018/04/10 DOTA
python 文件和路径操作函数小结
2009/11/23 Python
在Python的Django框架中实现Hacker News的一些功能
2015/04/17 Python
Python中的列表生成式与生成器学习教程
2016/03/13 Python
快速排序的算法思想及Python版快速排序的实现示例
2016/07/02 Python
python 列表降维的实例讲解
2018/06/28 Python
详解python编译器和解释器的区别
2019/06/24 Python
如何分离django中的媒体、静态文件和网页
2019/11/12 Python
对Tensorflow中Device实例的生成和管理详解
2020/02/04 Python
Python GUI编程学习笔记之tkinter事件绑定操作详解
2020/03/30 Python
Python配置pip国内镜像源的实现
2020/08/20 Python
怎样有效的进行自我评价
2013/10/06 职场文书
大专毕业生自我鉴定
2013/11/21 职场文书
事业单位接收函
2014/01/10 职场文书
学校运动会广播稿100条
2014/09/14 职场文书
2014村党支部书记党建工作汇报材料
2014/11/02 职场文书
优秀党员推荐材料
2014/12/18 职场文书
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers
详细聊一聊mysql的树形结构存储以及查询
2022/04/05 MySQL