load tree asynchronously

/**
 * Build administrative division tree
 * @author frank
 *
 * @param divId divid
 * @param divWidth div width (for example: ["200px"].)
 * @param divHeight div height (for example: ["400px"].)
 * @param loadDeep The depth of the division tree (for example: [2] when loaded into a league city, [3] when loaded into a banner county, and so on.)
 * @param callback The callback function after the tree is created
 */
function createAdmdivTree(divId, divWidth,divHeight,loadDeep,callback){
   
    //Administrative division tree
    var admdivTree = $('#'+divId);
    //First-level division data
    var source = null;
    //Subordinate division data
    var source1 = null;
    //Administrative division Division url
    var admdivTreeUrl = ctx+'/application/socialSecurity/config/insure/getAdmdivByParentCode.do?format=json&sessionId='+sessionId;

    //First request root node data
    $.ajax({
        type: 'POST',
        dataType : 'json',
        url: admdivTreeUrl,
        success :function(data) {
            //Build a temporary child node, the name is 'in query...', and the value is the division code of the root node.
            for(var d in data){
                if(data[d].childcnt>0){
                    var arr =
                    {
                        'parentcode' : data[d].code,
                        'name' : 'Querying...'
                    }
                    data.push (arr);
                }
            }
            source = {
                datatype: "json",
                datafields: [
                    { name: 'id', map:
                    { name: 'parentId', map: 'parentcode' },//parent division code
                    { name: 'name', map: 'name' }// division name
                ],
                id: 'id',
                localdata: data
            };
            / /Generate division tree
            var dataAdapter = new $.jqx.dataAdapter(source);
            dataAdapter.dataBind();
            var records = dataAdapter.getRecordsHierarchy('id', 'parentId', 'items', [{ name: 'name', map: 'label'}]);
            admdivTree.jqxTree({ source: records, width: divWidth, height: divHeight});
            if(callback){
                //Select the root node or expand it
                callback();
            }
            //Execute the following code when the expansion area is clicked (load the subordinate area asynchronously)
            admdivTree.on('expand', function (event) {
                var label = admdivTree.jqxTree('getItem', event.args.element).label;
                var $element = $(event.args.element);
                var loader = false;
                var loaderItem = null;
                //The first sub-division (that is, if there is a sub-division, a file named "Querying..." will be loaded by default Temporary child nodes)
                var children = $element.find('ul:first').children();
                //Determine whether there is a subordinate temporary node with the division name 'in query...'
                $.each(children, function ( ) {
                    var item = admdivTree.jqxTree('getItem', this);
                    if (item && item.label == 'Querying...') {
                        loaderItem = item;
                        loader = true;
                        return false
                    };
                });
                //Query child nodes according to parent division code
                if (loader) {
                    $.ajax({
                        type: "POST",
                        dataType : 'json',
                        url: admdivTreeUrl,
                        data: {
                            "parentCode":loaderItem.parentId//Parent division code
                        },
                        success :function(data) {
                            //Display to the loadDeep layer, that is, when loading to the loadDeep layer, do not add a child named 'in query...' Node
                            if(data[0].levelno<loadDeep){
                                //Build a temporary child node, the name is 'querying...', and the value is the zoning code of the node.
                                for(var d in data){
                                    if(data[d].childcnt>0){
                                        var arr =
                                        {
                                            'parentcode' : data[d].code,
                                            'value' : data[d].code,
                                            'name' : 'Querying...'
                                        }
                                        data.push(arr);
                                    }
                                }
                            }
                            source1 = {
                                datatype: "json",
                                datafields: [
                                    { name: 'id', map: 'code' },
                                    { name: 'parentId',map: 'parentcode' },
                                    { name: 'name',map: 'name'  }
                                ],
                                id: 'id',
                                localdata: data
                            };
                            var dataAdapter = new $.jqx.dataAdapter(source1);
                            dataAdapter.dataBind();
].  ) * @param divHeight div height (eg: ["400px"].)


















 * @param loadDeep The depth of the division tree (for example: [2] when loaded into a league city, [3] when loaded into a banner county, and so on.)
 * @param callback The callback function after creating the tree
 */
function createAdmdivTreeWithAuth(divId, divWidth,divHeight,loadDeep,callback){
   
    //administrative division tree
    var admdivTree = $('#'+divId);
    //first division data
    var source = null;
    //subordinate division data
    var source1 = null;
    //root Node url
    var admdivRootUrl = ctx+'/application/socialSecurity/config/insure/getAdmdivByParentCode.do?format=json&sessionId='+sessionId;
    //child node url
    var admdivTreeWithAuthUrl = ctx+'/application/socialSecurity/config/insure/getAdmdivByParentCodeWithAuth.do ?format=json&sessionId='+sessionId;

    //First request root node data
    $.ajax({
        type: 'POST',
        dataType : 'json',
        url: admdivRootUrl,
        success :function(data) {
            //Build a temporary child node, the name is 'in query...', and the value is the division code of the root node.
            for(var d in data){
                if(data[d].childcnt>0){
                    var arr =
                    {
                        'parentcode' : data[d].code,
                        'name' : 'Querying...'
                    }
                    data.push (arr);
                }
            }
            source = {
                datatype: "json",
                datafields: [
                    { name: 'id', map: 'code' },//Division code
                    { name: 'parentId', map: 'parentcode' },//父区划code
                    { name: 'name', map: 'name' }//区划名称
                ],
                id: 'id',
                localdata: data
            };
            //生成区划树
            var dataAdapter = new $.jqx.dataAdapter(source);
            dataAdapter.dataBind();
            var records = dataAdapter.getRecordsHierarchy('id', 'parentId', 'items', [{ name: 'name', map: 'label'}]);
            admdivTree.jqxTree({ source: records, width: divWidth, height: divHeight, theme : 'summer'});            }                callback();                //Select the root node or expand it
            if(callback){



            //Execute the following code when the expansion area is clicked (load the subordinate area asynchronously)
            admdivTree.on('expand', function (event) {
                var label = admdivTree.jqxTree('getItem', event.args.element).label;
                var $element = $(event.args.element);
                var loader = false;
                var loaderItem = null;
                //The first sub-division (that is, if there is a sub-division, a file named "Querying..." will be loaded by default Temporary child nodes)
                var children = $element.find('ul:first').children();
                //Determine whether there is a subordinate temporary node with the division name 'in query...'
                $.each(children, function ( ) {
                    var item = admdivTree.jqxTree('getItem', this);
                    if (item && item.label == 'Querying...') {
                        loaderItem = item;
                        loader = true;
                        return false
                    };
                });
                //Query child nodes according to parent division code
                if (loader) {
                    $.ajax({
                        type: "POST",
                        dataType : 'json',
                        url: admdivTreeWithAuthUrl,
                        data: {
                            "parentCode":loaderItem.parentId//Parent division code
                        },
                        success :function(data) {
                            //Display to the loadDeep layer, that is, when loading to the loadDeep layer, do not add a child named 'in query...' Node
                            if(data[0].levelno<loadDeep){
                                //Build a temporary child node, the name is 'querying...', and the value is the zoning code of the node.
                                for(var d in data){
                                    if(data[d].childcnt>0){
                                        var arr =
                                        {
                                            'parentcode' : data[d].code,
                                            'value' : data[d].code,
                                            'name' : 'Querying...'
                                        }
                                        data.push(arr);
                                    }
                                }
                            }
                            source1 = {
                                datatype: "json",
                                datafields: [
                                    { name: 'id', map: 'code' },
                                    { name: 'parentId',map: 'parentcode' },
                                    { name: 'name',map: 'name'  }
                                ],
                                id: 'id',
                                localdata: data
                            };
                            var dataAdapter = new $.jqx.dataAdapter(source1);
                            dataAdapter.dataBind();
                            var records1 = dataAdapter.getRecordsHierarchy('id', 'parentId', 'items', [{ name: 'name', map: 'label'}]);
                            //Add child node
                            admdivTree.jqxTree('addTo', records1 , $element[0]);
                            //delete temporary node
                            admdivTree.jqxTree('removeItem', loaderItem.element);
                        }
                    });
                }
            });
        }
    });
}