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. spring错误处理 Build path is incomplete. Cannot find class file for org.springframework.aop.Advisor

    Build path is incomplete. Cannot find class file for org.springframework.aop.Advisor 初学spring,记录一下出现 ...

  2. lombok 注解使用

    需要引入: <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok&l ...

  3. 在MarkDown中插入数学公式对照表(持续更新)

    目录 在MarkDown中可以插入数学公式,但是在博客园和有道云笔记之中的数学公式插入方式略有不同(博客园需要先在后台选项中开启插入数学公式选项): 代码 行内公式 整行公式 博客园 $数学公式$ $ ...

  4. 有道笔记链接地址 -----关于python

    一.python相关 python列表的操作[list[]]:     http://note.youdao.com/noteshare?id=93922f3174b1d8fac04514064656 ...

  5. linux shell脚本编程笔记(四): 获取字符串长度的七种方法

    获取字符串长度的七种方法 1. \${#str} 2.awk的length 备注:1) 最好用{}来放置变量2) 也可以用length($0)来统计文件中每行的长度 3.awk的NF 备注: -F为分 ...

  6. Python any() 函数

    Python any() 函数  Python 内置函数 描述 any() 函数用于判断给定的可迭代参数 iterable 是否全部为 False,则返回 False,如果有一个为 True,则返回 ...

  7. 16.3Sum Closest (Two-Pointers)

    Given an array S of n integers, find three integers in S such that the sum is closest to a given num ...

  8. 查询测试程序中的selectOne和selectList函数

    selectOne查询一条记录,如果使用selectOne查询多条记录则抛出异常: org.apache.ibatis.exceptions.TooManyResultsException: Expe ...

  9. Dom4j入门

    一.Dom4j API生成xml文件 @Test public void bulidXmlByDom4j(){ //创建document对象 Document document = DocumentH ...

  10. 以json格式打印实体类信息

    1.pom.xml <dependency> <groupId>com.google.code.gson</groupId> <artifactId>g ...