zTree第三章,异步加载,前端
zTree异步加载
----------------------------------------------------------------------------------
具体详见API文档:
http://www.treejs.cn/v3/api.php
----------------------------------------------------------------------------------
重点是:
setting里面的async相关属性
回调函数callBack里面的onAsyncSuccess : ztreeOnAsyncSuccess
----------------------------------------------------------------------------------
参考文章
https://blog.csdn.net/u010951692/article/details/51833077
----------------------------------------------------------------------------------
<div id="treeAdmin" class="ztree"></div>
----------------------------------------------------------------------------------
var setting = {
async : {
autoParam : [ "pId" , "floor" ],
enable : true,
type : "post",
url : SITE_PATH + "/resourcePush/getSonNodes",
dataFilter : filter,
},
showLine : true,
view : {
nameIsHTML : true,//允许注入html标签
},
check : {
enable : true,
chkStyle : "checkbox"
},
callback : {
onClick : zTreeOnClick,
onAsyncSuccess : ztreeOnAsyncSuccess
}
};
----------------------------------------------------------------------------------
var treeObj = $.fn.zTree.init($("#treeAdmin"), setting);
注意没有nodes
----------------------------------------------------------------------------------
一些图片资源
var file = __THEME__+"resourcesPush/js/ztree/img/diy/file.png", //单个文件
folder = __THEME__+"resourcesPush/js/ztree/img/diy/folder.png", //未展开文件夹
folderOpen = __THEME__+"resourcesPush/js/ztree/img/diy/folder_open.png";//展开文件夹
涉及两个属性
node.isParent;
node.open;
----------------------------------------------------------------------------------
function filter(){
return ;
}
function ztreeOnAsyncSuccess(event, treeId, treeNode){
var url = SITE_PATH + "/resourcePush/getSonNodes";
var parameter = {};
if(treeNode == undefined){
parameter.pId = "0";
parameter.floor = "0";
}
else{
parameter.pId = treeNode.id;
parameter.floor = treeNode.floor;
}
$.ajax({
type : "post",
url : url,
data : parameter,
dataType : "json",
async : true,
success : function(jsonData) {
if (jsonData != null) {
var data = jsonData;
if(data != null && data.length != 0){
//添加图标
data = getIcon(data);
if(treeNode == undefined){
treeObj.addNodes(null,data,true);// 如果是根节点,那么就在null后面加载数据
}
else{
treeObj.addNodes(treeNode,data,true);//如果是加载子节点,那么就是父节点下面加载
}
}
treeObj.expandNode(treeNode,true, false, false);// 将新获取的子节点展开
}
},
error : function() {
console.log("请求错误!");
}
});
};
----------------------------------------------------------------------------------
function getIcon(res){
if (res) {
res.forEach(function(data, index, arr) {
if (data) {
if (data.iconOpen == "folderOpen") {
data.iconOpen = folderOpen;
}
if (data.iconClose == "folder") {
data.iconClose = folder;
}
if (data.icon == "file") {
data.icon = file;
}
}
});
}
return res;
}
----------------------------------------------------------------------------------
zTree第三章,异步加载,前端的更多相关文章
- Android 异步加载解决方案
Android的Lazy Load主要体现在网络数据(图片)异步加载.数据库查询.复杂业务逻辑处理以及费时任务操作导致的异步处理等方面.在介绍Android开发过程中,异步处理这个常见的技术问题之前, ...
- 插件使用一树形插件---zTree一zTree异步加载
zTree 可以实现异步加载.异步加载可以让初次加载速度快,带来好的用户体验. 异步加载 官方源码中的demo提示了例子.例子是采用php语言. 在java语言中,zTree如何与Servlet结合呢 ...
- 异步加载script,提高前端性能(defer和async属性的区别)
一.异步加载script的好处 为了加快首屏响应速度,前端会采用代码切割.按需加载等方式优化性能.异步加载script也是一种前端优化的手段. 就好比如果我的页面其中一个功能需要打开地图,但是地图的j ...
- jquery zTree异步加载的例子
下面是使用zTree异步加载的一个例子: 1)初始化树的时候是ajax请求,返回nodes列表来初始化树的:如果一开始就异步的话,$.fn.zTree.init($("#zTree" ...
- Jquery前端分页插件pagination同步加载和异步加载
上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...
- Jquery Ztree异步加载树
1. 下载jquery的JS文件/ztree的CSS文件和JS文件 https://jquery.com/download/ https://gitee.com/zTree/zTree_v3/tree ...
- ztree异步加载---------补发周日内容
上周六老师要求和大三的进行JAVA知识交流,总体来说就是给大三学长做的东西打分,然后大三学长再教我们如果构建ztree.毕竟第一次接触ztree,所以有很多不了解,但通过周六日努力,还是做出来了.现在 ...
- (转)Unity3D研究院之异步加载游戏场景与异步加载游戏资源进度条(三十一)
异步任务相信大家应该不会陌生,那么本章内容MOMO将带领大家学习Unity中的一些异步任务.在同步加载游戏场景的时候通常会使用方法 Application.LoadLevel(“yourScene ...
- Ztree异步加载自动展开节点
在Ztree的官网Demo中,有自动展开的例子,是通过设置节点属性open:true来实现自动展开的,但是在异步加载中,这个属性设置为true也不会自动展开,因为open:true是指在有子节点的情况 ...
随机推荐
- 行为型-命令模式(Command)
装修新房的最后几道工序之一是安装插座和开关,通过开关可以控制一些电器的打开和关闭,例如电灯或者排气扇.在购买开关时,我们并不知道它将来到底用于控制什么电器,也就是说,开关与电灯.排气扇并无直接关系,一 ...
- 前端开发之jQuery篇--选择器
主要内容: 1.jQuery简介 2.jQuery文件的引入 3.jQuery选择器 4.jQuery对象与DOM对象的转换 一.jQuery简介 1.介绍 jQuery是一个JavaScript库: ...
- 带入gRPC:gRPC Streaming, Client and Server
带入gRPC:gRPC Streaming, Client and Server 原文地址:带入gRPC:gRPC Streaming, Client and Server 前言 本章节将介绍 gRP ...
- ssm 动态切换数据源
1,添加数据库配置 jdbc.driver=com.microsoft.sqlserver.jdbc.SQLServerDriver #jdbc.url=jdbc:sqlserver://192.16 ...
- 滑动窗口的中位数 · Sliding Window Median
[抄题]: 给定一个包含 n 个整数的数组,和一个大小为 k 的滑动窗口,从左到右在数组中滑动这个窗口,找到数组中每个窗口内的中位数.(如果数组个数是偶数,则在该窗口排序数字后,返回第 N/2 个数字 ...
- Spring boot 、mybatis 和 swagger 整合
文件路径 添加依赖 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="h ...
- 将Oracle数据库设置为归档模式及非归档模式
一.将Oracle数据库设置为归档模式 1)sql>shutdown normal/immediate;2)sql>startup mount;3)sql>alter databas ...
- 如果使用mybatis的逆向工程生成的po类及mapper,如果我们想要进行的对数据库的操作在mapper中没有对应的接口函数:比如生成的mapper接口中没有按照姓名及性别混合条件查询。我们的解决办法是:使用逆向工程生成的对应表的Example文件。
1.使用mybatis逆向工程生成的po类中包含UserExample文件(我的数据库表名为User). 2. 创建UserExample对象,然后对加入条件.对应的测试代码为: /* * 通过姓名和 ...
- F650 led驱动
http://www.fdhisi.com/product/class/74/index.php?page=1&key= 福州福大海矽微电子有限公司 FD650 两线式串行接口 2.7-5.5 ...
- Ckeditor 中粘贴图片
我们在ckeditor 中有上传图片,但是实际使用中这种手动上传图片方式并不是很方便,而是复制或者截图粘贴图片. 这里我们实现主要是获取对应的粘贴事件. CKEDITOR.instances[&quo ...