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 相关文章推荐
学习面向对象之面向对象的基本概念:对象和其他基本要素
Nov 30 Javascript
在JavaScript中typeof的用途介绍
Apr 11 Javascript
5款JavaScript代码压缩工具推荐
Jul 07 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
Jan 10 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
Aug 23 Javascript
js中通过getElementsByName访问name集合对象的方法
Oct 31 Javascript
three.js绘制地球、飞机与轨迹的效果示例
Feb 28 Javascript
深入理解vue中的$set
Jun 01 Javascript
vue项目实现github在线预览功能
Jun 20 Javascript
JavaScript原型对象原理与应用分析
Dec 27 Javascript
在Create React App中使用CSS Modules的方法示例
Jan 15 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
Feb 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
从康盛产品(discuz)提取出来的模板类
2011/06/28 PHP
discuz免激活同步登入代码修改方法(discuz同步登录)
2013/12/24 PHP
PHP使用JSON和将json还原成数组
2015/02/12 PHP
php实现模拟post请求用法实例
2015/07/11 PHP
PHP赋值的内部是如何跑的详解
2019/01/13 PHP
onsubmit阻止form表单提交与onclick的相关操作
2010/09/03 Javascript
JS与C#编码解码
2013/12/03 Javascript
angularjs实现与服务器交互分享
2014/06/24 Javascript
一个简单的动态加载js和css的jquery代码
2014/09/01 Javascript
JS实现Fisheye效果动感放大菜单代码
2015/10/21 Javascript
jquery mobile界面数据刷新的实现方法
2016/05/28 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
2016/11/07 Javascript
canvas雪花效果核心代码分享
2017/02/19 Javascript
详解node如何让一个端口同时支持https与http
2017/07/04 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
2018/10/26 Javascript
详解JS实现简单的时分秒倒计时代码
2019/04/25 Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
2020/02/01 Javascript
python使用wxPython打开并播放wav文件的方法
2015/04/24 Python
使用C++扩展Python的功能详解
2018/01/12 Python
python爬虫之urllib3的使用示例
2018/07/09 Python
Numpy将二维数组添加到空数组的实现
2019/12/05 Python
django序列化serializers过程解析
2019/12/14 Python
使用Puppeteer爬取微信文章的实现
2020/02/11 Python
Python序列化pickle模块使用详解
2020/03/05 Python
英国羊皮鞋类领先品牌:Just Sheepskin
2019/12/12 全球购物
SQL Server的固定数据库角色都有哪些?对应的服务器权限有哪些?
2013/05/18 面试题
.NET概念性的面试题
2012/02/29 面试题
审计工作个人的自我评价
2013/12/25 职场文书
杠杆的科学教学反思
2014/01/10 职场文书
副职竞争上岗演讲稿
2014/05/12 职场文书
青年文明号口号
2014/06/17 职场文书
辞旧迎新演讲稿
2014/09/15 职场文书
《纸船和风筝》教学反思
2016/02/18 职场文书
Python快速优雅的批量修改Word文档样式
2021/05/20 Python
简单介绍Python的第三方库yaml
2021/06/18 Python
Vue2.0搭建脚手架
2022/03/13 Vue.js