zTree树形插件异步加载方法详解

2024-09-26 22:10:49

本文实例为大家分享了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的表字段附上

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Vue.js中用webpack合并打包多个组件并实现按需加载

前言随着移动设备的升级.网络速度的提高,用户对于web应用的要求越来越高,web应用要提供的功能越来越.功能的增加导致的最直观的后果就是资源文件越来越大.为了维护越来越庞大的客户端代码,提出了模块化的概念来组织代码.webpack作为一种模块化打包工具,随着react的流行也越来越流行. 使用 Vue 开发项目时,如果要使用其单文件组件特性,必然要使用 webpack 或者 browserify 进行打包,对于大型应用,为了提升加载速度,可以使用 webpack 的 code split 功能
Bootstrap Tree View简单而优雅的树结构组件实例解析

A simple and elegant solution to displaying hierarchical tree structures (i.e. a Tree View) while leveraging the best that Twitter Bootstrap has to offer. 这是Bootstrap Tree View在git上的简介. 注意simple.elegant,简单而优雅,我喜欢这两个词. 那么今天的实例是通过Bootstrap Tree View来制作
webpack中引用jquery的简单实现

1.首先需要添加项目中jquery的依赖 npm install jquery --save-dev 2.参考配置代码: var webpack = require("webpack"); var path = require("path"); module.exports = { entry:{ home:"./src/js/home.js", -- }, output:{ path:__dirname+"/dist/js"
Webpack 实现 AngularJS 的延迟加载

随着你的单页应用扩大,其下载时间也越来越长.这对提高用户体验不会有好处(提示:但用户体验正是我们开发单页应用的原因).更多的代码意味着更大的文件,直到代码压缩已经不能满足你的需求,你唯一能为你的用户做的就是不要再让他一次性下载整个应用.这时,延迟加载就派上用场了.不同于一次性下载所有文件,而是让用户只下载他现在需要的文件. 所以.如何让你的应用程序实现延迟加载?它基本上是分成两件事情.把你的模块拆分成小块,并实施一些机制,允许按需加载这些块.听起来似乎有很多工作量,不是吗?如果你使用 Webpa
浅析webpack 如何优雅的使用tree-shaking（摇树优化）

1.什么是tree-shaking webpack 2 的到来带来的最棒的新特性之一就是tree-shaking .tree-shaking源自于rollup.js,先如今,webpack 2也有类似的做法. webpack 里的tree-shaking的到来不得不归功于es6规范的模块.为什么这么说,如今的前端模块规范很多,比较出流行的比如commonJS , AMD , es6 ,我简单的说一下commonJS和es6模块的区别. commonJS 模块 commonJS的模块规范在Node
zTree树形插件异步加载方法详解

本文实例为大家分享了zTree树形插件异步加载,Struts2框架,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>异步加载</title> <link rel="stylesheet" href="${pageContext.request.contextPath}/zTree_v
jquery ajax局部加载方法详解(实现代码)

在jquery中实现ajax加载的方法有很多种,不像以前的js的ajax只有那一种,下面我们介绍jquery ajax实现局部加载方法总结,有需要了解的朋友可参考. 例 $.ajax({ url: "hotelQuery!queryHotelByCity.action", type: "post", dataType: "html", data: "queryHotel.city="+cityobj.value+"&
Kotlin Coroutines执行异步加载示例详解

前言 Kotlin Coroutines是Kotlin推出的新的异步API.并不是解决所有问题的最优方案,但是希望在许多情况下它会使事情变得更容易一些.这里只简单的展示一下这个库在安卓中的具体使用方案.下面话不多说了,来一起看看详细的介绍吧. 引入Coroutines //在application的build.gradle文件中的android节点添加如下的代码 kotlin { experimental { coroutines 'enable' } } //添加下面两行到依赖中 implem
jQuery zTree树插件动态加载实例代码

需求: 由于项目中家谱图数据量超大,而一般加载方式是通过,页面加载时 zTree.init方法进行数据加载,将所有数据一次性加载到页面中.而在项目中家谱级别又非常广而深,成千上万级,因此一次加载,完全加载不出来.于是需要进行优化为动态加载(增量加载)的方式,以便数据加载,提高体验度. 解决断路: 这应该好办,只要找到父节点单击事件,然后进行数据加载,结点附加即可.时间紧,任务重,完全没给研究的时间.只能硬着上,随便搜索一个"zTree动态加载",出是出来了,标题也对,可里面的代码根本没
ios开发UITableViewCell图片加载优化详解

目录前言图片自适应比例 XHWebImageAutoSize 仅加载当前屏幕的内容预加载前言我们平时用UITableView用的很多,所以对列表的优化也是很关注的.很多时候,我们设置UIImageView,都是比例固定好宽高的,然后通过 scaleAspectFill 和 clipsToBounds 保持图片不变形,这样子做开发的效率是很高的,毕竟图片宽高我们都是固定好的了. 那如果产品要求图片按真正的比例展示出来呢?如果服务器有返回宽和高,那就好办了,那如果没有呢,我们应该怎么去做呢
SpringBoot使用Shiro实现动态加载权限详解流程

目录一.序章二.SpringBoot集成Shiro 1.引入相关maven依赖 2.自定义Realm 3.Shiro配置类三.shiro动态加载权限处理方法四.shiro中自定义角色与权限过滤器 1.自定义uri权限过滤器 zqPerms 2.自定义角色权限过滤器 zqRoles 3.自定义token过滤器五.项目中会用到的一些工具类常量等 1.Shiro工具类 2.Redis常量类 3.Spring上下文工具类六.案例demo源码一.序章基本环境 spring-boot 2.1
vue前端性能优化之预加载和懒加载示例详解

目录预加载图片预加载 JS预加载 js的加载方式 preload prefetch Preload & Prefetch 的区别不同资源加载的优先级规则懒加载图片懒加载路由懒加载组件懒加载最后预加载预加载简单来说就是将所有所需的资源提前请求加载到本地,这样后面在需要用到时就直接从缓存取资源:我们使用该技术预先告知浏览器,等下某些资源可能要被使用,先把资源下载下来,不要等使用的时候再下载,可以看出这样的加载技术会增加服务器的压力,但是用户的体验会比较好,因为可以较快的看到后面的
Android LayoutInflater加载布局详解及实例代码

Android LayoutInflater加载布局详解对于有一定Android开发经验的同学来说,一定使用过LayoutInflater.inflater()来加载布局文件,但并不一定去深究过它的原理,比如 1.LayoutInflater为什么可以加载layout文件? 2.加载layout文件之后,又是怎么变成供我们使用的View的? 3.我们定义View的时候,如果需要在布局中使用,则必须实现带AttributeSet参数的构造方法,这又是为什么呢? 既然在这篇文章提出来,那说明这三
基于js文件加载优化(详解)

在js引擎部分,我们可以了解到,当渲染引擎解析到script标签时,会将控制权给JS引擎,如果script加载的是外部资源,则需要等待下载完后才能执行. 所以,在这里,我们可以对其进行很多优化工作. 放置在BODY底部为了让渲染引擎能够及早的将DOM树给渲染出来,我们需要将script放在body的底部,让页面尽早脱离白屏的现象,即会提早触发DOMContentLoaded事件. 但是由于在IOS Safari, Android browser以及IOS webview里面即使你把js脚本放到
Python自动重新加载模块详解(autoreload module)

守护进程模式使用python开发后台服务程序的时候,每次修改代码之后都需要重启服务才能生效比较麻烦. 看了一下Python开源的Web框架(Django.Flask等)都有自己的自动加载模块功能(autoreload.py),都是通过subprocess模式创建子进程,主进程作为守护进程,子进程中一个线程负责检测文件是否发生变化,如果发生变化则退出,主进程检查子进程的退出码(exist code)如果与约定的退出码一致,则重新启动一个子进程继续工作. 自动重新加载模块代码如下: autorel

zTree树形插件异步加载方法详解

相关推荐

随机推荐