现在位置首页 / 项目实战 /正文

Ztree教程-采用Jquery Ajax异步加载数据和Ztree自带异步加载数据

作者: IT小兵 | 2014年5月5日| 热度:℃ | 评论: |参与:

在上一篇[Ztree教程-asp.net下代码部署及服务端获取数据的例子]中,我们学会了简单加载json数据的例子。

今天我们来学习Ztree异步加载数据的。我测试的全国城市数据有大概3900条。

我测试了一下Jquery 自带的$.ajax方法和Ztree的setting的async参数,性能上毫秒级别的,但是Ztree的setting的async参数性能上更好一些。

如图:

Ztree的setting的async参数说明:

autoParam:异步加载时需要自动提交父节点属性的参数。[setting.async.enable = true 时生效]

默认值:[ ]. 这个提交是ztree自带的一个属性的参数。记住。

contentType:和jquery contentType的一样

dataFilter:数据过滤函数,可以不要

dataType:和jquery dataType的一样

enable:是否异步。true 表示 开启 异步加载模式

false 表示 关闭 异步加载模式

如果设置为 true,请务必设置 setting.async 内的其它参数。

如果需要根节点也异步加载,初始化时 treeNodes 参数设置为 null 即可。


otherParam:这个是我们可以自定义的参数了。直接用 JSON 格式制作键值对,例如:{ key1:value1, key2:value2 }   otherParam: {  "oper":"city" } 

type:和jquery type的一样

url:服务地址。设置固定的异步加载 url 字符串,请注意地址的路径,确保页面能正常加载。

url 内也可以带参数,这些参数就只能是通过 get 方式提交了,并且请注意进行转码

一些jquery的参数可以参考:[jquery $.ajax()实现Post数据到服务端]


我是使用了时间戳做了一下对比:

    var begin = (new Date()).valueOf(); ;;
    $("#beginztree").html(begin);
    $.fn.zTree.init($("#treeDemoztree"), setting);
    var endztree = (new Date()).valueOf(); ;;
    $("#endztree").html(endztree-begin);

本次测试仅代表我当前环境的。


上代码:

var AjaxUrl = "service/Cityhandler.ashx"; 

 

 


 

    $(document).ready(function () {

        $('#tab-container').easytabs(); GetCityZtree();

        GetCity();

  

    

});


//获取测试类型统计数据

function GetCity() {

    var begin = (new Date()).valueOf(); ;;

    $("#begin").html(begin);

    $.ajax({

        type: "post",

        dataType: "json", traditional: true,

        data: { oper: "city" },

        url: AjaxUrl,

        async: true,//表示同步执行

        success: function (data, textStatus) {

            if (data != null) {

                 

                $.fn.zTree.init($("#treeDemo"), setting, data);

                var end = (new Date()).valueOf(); ;;

                $("#end").html(end - begin);

            }

        },

        complete: function (XMLHttpRequest, textStatus) { },

        error: function (e) {


             

            alert("获取测试类型统计数据失败,请刷新页面重新加载!");

        }

    });

}

var setting = {

    async: {

        enable: true,

        url: AjaxUrl,

        autoParam: [ ["id"],["zid"] ],

        otherParam: {  "oper":"city" } 

    }

};


function filter(treeId, parentNode, childNodes) {

    if (!childNodes) return null;

    for (var i = 0, l = childNodes.length; i < l; i++) {

        childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');

    }

    return childNodes;

}

//获取测试类型统计数据

function GetCityZtree() {

    var begin = (new Date()).valueOf(); ;;

    $("#beginztree").html(begin);

    $.fn.zTree.init($("#treeDemoztree"), setting);

    var endztree = (new Date()).valueOf(); ;;

    $("#endztree").html(endztree-begin);

}


推荐给大家几本书:

锋利的jQuery(第2版)单东林 张晓菲 魏然jQuery技术 前端开发


精通JavaScript+jQuery(附光盘)






点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询