Jquery插件 之 zTree树加载
原文链接:https://blog.csdn.net/jiaqu2177/article/details/80626730
zTree树加载
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
在做项目的时候,我们经常能用到zTree,但是,有的时候,因为树数据过多,而导致树加载很慢,测试超过10000条数据就要加载3秒左右,如果有更多的数据,那用户的体验会是一个什么样子?
今天也是在做项目的时候遇到这个问题,也就来做下笔记!
1、查询数据
@Autowired
private JdbcTemplate jdbcTemplate; @Override
public List<User> findUserList(String areaCode) {
//这里判断是不是第一次进来,如果是,赋给他顶级节点的ID
if(StringUtils.isEmpty(areaCode)) {
areaCode = "";
}
StringBuilder sql = new StringBuilder();
sql.append("SELECT * FROM USER WHERE PART_ID = '" + areaCode + "'");
//判断是否为第一次进来,如果是第一次,则查询顶级节点和下一级节点,如果不是,则只查询当前areaCode的子节点
if("".equals(areaCode)) {
sql.append(" OR ID = '620000'");
}
List<User> list = jdbcTemplate.query(sb.toString(), new Object[] {},new BeanPropertyRowMapper<User>(User.class));
return list;
根据以上的实现层,我们可以拿到数据的list集合,然后就是去拼接ztree需要的json格式数据。
2、拼接 JSON 字符串
@Autowired
private UserService userService; //Controller层,推荐使用post
@RequestMapping(value = "/zTree", method = RequestMethod.POST)
public void areaTree(HttpServletRequest request, HttpServletResponse response) {
//获取异步加载的条件ID
String areaCode = request.getParameter("id");
try {
//获取查询到的数据
List<User> list = userService.findUserList(areaCode);
List<Map<String,String>> ztree = new ArrayList<Map<String, String>>();
if (list != null && !list.isEmpty()) {
int a = ;
//循环list 进行拼接 json 串
for (User user : list) {
a++;
String id = String.valueOf(user.getId());
String pId = String.valueOf(user.getPartId());
Map<String, String> map = new HashMap<String, String>();
map.put("id", id);
map.put("pId",pId);
//这里可以根据自己的业务去筛选那些数据为父节点,那些为子节点
if(id.substring(id.length()-, id.length()).equals("")
{
map.put("isParent","true");//父节点
}else {
map.put("isParent","false");//子节点
}
map.put("name", user.getName());
map.put("title", user.getName());
map.put("viewtype", "");
map.put("regiontype", "");
if(a==) {
map.put("open", "true");//是否展开
}else {
map.put("open", "false");
}
ztree.add(map);
}
}
JSONArray array = JSONArray.fromObject(ztree);
String json = array.toString();
} catch (Exception e) {
e.printStackTrace();
}
}
这样,我们需要的 json 字符串就拼接出来了,下一步,就是要在页面进行显示!
3、页面进行展示
<!-- 树显示的位置 -->
<ul id="ztree" class="ztree"></ul> <!-- 相关js和css引入省略 -->
<script>
$(function() {
//初始化树菜单
zTree = $.fn.zTree.init($("#ztree"), setting);
});
var zTree;
var setting = {
async: {
enable: true,
type:"post",
dataType:'json',
url:"/zTree",//我们之前写的Controller的地址
//此处的id就是节点的id,每次点击之后,会自动根据节点的id去查询节点下的数据,此处写什么,在Controller中获取的name名称就是什么。
//例如 String areaCode = request.getParameter("id");
autoParam:["id"]
},
callback: {
onClick: zTreeOnClick, //树点击事件
onAsyncSuccess: zTreeOnAsyncSuccess //树延迟加载事件
},
view:{
dblClickExpand: false,
showIcon: false, //树菜单的icon图标
},
data: {
simpleData: {
enable: true
}
}
};
var firstAsyncSuccessFlag = ; function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
var arry = eval(msg);
var sumProject=;
if (arry.length > && arry[].res_level=="") {
for (var i = ; i < arry.length; i++) {
sumProject += parseInt(arry[i].sumProject);
}
}
if (firstAsyncSuccessFlag == ) {
try {
//调用默认展开第一个结点
var selectedNode = zTree.getSelectedNodes();
var nodes = zTree.getNodes();
zTree.expandNode(nodes[], true);
firstAsyncSuccessFlag = ;
} catch (err) {}
}
}
//点击左侧树
function zTreeOnClick(e, treeId, treeNode){
//点击左侧树的ID
var areaCode = treeNode.id;
//点击左侧树的逻辑处理
}
</script>
Jquery插件 之 zTree树加载的更多相关文章
- JQuery插件:遮罩+数据加载中。。。(特点:遮你想遮,罩你想罩)
在很多项目中都会涉及到数据加载.数据加载有时可能会是2-3秒,为了给一个友好的提示,一般都会给一个[数据加载中...]的提示.今天就做了一个这样的提示框. 先去jQuery官网看看怎么写jQuery插 ...
- jquery zTree异步加载的例子
下面是使用zTree异步加载的一个例子: 1)初始化树的时候是ajax请求,返回nodes列表来初始化树的:如果一开始就异步的话,$.fn.zTree.init($("#zTree" ...
- 插件:★★★ !!!图片懒加载 lazyload.js 、 jquery.scrollLoading.js
插件:图片懒加载 jquery.lazyload.js 2016-3-31 插件说明:http://www.w3cways.com/1765.html (小插件,好用) 下载地址: https://r ...
- ztree异步加载
Ztree异步加载的意思就是: 当点击展开树节点时,才去请求后台action返回点击节点的子节点数据并加载. 直接贴代码(SpringMvc+Mybatis): 前台页面ztreeList.jsp: ...
- jQuery瀑布流从不同方向加载3种效果演示
很实用的一款插件jQuery瀑布流从不同方向加载3种效果演示在线预览 下载地址 实例代码 <section class="grid-wrap"> <ul clas ...
- zTree 异步加载
zTree异步加载数据的简单实现,更为详细的Api请参考 zTree官网 http://www.treejs.cn/ <link href="~/Content/ztree/css ...
- 转载:用Jquery实现的图片预加载技术,可以实现有序加载和无序加载!
一.背景 我们在做页面的时候,从用户体验的角度出发,肯定是希望用户以最快的速度看到完整的页面信息,但在实际情况中经常会遇到些问题. 比如受网速影响,页面加载素材的时间比较长,页面会出现短时间的错乱或者 ...
- 启用lazyload插件,减少图片加载
使用lazyload的js插件,减少图片加载,提高页面加载速度和节省流量.虽然这个头像是第三方服务器来的,不消费博客的流量,但是能节省部分访客的加载时间,也是不错的哦. 用lazyload插件,只是后 ...
- 携程Android App插件化和动态加载实践
携程Android App的插件化和动态加载框架已上线半年,经历了初期的探索和持续的打磨优化,新框架和工程配置经受住了生产实践的考验.本文将详细介绍Android平台插件式开发和动态加载技术的原理和实 ...
随机推荐
- 【47】迁移学习(Transfer Learning)
迁移学习(Transfer Learning) 如果你要做一个计算机视觉的应用,相比于从头训练权重,或者说从随机初始化权重开始,如果你下载别人已经训练好网络结构的权重,你通常能够进展的相当快,用这个作 ...
- 简单的leetcode题
简单的leetcode题 环绕字符串中唯一的子字符串 把字符串 s 看作是\("abcdefghijklmnopqrstuvwxyz"\)的无限环绕字符串,所以 s 看起来是这样的 ...
- [CF1311E] Construct the Binary Tree - 构造
Solution 预处理出 \(i\) 个点组成的二叉树的最大答案和最小答案 递归做,由于只需要构造一种方案,我们让左子树大小能小就小,因此每次从小到大枚举左子树的点数并检验,如果检验通过就选定之 现 ...
- java通过递归统计文件大小
思路就是通过文件的遍历,对一个文件夹中的非目录文件进行大小统计,并对其中目录文件进行相同的遍历操作,代码如下: package word; import java.io.File; import ja ...
- gitlab持续集成,自动部署
写这篇文章的目的是,实现提交代码到gitlab上的一个项目时,自动打包,并将包发布到另一台服务器上,重启tomat.如有问题,可以联系本人QQ:409838567 gitlab-ci,是基于gitla ...
- 牛客寒假训练营2-H施魔法
思路 dp去维护前缀f[i-1] - ai的最小值 CODE #include <bits/stdc++.h> #define dbg(x) cout << #x <&l ...
- Docker学习参考网站
Docker——从入门到实践 https://www.yuque.com/grasilife/docker 2.阿里源网站:https://cr.console.aliyun.com 3.DaoClo ...
- 【卸载Pycharm】
一.卸载软件及安装目录 1. 控制面板中卸载 二.删除注册表信息 1. 备份注册表信息 2. 删除注册表信息
- MySQL必会的50个常见面试练习题
下面的SQL题目都是比较基础,比较常见的数据库SQL面试题,在技术面试环节虽然碰到相同题目的机会比较少,但解题的基本思路都是差 不多的.下面是SQL面试题描述: Student(Sid,Sname,S ...
- 0级搭建类003-CentOS Linux安装 (CentOS 7)公开
项目文档引子系列是根据项目原型,制作的测试实验文档,目的是为了提升项目过程中的实际动手能力,打造精品文档AskScuti. 项目文档引子系列目前不对外发布,仅作为博客记录.如学员在实际工作过程中需提前 ...