当前位置:首页 > 开发 > Web前端 > 前端 > 正文

ztree异步加载

发表于: 2015-06-29   作者:3213213333332132   来源:转载   浏览:
摘要: 相信新手用ztree的时候,对异步加载会有些困惑,我开始的时候也是看了API花了些时间才搞定了异步加载,在这里分享给大家。 我后台代码生成的是json格式的数据,数据大家按各自的需求生成,这里只给出前端的代码。 设置setting,这里只关注async属性的配置 var setting = { //异步加载配置
相信新手用ztree的时候,对异步加载会有些困惑,我开始的时候也是看了API花了些时间才搞定了异步加载,在这里分享给大家。
我后台代码生成的是json格式的数据,数据大家按各自的需求生成,这里只给出前端的代码。

设置setting,这里只关注async属性的配置
            var setting = {
            	//异步加载配置	
            	async: {
            	        enable: true,
            	        url: top.basePath + '/pages/system/buildColumnTreeNodes.action?isAsynchronized=isAsynchronized',
            	        autoParam: ["objId"],
                        dataType: "json",
                        dataFilter: filter
            	},		
	            data: {
	                simpleData: {
	                    enable: true
	                }
	            },
	            callback:{
	               onClick:onClick
	            }
	        };

1、初始化数据
            //展示初始化树数据
            function showTree(){
            	jQuery.ajax({
                    type:'GET',
                    url:top.basePath + '/pages/system/buildColumnTreeNodes.action',
                    dataType:'json',
                    success:function(data){
                        var zNodes = data.model;
                        $.each(zNodes,function(key, val){
                        	if(val.haveNext)
                        	{
                        	   val.isParent = true;//isParent属性设置为true,才能作为父节点异步加载下一节点!
                        	}
                            if(val.level == 0)
                            {
                                val.open = true;
                                val.icon = '<%=path%>/plugins/ztree/css/zTreeStyle/img/diy/1_close.png';
                            }else{
                            	val.icon = '<%=path%>/plugins/ztree/css/zTreeStyle/img/diy/1_open.png';
                            }
                        });
                        var zTreeObj  = $.fn.zTree.init($("#columnTree"), setting, zNodes);
                    }
                });
            }

2、异步加载数据
每次点击父节点前的加号就会执行async属性中的url:top.basePath + '/pages/system/buildColumnTreeNodes.action?isAsynchronized=isAsynchronized'
请求后台获取数据

3、过滤数据
            //处理异步加载后返回的数据
            function filter(treeId, parentNode, responseData){
            	var zNodes = responseData.model;
            	$.each(zNodes,function(key, val){
                    if(val.haveNext)
                    {
                       val.isParent = true;//isParent属性设置为true,才能作为父类节点异步加载下一节点!
                    }
                    if(val.level == 0)
                    {
                        val.open = true;
                        val.icon = '<%=path%>/plugins/ztree/css/zTreeStyle/img/diy/1_close.png';
                    }else{
                        val.icon = '<%=path%>/plugins/ztree/css/zTreeStyle/img/diy/1_open.png';
                    }
                });
            	return zNodes;
            }

  • 代码中出现的一些属性是我根据自己的需要而设置的,大家只要了解异步加载的步骤和基本配置就可以了。

ztree异步加载

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
最近在写一个zTree 异步加载的小例子,纠结了两三天,终于给纠结出来了!现将经验及代码分享如下:
rails+coffeescript+zTree 1.新建rails项目Ztree(rails new Ztree) 2.gemfile中添加ztree的引用 #
本来要做一个文件目录浏览界面,需要遍历所有的文件和目录,很显然一次性读取时很费时费力的一件事
ztreedemo.jsp: <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <
ztreedemo.jsp: <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <
这是一个WebProject,关于用到的jar或js文件,详见代码注释 本文代码运行后,页面效果如下 下面是代
js代码: var curMenu = null, zTree_Menu = null; var setting = { async:{ autoParam:["menuid"],
首先提供Ztree官方网站http://www.ztree.me。 Ztree是一个使用jQuery实现的JSP页面的各种功能树,本
zTree相对讲有非常好的API文档,扩展性强,使用起来比较方便。本文章主要填补下网络上zTree例子太少
一、初始异步加载树 初始化默认给出一个根结点,再结合异步加载的方式手动触发默认加载第一层,如图
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号