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 类型转换常见方法小结
May 31 Javascript
JavaScript程序中的流程控制语句用法总结
May 23 Javascript
Vue.js路由组件vue-router使用方法详解
Dec 02 Javascript
js实现音频控制进度条功能
Apr 01 Javascript
微信小程序 生命周期函数详解
May 24 Javascript
Node做中转服务器转发接口
Oct 18 Javascript
vue 实现数字滚动增加效果的实例代码
Jul 06 Javascript
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
vue+koa2实现session、token登陆状态验证的示例
Aug 30 Javascript
vue实现购物车选择功能
Jan 10 Javascript
Vue实现浏览器打印功能的代码
Apr 17 Javascript
js实现全选和全不选功能
Jul 28 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
浅谈Windows下 PHP4.0与oracle 8的连接设置
2006/10/09 PHP
php针对cookie操作的队列操作类实例
2014/12/10 PHP
yii使用activeFileField控件实现上传文件与图片的方法
2015/12/28 PHP
基于PHP-FPM进程池探秘
2017/10/17 PHP
JS原型对象通俗&quot;唱法&quot;
2012/12/27 Javascript
IE下window.onresize 多次调用与死循环bug处理方法介绍
2013/11/12 Javascript
Nodejs实现的一个简单udp广播服务器、客户端
2014/09/25 NodeJs
JavaScript中的Promise使用详解
2015/06/24 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
2015/06/26 Javascript
基于insertBefore制作简单的循环插空效果
2015/09/21 Javascript
Javascript实现前端简单的路由实例
2016/09/11 Javascript
Bootstrap企业网站实战项目4
2016/10/14 Javascript
vue.js学习之UI组件开发教程
2017/07/03 Javascript
基于ES6作用域和解构赋值详解
2017/11/03 Javascript
微信小程序实现滚动消息通知
2018/02/02 Javascript
electron demo项目npm install安装失败的解决方法
2018/02/06 Javascript
vue进行图片的预加载watch用法实例讲解
2018/02/07 Javascript
在vscode里使用.vue代码模板的方法
2018/04/28 Javascript
JS监听滚动和id自动定位滚动
2018/12/18 Javascript
傻瓜式vuex语法糖kiss-vuex整理
2018/12/21 Javascript
JavaScript中callee和caller的区别与用法实例分析
2019/06/28 Javascript
layui前端时间戳转化实例
2019/11/15 Javascript
Vue-router编程式导航的两种实现代码
2021/03/04 Vue.js
Python开发之身份证验证库id_validator验证身份证号合法性及根据身份证号返回住址年龄等信息
2020/03/20 Python
Ticketmaster德国票务网站:购买音乐会和体育等门票
2016/11/14 全球购物
Servlet都有哪些方法?主要作用是什么?
2014/03/04 面试题
中级会计职业生涯规划范文
2014/01/16 职场文书
小学节能减排倡议书
2014/05/15 职场文书
激励员工的口号
2014/06/16 职场文书
大学新生军训自我鉴定范文
2014/09/13 职场文书
2014年家长学校工作总结
2014/11/20 职场文书
2015年感恩节演讲稿(优选篇)
2015/03/20 职场文书
2016廉政教育学习心得体会
2016/01/25 职场文书
python本地文件服务器实例教程
2021/05/02 Python
Pytorch中TensorBoard及torchsummary的使用详解
2021/05/12 Python
pytorch中Schedule与warmup_steps的用法说明
2021/05/24 Python