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. VS Code 界面语言设置

    首先Ctrl+shift+p打开命令面板. 输入配置显示语言 回车 更改locale即可更改页面显语言(更改后需重启软件). 目前支持如下语言 Display Language Locale Engl ...

  2. Html生成控件

    HtmlHelper:获取或设置 System.Web.Mvc.HtmlHelper 对象,该对象用于呈现 HTML 元素. 以下是Html的写法与生成的结果的对比 @Html.Label(" ...

  3. 新手C#int.Parse、int.TryParse的学习2018.08.04

    int.Parse()用于将字符串转换为32为int类型,但是在遇到非数字或者类似1.545这种小数的时候会报错,后来采用了int.TryParse,这个在转换后会判断是否可以正常转换,若不能,会返回 ...

  4. push和pop指令的使用

  5. etcd 命令行

    比较重要的配置 -name 节点名称,默认是UUID-data-dir 保存日志和快照的目录,默认为当前工作目录-addr 公布的ip地址和端口. 默认为127.0.0.1:2379-bind-add ...

  6. 解决opacity属性在低版本IE浏览器下失效的方法

    以前,一直都以为ie9以下的版本不支持opacity属性.所以就同时使用 opacity和ie独特的filter蒙版.但是有些时候需要一些动态的效果,就比如层的渐渐消失,隐藏,就需要使用动态变化的op ...

  7. 回答了这四个问题,你就可以打造最佳App首页

    如果把手机APP比作人的话,首页就是脸面了.首页是一款产品的大门,好的开头就是成功的一半. 调查表示,26%的手机APP的平均使用次数只有一次.对首次使用产品的用户而言,首页的好坏关乎到用户对该产品的 ...

  8. [GO]redis的连接

    package main import ( "github.com/garyburd/redigo/redis" "fmt" ) var pool *redis ...

  9. linux每天一小步---awk命令详解

    1 命令功能 awk是linux环境下的一个强大的文本工具,由于awk天生提供对文件中文本分列进行处理,所以如果一个文件中的每行都被特定的分隔符(默认为空格)隔开,我们就可以将这个文件看成是有很多列的 ...

  10. (字符串) Hidden String -- HDU -- 5311

    链接: http://acm.hdu.edu.cn/showproblem.php?pid=5311 Time Limit: 2000/1000 MS (Java/Others)    Memory ...