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

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