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平台插件式开发和动态加载技术的原理和实 ...
随机推荐
- 03-React基础语法(3)
一.Context 概念:Context 提供一个无需在每层组件中添加Props,就可以实现组件组件之间通信的方法 语法: 1创建context对象 const {Provider, Consum ...
- webservice之Http传输错误问题
1.背景:调用第三方webservice服务,正常调用,但是最近由于第三方更换远程调用地址,并且发布服务器(A)是通过代理的方式请求真实服务器地址(B),于是本以为很简单的将客户端调用地址修改为发布地 ...
- Linux环境搭建及基础操作
一.Linux环境搭建 1.安装虚拟机软件(VMWare,Parallel) 虚拟机的作用:将本来不是适合当前操作系统的分区虚拟化成适合当前操作系统的分区格式 2.新建虚拟机: 类似买了一台新的电脑, ...
- 航空航天专用Everspin非易失性MRAM存储器
TAMU是由瑞典乌普萨拉的Ångström航空航天公司(ÅAC)开发的高级磁力计子系统.TAMU的目的是提供地球磁场的磁力计数据,以便与子画面观测相关.实验性TAMU由使用领先技术制造的四种类型的设备 ...
- IO流学习之字符流(一)
IO流(Input/Output) 简介: 流是一种抽象概念,它代表了数据的无结构化传递.按照流的方式进行输入输出,数据被当成无结构的字节序或字符序列.从流中取得数据的操作称为提取操作,而向流中添加数 ...
- RBAC基于角色的权限管理模型
一.权限管理模型的必要性: a. 安全性:防止误操作,防止数据泄露,保证信息的安全. b. 数据隔离:保持不同的角色具有不同的权限,只能看到自己权限范围内的数据 二.权限管理模型的发展: a. 传统的 ...
- chm文件打开空白无内容
问题描述 chm文件打开空白无内容 解决方案 选中 chm 文件,右键 - 属性- 在弹出的对话框中点击右下方的“接触锁定”,之后点击“应用”,再点击“确定”
- python3练习100题——045
题目:统计 1 到 100 之和. sum(range(1,101)) 题目太容易了,我都不想用迭代浪费时间. 觉得这100道题难度设计越来越不合理.
- Windows Server多用户同时远程登录
因为工作需要,需要使用windwos作为一个远程登录跳板机,管理员对登录windwos机器再windwos的基础上连接别的机器,普通用户也可以连接windwos机器再连接别的机器,关于管理员普通用户连 ...
- django csrf 中间件
CSRF和中间件 CSRF使用 说明csrf存在cookie中 全局使用 MIDDLEWARE = [ 'django.middleware.security.SecurityMiddleware', ...