当前位置:首页 > 开发 > 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

    震惊

    震惊

版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号