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 相关文章推荐
htm调用JS代码
Mar 15 Javascript
JQuery优缺点分析说明
Apr 10 Javascript
javascript实现回到顶部特效
May 06 Javascript
jquery如何获取元素的滚动条高度等实现代码
Oct 19 Javascript
理解javascript定时器中的单线程
Feb 23 Javascript
阻止表单提交按钮多次提交的完美解决方法
May 16 Javascript
jQuery文件上传控件 Uploadify 详解
Jun 20 Javascript
vue地区选择组件教程详解
May 04 Javascript
详解vue-property-decorator使用手册
Jul 29 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
Nov 07 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
Aug 31 Javascript
前端vue+express实现文件的上传下载示例
Feb 18 Vue.js
详解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
PHP常用的文件操作函数经典收藏
2013/04/02 PHP
php中ob_get_length缓冲与获取缓冲长度实例
2014/11/20 PHP
关于php微信订阅号开发之token验证后自动发送消息给订阅号但是没有消息返回的问题
2015/12/21 PHP
Javascript 错误处理的几种方法
2009/06/13 Javascript
jQuery 无限级菜单的简单实例
2014/02/21 Javascript
nodejs npm包管理的配置方法及常用命令介绍
2014/06/05 NodeJs
谷歌浏览器不支持showModalDialog模态对话框的解决方法
2014/09/22 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
2015/03/02 Javascript
jQuery实现hover合成事件的方法
2015/08/06 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
2016/05/12 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
2016/08/06 Javascript
jQuery中$.ajax()方法参数解析
2016/10/22 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
2016/12/07 Javascript
微信小程序 Buffer缓冲区的详解
2017/07/06 Javascript
Angular中响应式表单的三种更新值方法详析
2017/08/22 Javascript
详解vue-cli本地环境API代理设置和解决跨域
2017/09/05 Javascript
JS简单获取并修改input文本框内容的方法示例
2018/04/08 Javascript
对vue中的事件穿透与禁止穿透实例详解
2019/10/28 Javascript
JavaScript的console命令使用实例
2019/12/03 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
2021/01/13 Vue.js
用Django实现一个可运行的区块链应用
2018/03/08 Python
python中找出numpy array数组的最值及其索引方法
2018/04/17 Python
python 划分数据集为训练集和测试集的方法
2018/12/11 Python
python解析含有重复key的json方法
2019/01/22 Python
python实现转圈打印矩阵
2019/03/02 Python
Django的models模型的具体使用
2019/07/15 Python
python批量将excel内容进行翻译写入功能
2019/10/10 Python
详解django使用include无法跳转的解决方法
2020/03/19 Python
Django实现前台上传并显示图片功能
2020/05/29 Python
iRobot官网:改变生活的家用机器人品牌
2016/09/20 全球购物
一百多行代码实现react拖拽hooks
2021/03/23 Javascript
大专生工程监理求职信
2013/10/04 职场文书
函授本科自我鉴定
2014/02/04 职场文书
产品包装策划方案
2014/05/18 职场文书
2015年国庆节活动总结
2015/03/23 职场文书
超市督导岗位职责
2015/04/10 职场文书