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第三章,异步加载,前端的更多相关文章

  1. Android 异步加载解决方案

    Android的Lazy Load主要体现在网络数据(图片)异步加载.数据库查询.复杂业务逻辑处理以及费时任务操作导致的异步处理等方面.在介绍Android开发过程中,异步处理这个常见的技术问题之前, ...

  2. 插件使用一树形插件---zTree一zTree异步加载

    zTree 可以实现异步加载.异步加载可以让初次加载速度快,带来好的用户体验. 异步加载 官方源码中的demo提示了例子.例子是采用php语言. 在java语言中,zTree如何与Servlet结合呢 ...

  3. 异步加载script,提高前端性能(defer和async属性的区别)

    一.异步加载script的好处 为了加快首屏响应速度,前端会采用代码切割.按需加载等方式优化性能.异步加载script也是一种前端优化的手段. 就好比如果我的页面其中一个功能需要打开地图,但是地图的j ...

  4. jquery zTree异步加载的例子

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

  5. Jquery前端分页插件pagination同步加载和异步加载

    上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...

  6. Jquery Ztree异步加载树

    1. 下载jquery的JS文件/ztree的CSS文件和JS文件 https://jquery.com/download/ https://gitee.com/zTree/zTree_v3/tree ...

  7. ztree异步加载---------补发周日内容

    上周六老师要求和大三的进行JAVA知识交流,总体来说就是给大三学长做的东西打分,然后大三学长再教我们如果构建ztree.毕竟第一次接触ztree,所以有很多不了解,但通过周六日努力,还是做出来了.现在 ...

  8. (转)Unity3D研究院之异步加载游戏场景与异步加载游戏资源进度条(三十一)

      异步任务相信大家应该不会陌生,那么本章内容MOMO将带领大家学习Unity中的一些异步任务.在同步加载游戏场景的时候通常会使用方法 Application.LoadLevel(“yourScene ...

  9. Ztree异步加载自动展开节点

    在Ztree的官网Demo中,有自动展开的例子,是通过设置节点属性open:true来实现自动展开的,但是在异步加载中,这个属性设置为true也不会自动展开,因为open:true是指在有子节点的情况 ...

随机推荐

  1. C#预编译的问题

    C#预编译宏并不像C++那样编译之后就不存在了.在UNITY的C#脚本中 #if UNITY_ANDROID && !UNITY_EDITOR AndroidJavaClass jc ...

  2. Add words to your picture

    [Add words to your picture] How to add text to your photo, and then style it with the Type tool. 1.O ...

  3. Python setattr() 函数

    Python setattr() 函数  Python 内置函数 描述 setattr() 函数对应函数 getattr(),用于设置属性值,该属性不一定是存在的. 语法 setattr() 语法: ...

  4. Linux mmap函数简介

    一.简介 Linux提供了内存映射函数mmap, 它把文件内容映射到一段内存上(准确说是虚拟内存上), 通过对这段内存的读取和修改, 实现对文件的读取和修改, 先来看一下mmap的函数声明: 头文件: ...

  5. MySQL数据库远程连接的配置方案

    首先,目的是使用本机可视化工具SQLyog通过IP地址远程访问另一台机器上的MySQL数据库. 本人实践的MySQL版本是MySQL 5.7.23,数据库部署的主机系统是Windows.这些简单配置均 ...

  6. [Groovy]SoapUI怎样在Groovy脚本中读取变量的值

    def saveFilePath = context.expand( '${#Project#saveFilePath}' ) def myOutFile = saveFilePath+"t ...

  7. Spring JMX之一:使用JMX管理Spring Bean

    spring中关于jmx包括几个概念: MBeanExporter: 从字面上很容易理解, 用来将一些spring的bean作为MBean暴露给MBEanServer.MBeanServerFacto ...

  8. [原创]解决IPCH关闭后可能引发的无法调试的BUG

    前几天清理硬盘,发现大量IPCH目录,文件特别巨大,看着头大,所以决定改为临时模式,同时VS2015和VS2013我都改了,设置如下: (关键字:IPCH目录,VS大文件) 当设置好之后不会出现烦人的 ...

  9. UVa 11136 Hoax or what (STL)

    题意:有 n 天,每天有m个数,开始的前一天没有数据,然后每天从这个里面拿出一个最大的和最小的,求 n 天的最大的和最小的差值相加. 析:一看就知道用set啊,多简单的STL,不过要注意,开long ...

  10. UVa 10118 Free Candies (记忆化搜索+哈希)

    题意:有4堆糖果,每堆有n(最多40)个,有一个篮子,最多装5个糖果,我们每次只能从某一堆糖果里拿出一个糖果,如果篮子里有两个相同的糖果, 那么就可以把这两个(一对)糖果放进自己的口袋里,问最多能拿走 ...