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 CSS选择器笔记
Mar 29 Javascript
jQuery中next方法用法实例
Apr 24 Javascript
jquery实现清新实用的网页菜单效果
Aug 28 Javascript
自己动手写的jquery分页控件(非常简单实用)
Oct 28 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
Jun 13 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
Jan 16 Javascript
vue2使用keep-alive缓存多层列表页的方法
Sep 21 Javascript
JS事件流与事件处理程序实例分析
Aug 16 Javascript
JS document对象简单用法完整示例
Jan 14 Javascript
js原生map实现的方法总结
Jan 19 Javascript
JS+css3实现幻灯片轮播图
Aug 14 Javascript
原生js实现俄罗斯方块
Oct 20 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
Mysql和网页显示乱码解决方法集锦
2008/03/27 PHP
PHP程序开发范例学习之表单 获取文本框的值
2011/08/08 PHP
php判断用户是否关注微信公众号
2016/07/22 PHP
ThinkPHP和UCenter接口冲突的解决方法
2016/07/25 PHP
php rmdir使用递归函数删除非空目录实例详解
2016/10/20 PHP
提高 DHTML 页面性能
2006/12/25 Javascript
Javascript 遮罩层和加载效果代码
2013/08/01 Javascript
jquery实现搜索框常见效果的方法
2015/01/22 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
2015/09/02 Javascript
jquery点击缩略图切换视频播放特效代码分享
2015/09/15 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
jQuery模拟实现天猫购物车动画效果实例代码
2017/05/25 jQuery
vue-resouce设置请求头的三种方法
2017/09/12 Javascript
基于jquery实现左右上下移动效果
2018/05/02 jQuery
vue+iview 实现可编辑表格的示例代码
2018/10/31 Javascript
浅谈Vue数据响应
2018/11/05 Javascript
JS使用数组实现的队列功能示例
2019/03/04 Javascript
vue中created和mounted的区别浅析
2019/08/13 Javascript
Python实现多行注释的另类方法
2014/08/22 Python
Python的动态重新封装的教程
2015/04/11 Python
Python中操作文件之write()方法的使用教程
2015/05/25 Python
python实现斐波那契数列的方法示例
2017/01/12 Python
解决python3 urllib 链接中有中文的问题
2018/07/16 Python
Python爬虫小技巧之伪造随机的User-Agent
2018/09/13 Python
python 根据网易云歌曲的ID 直接下载歌曲的实例
2019/08/24 Python
python+django+rest框架配置创建方法
2019/08/31 Python
pip install python 快速安装模块的教程图解
2019/10/08 Python
Python sorted排序方法如何实现
2020/03/31 Python
python json.dumps中文乱码问题解决
2020/04/01 Python
基于Python模拟浏览器发送http请求
2020/11/06 Python
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
2021/01/27 HTML / CSS
机械系大学毕业生推荐信
2013/11/27 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
工程部文员岗位职责
2015/02/04 职场文书
Mysql数据库事务的脏读幻读及不可重复读详解
2022/05/30 MySQL
怎么禁用Win11输入法 最新Win11输入法关闭教程
2022/08/05 数码科技