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 Function对象扩展之延时执行函数
Jul 06 Javascript
javascript事件冒泡详解和捕获、阻止方法
Apr 12 Javascript
js实现表单Radio切换效果的方法
Aug 17 Javascript
jQuery的ajax下载blob文件
Jul 21 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
Aug 18 Javascript
jquery pagination分页插件使用详解(后台struts2)
Jan 22 Javascript
Angular2下使用pdf插件的方法详解
Apr 29 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
May 23 Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
微信小程序实现元素渐入渐出动画效果封装方法
May 18 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
Mar 10 Javascript
js+h5 canvas实现图片验证码
Oct 11 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验证是否是md5编码的简单代码
2014/04/01 PHP
PHP学习笔记之字符串编码的转换和判断
2014/05/22 PHP
Zend Framework动作助手(Zend_Controller_Action_Helper)用法详解
2016/03/05 PHP
PHP请求远程地址设置超时时间的解决方法
2016/10/29 PHP
锋利的jQuery 第三章章节总结的例子
2010/03/23 Javascript
漂亮的jquery提示效果(仿腾讯弹出层)
2013/02/05 Javascript
Javascript中valueOf与toString区别浅析
2013/03/19 Javascript
jQuery实现的多屏图像图层切换效果实例
2015/05/07 Javascript
JavaScript简单实现弹出拖拽窗口(一)
2016/06/17 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
2016/10/10 Javascript
Node.js连接postgreSQL并进行数据操作
2016/12/18 Javascript
javascript九宫格图片随机打乱位置的实现方法
2017/03/15 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
Vue.Draggable实现拖拽效果
2020/07/29 Javascript
JS图片预加载插件详解
2017/06/21 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
2018/04/13 Javascript
使用React手写一个对话框或模态框的方法示例
2019/04/25 Javascript
JS正则表达式封装与使用操作示例
2019/05/15 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
2020/11/12 Javascript
python代码 if not x: 和 if x is not None: 和 if not x is None:使用介绍
2016/09/21 Python
pandas series序列转化为星期几的实例
2018/04/11 Python
python实现一个简单的ping工具方法
2019/01/31 Python
windows下numpy下载与安装图文教程
2019/04/02 Python
Born鞋子官网:Born Shoes
2017/04/06 全球购物
意大利在线药房:shop-farmacia.it
2019/03/12 全球购物
玩具公司的创业计划书
2013/12/31 职场文书
客户表扬信范文
2014/01/10 职场文书
小学生评语大全
2014/04/18 职场文书
小学师德标兵先进事迹材料
2014/05/25 职场文书
企业管理标语
2014/06/10 职场文书
正规欠条模板
2015/07/03 职场文书
2015年六年级班主任工作总结
2015/10/15 职场文书
提档介绍信范文
2015/10/22 职场文书
淡雅古典唯美少女娇媚宁静迷人写真
2022/03/21 杂记
MySQL限制查询和数据排序介绍
2022/03/25 MySQL
MySQL存储过程及语法详解
2022/08/05 MySQL