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中eval函数的使用方法与示例
Apr 09 Javascript
jQuery+jqmodal弹出窗口实现代码分明
Jun 14 Javascript
juqery 学习之四 筛选查找
Nov 30 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
Jun 19 Javascript
js实现动态加载脚本的方法实例汇总
Nov 02 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
Jan 18 Javascript
轻松掌握JavaScript中介者模式
Aug 26 Javascript
vue实现列表的添加点击
Dec 29 Javascript
原生JS实现N级菜单的代码
May 21 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
Oct 12 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
Jul 19 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
Mar 07 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
phpmyadmin 访问被拒绝的真实原因
2009/06/15 PHP
php Smarty 字符比较代码
2011/02/27 PHP
php 模拟 asp.net webFrom 按钮提交事件的思路及代码
2013/12/02 PHP
php使用memcoder将视频转成mp4格式的方法
2015/03/12 PHP
javascript dom 操作详解 js加强
2009/07/13 Javascript
jquery last-child 列表最后一项的样式
2010/01/22 Javascript
Extjs中ComboBoxTree实现的下拉框树效果(自写)
2013/05/28 Javascript
JS远程获取网页源代码实例
2013/09/05 Javascript
Jquery实现的一种常用高亮效果示例代码
2014/01/28 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
2016/03/25 Javascript
简单实现的JQuery文本框水印插件
2016/06/14 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
2016/10/27 Javascript
Web前端框架bootstrap实战【第一次接触使用】
2016/12/28 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
2017/12/22 Javascript
json对象及数组键值的深度大小写转换问题详解
2018/03/30 Javascript
axios如何取消重复无用的请求详解
2019/12/15 Javascript
详解javascript中var与ES6规范中let、const区别与用法
2020/01/11 Javascript
nestjs返回给前端数据格式的封装实现
2021/02/22 Javascript
python迭代器实例简析
2014/09/25 Python
Django验证码的生成与使用示例
2017/05/20 Python
python django使用haystack:全文检索的框架(实例讲解)
2017/09/27 Python
实用自动化运维Python脚本分享
2018/06/04 Python
python3.6下Numpy库下载与安装图文教程
2019/04/02 Python
Python内置random模块生成随机数的方法
2019/05/31 Python
Python操作qml对象过程详解
2019/09/26 Python
Python中logging日志的四个等级和使用
2020/11/17 Python
python音频处理的示例详解
2020/12/23 Python
CSS3实现淘宝留白的方法
2020/06/05 HTML / CSS
中国最大的团购网站:聚划算
2016/09/21 全球购物
印尼穆斯林时尚购物网站:Hijabenka
2016/12/10 全球购物
北欧最好的童装网上商店:Babyshop
2019/09/15 全球购物
销售人员中英文自荐信
2013/09/22 职场文书
公司清洁工岗位职责
2013/12/14 职场文书
大学毕业生自荐书怎么写?
2014/01/06 职场文书
家庭贫困证明书(3篇)
2014/09/15 职场文书
幼师辞职信范文
2015/02/27 职场文书