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 相关文章推荐
js 图片随机不定向浮动的实现代码
Jul 02 Javascript
javascript获得网页窗口实际大小的示例代码
Sep 21 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
Jan 11 Javascript
可编辑下拉框的2种实现方式
Jun 13 Javascript
node.js中的fs.chmodSync方法使用说明
Dec 18 Javascript
简单谈谈javascript Date类型
Sep 06 Javascript
高效的jquery数字滚动特效
Dec 17 Javascript
JS作用域链详解
Jun 26 Javascript
微信小程序基于Taro的分享图片功能实践详解
Jul 12 Javascript
如何使用webpack打包一个库library的方法步骤
Dec 18 Javascript
JavaScript实现轮播图片完整代码
Mar 07 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
Aug 08 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
短波问题解答
2021/02/28 无线电
过滤掉PHP数组中的重复值的实现代码
2011/07/17 PHP
php代码运行时间查看类代码分享
2011/08/06 PHP
PHP中array_map与array_column之间的关系分析
2014/08/19 PHP
php中file_get_content 和curl以及fopen 效率分析
2014/09/19 PHP
在WordPress的后台中添加顶级菜单和子菜单的函数详解
2016/01/11 PHP
php中通过eval实现字符串格式的计算公式
2017/03/18 PHP
JS+XML 省份和城市之间的联动实现代码
2009/10/14 Javascript
jQuery代码优化 选择符篇
2011/11/01 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
2012/12/02 Javascript
jQuery中delegate与on的用法与区别示例介绍
2013/12/20 Javascript
javascript实现跨域的方法汇总
2015/06/25 Javascript
jQuery qrcode生成二维码的方法
2016/04/03 Javascript
jquery 实现回车登录详解及实例代码
2016/10/23 Javascript
微信小程序 tabs选项卡效果的实现
2017/01/05 Javascript
Vue.js 2.0学习教程之从基础到组件详解
2017/04/24 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
2017/07/11 jQuery
详解项目升级到vue-cli3的正确姿势
2019/01/28 Javascript
vue项目移动端实现ip输入框问题
2019/03/19 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
2020/03/06 Javascript
[00:20]TI9不朽观赛名额抽取
2019/08/05 DOTA
python制作websocket服务器实例分享
2016/11/20 Python
Python 数据结构之堆栈实例代码
2017/01/22 Python
pandas读取csv文件,分隔符参数sep的实例
2018/12/12 Python
Python对接 xray 和微信实现自动告警
2019/09/17 Python
Python定义一个函数的方法
2020/06/15 Python
Python使用tkinter实现摇骰子小游戏功能的代码
2020/07/02 Python
css3个性化字体_动力节点Java学院整理
2017/07/12 HTML / CSS
使用html5+css3来实现slider切换效果告别javascript+css
2013/01/08 HTML / CSS
实习教师自我鉴定
2013/09/27 职场文书
《美丽的小兴安岭》教学反思
2014/02/26 职场文书
中学优秀班主任事迹材料
2014/05/01 职场文书
创先争优一句话承诺
2014/05/29 职场文书
团拜会策划方案
2014/06/07 职场文书
上级领导检查欢迎词
2015/09/30 职场文书
Golang中异常处理机制详解
2021/06/08 Golang