原文链接: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树加载的更多相关文章

  1. JQuery插件:遮罩+数据加载中。。。(特点:遮你想遮,罩你想罩)

    在很多项目中都会涉及到数据加载.数据加载有时可能会是2-3秒,为了给一个友好的提示,一般都会给一个[数据加载中...]的提示.今天就做了一个这样的提示框. 先去jQuery官网看看怎么写jQuery插 ...

  2. jquery zTree异步加载的例子

    下面是使用zTree异步加载的一个例子: 1)初始化树的时候是ajax请求,返回nodes列表来初始化树的:如果一开始就异步的话,$.fn.zTree.init($("#zTree" ...

  3. 插件:★★★ !!!图片懒加载 lazyload.js 、 jquery.scrollLoading.js

    插件:图片懒加载 jquery.lazyload.js 2016-3-31 插件说明:http://www.w3cways.com/1765.html (小插件,好用) 下载地址: https://r ...

  4. ztree异步加载

    Ztree异步加载的意思就是: 当点击展开树节点时,才去请求后台action返回点击节点的子节点数据并加载. 直接贴代码(SpringMvc+Mybatis): 前台页面ztreeList.jsp: ...

  5. jQuery瀑布流从不同方向加载3种效果演示

    很实用的一款插件jQuery瀑布流从不同方向加载3种效果演示在线预览 下载地址 实例代码 <section class="grid-wrap"> <ul clas ...

  6. zTree 异步加载

    zTree异步加载数据的简单实现,更为详细的Api请参考 zTree官网   http://www.treejs.cn/ <link href="~/Content/ztree/css ...

  7. 转载:用Jquery实现的图片预加载技术,可以实现有序加载和无序加载!

    一.背景 我们在做页面的时候,从用户体验的角度出发,肯定是希望用户以最快的速度看到完整的页面信息,但在实际情况中经常会遇到些问题. 比如受网速影响,页面加载素材的时间比较长,页面会出现短时间的错乱或者 ...

  8. 启用lazyload插件,减少图片加载

    使用lazyload的js插件,减少图片加载,提高页面加载速度和节省流量.虽然这个头像是第三方服务器来的,不消费博客的流量,但是能节省部分访客的加载时间,也是不错的哦. 用lazyload插件,只是后 ...

  9. 携程Android App插件化和动态加载实践

    携程Android App的插件化和动态加载框架已上线半年,经历了初期的探索和持续的打磨优化,新框架和工程配置经受住了生产实践的考验.本文将详细介绍Android平台插件式开发和动态加载技术的原理和实 ...

随机推荐

  1. P4939 Agent2

    链接:P4939 ------------------------------------------------ 这道题肯定是数据结构题. ----------------------------- ...

  2. npm 安装与部署

    nodejs 安装 查看版本 官方网址 下载linux版,64位 wget https://npm.taobao.org/mirrors/node/v12.13.1/node-v12.13.1-lin ...

  3. 用R实现范式编程

    面向函数范式编程(Functional programming) 模拟简单的随机过程 模拟一个简单的随机过程:从N~(0,1)标准正态分布中产生100个随机值,反复5次得到一个list,再以每个lis ...

  4. 【新人赛】阿里云恶意程序检测 -- 实践记录11.10 - XGBoost学习 / 代码阅读、调参经验总结

    XGBoost学习: 集成学习将多个弱学习器结合起来,优势互补,可以达到强学习器的效果.要想得到最好的集成效果,这些弱学习器应当"好而不同". 根据个体学习器的生成方法,集成学习方 ...

  5. tensor维度变换

    维度变换是tensorflow中的重要模块之一,前面mnist实战模块我们使用了图片数据的压平操作,它就是维度变换的应用之一. 在详解维度变换的方法之前,这里先介绍一下View(视图)的概念.所谓Vi ...

  6. Linux环境搭建及基础操作

    一.Linux环境搭建 1.安装虚拟机软件(VMWare,Parallel) 虚拟机的作用:将本来不是适合当前操作系统的分区虚拟化成适合当前操作系统的分区格式 2.新建虚拟机: 类似买了一台新的电脑, ...

  7. stringstream使用小结

    1.头文件:#include<sstream> 2.stringstream是C++提供的串流(stream)物件 3.clear()重置流的标志状态:str()清空流的内存缓冲,重复使用 ...

  8. 转: OSIP协议栈使用入门

    转自百度文库 很长时间之前,简单粗略地看了下Osip,eXosip,ortp等并快速“封装”了一个Windows下的基于VC6的MFC的SIP软电话(全部源代码VC6工程文件及Lib库可在本Blog共 ...

  9. Tomcat报错Invalid character found in the request target. The valid characters are defined in RFC 7230 and RFC 3986

    问题描述:后台报错 Note: further occurrences of HTTP header parsing errors will be logged at DEBUG level.java ...

  10. Python入门11 —— 基本数据类型的操作

    一:数字类型:int.float字类型 1.操作: 比较运算:int与float之间是可以比较大小 数学运算:+-*/,int与float之间也可以进行数学运算 print(10 > 3.1) ...