Jquery Ajax asynchronously loads data and Ztree comes with asynchronously loads data

Source: Internet
Author: User
Tags json
Today we will learn how to load data asynchronously on Ztree. I tested about 3900 data entries in cities nationwide.
 
I tested the $. ajax method that comes with Jquery and the async parameter of Ztree setting. The performance is millisecond-level, but the async parameter performance of Ztree setting is better.
As shown in the following figure:
Description of async parameters of Ztree setting:
AutoParam: the parameters of the parent node attributes must be automatically submitted during asynchronous loading. [Setting. async. enable = true]
Default value: []. This submission is an attribute parameter of ztree. Remember.
ContentType: same as jquery contentType
DataFilter: data filtering function.
DataType: same as jquery dataType
Enable: asynchronous or not. True indicates that the asynchronous loading mode is enabled.
False indicates that the asynchronous loading mode is disabled.
If this parameter is set to true, you must set other parameters in setting. async.
If the root node needs to be asynchronously loaded, set the treeNodes parameter to null during initialization.
 
OtherParam: this is a custom parameter. Directly Create a key-value pair in JSON format, for example: {key1: value1, key2: value2} otherParam: {"Hangzhou": "city "}
Type: the same as jquery type
Url: service address. Set a fixed url string to be loaded asynchronously. Pay attention to the address path to ensure that the page can be loaded normally.
Parameters can also be included in the url. These parameters can only be submitted in get mode.
For some jquery parameters, refer to [jquery $. ajax () to implement Post data to the server]
 
 
I used the timestamp for comparison:

 

The code is as follows:
  
Var
 
Begin = (
New
 
Date (). valueOf ();;;
   
$ (
"# Beginztree"
).Html (begin );
   
$. Fn. zTree. init ($ (
"# Treedemo-tree"
), Setting );
   
Var
 
Endztree = (
New
 
Date (). valueOf ();;;
   
$ (
"# Endztree"
Pai.html (endztree-begin );

This test only represents my current environment.

 

Code:

The code is as follows:

Var AjaxUrl = "service/Cityhandler. ashx ";

$ (Document). ready (function (){

$ ('# Tab-INER'). easytabs (); GetCityZtree ();

GetCity ();

});

 

// Obtain Test type statistics

Function GetCity (){

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

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

$. Ajax ({

Type: "post ",

DataType: "json", traditional: true,

Data: {region: "city "},

Url: AjaxUrl,

Async: true, // synchronous execution

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 ("failed to get the test type statistics. Please refresh the page and reload it! ");

        }

});

}

Var setting = {

Async :{

Enable: true,

Url: AjaxUrl,

AutoParam: [["id"], ["zid"],

OtherParam: {"province": "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;

}

// Obtain Test type statistics

Function GetCityZtree (){

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

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

$. Fn. zTree. init ($ ("# treedemo-tree"), setting );

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

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

}

From: http://www.suchso.com/projecteactual/ztree-jiaocheng-aspnet-demo-ashx-jquery-ajax-ztree-setting-async.html thanks to the webmaster

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.