原文链接: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. 将一个Head下的Line复制到另一个Head下(ef+linq)

    今天工作中有一个需求,要求将一个Item下的Line复制到另外一个Item下面 这个需求在工作中很多,按照以往的经验肯定是先delete from,然后再一条条遍历后insert into 这两天正好 ...

  2. Windows配置winpcap

    参考: https://blog.csdn.net/qq_29350467/article/details/46663953?depth_1-utm_source=distribute.pc_rele ...

  3. Chrome 插件 postman 可以在线post

    地址:https://chrome.google.com/webstore/detail/fhbjgbiflinjbdggehcddcbncdddomop

  4. C# DES加密、解密

    /// <summary> /// DES加密字符串 /// </summary> /// <param name="pToEncrypt">待 ...

  5. python正式学习第二天

    用python操作文件 步骤一:找到文件,打开文件 步骤二:修改文件 ,读取文件 步骤三:关闭文件,并保存 用代码演示如下: 1. f = open(file nama)2. f.read(#读取的字 ...

  6. BIM人才三角

    BIM 人才三角聚焦六个关键技能和一个中心. 1. 基础能力 基础能力分三块: 语言能力 实践能力 数学能力 1.1 语言能力 语言是指自然语言,如汉语和英语.获取其他知识的能力以及学习.理解.沟通能 ...

  7. 安卓android eclipse运行提示no compatible targets were found

    在eclipse中开发安卓应用,运行项目时,右击项目名称---Run As---Android Application时, 系统提示"No compatible targets were f ...

  8. C# Dynamic与Newtonsoft.Json的应用

    C#中Dynamic关键字 dynamic关键字和动态语言运行时(DLR)是.Net 4.0中新增的功能. 什么是"动态"? 编程语言有时可以划分为静态类型化语言和动态类型化语言. ...

  9. Mysql快速入门(三)

    MySQL性能优化之查看执行计划explain 介绍: (1).MySQL 提供了一个 EXPLAIN 命令, 它可以对 SELECT 语句进行分析, 并输出 SELECT 执行的详细信息, 以供开发 ...

  10. gazebo仿真踩坑--rviz中设定机器人的目标位置,move_base后台日志报错

    启动仿真环境及各种节点(amcl,move_base,map_server)后,在rviz中设定机器人的目标位置,后台日志报错 [ INFO] [1571974242.864525935, 40.51 ...