异步加载树

/**
 * 构建行政区划树
 * @author frank
 *
 * @param divId divid
 * @param divWidth div宽度(例如:【"200px"】。)
 * @param divHeight div高度(例如:【"400px"】。)
 * @param loadDeep 区划树深度(例如:加载到盟市为【2】,加载到旗县为【3】,以此类推。)
 * @param callback 创建树后的回调函数
 */
function createAdmdivTree(divId,divWidth,divHeight,loadDeep,callback){
   
    //行政区划树
    var admdivTree = $('#'+divId);
    //一级区划数据
    var source = null;
    //下级区划数据
    var source1 = null;
    //行政区划url
    var admdivTreeUrl = ctx+'/application/socialSecurity/config/insure/getAdmdivByParentCode.do?format=json&sessionId='+sessionId;

    //首先请求根节点数据
    $.ajax({
        type: 'POST',
        dataType : 'json',
        url: admdivTreeUrl,
        success :function(data) {
            //构建临时子节点,name为‘查询中...’,value为根节点的区划code。
            for(var d in data){
                if(data[d].childcnt>0){
                    var arr  =
                    {
                        'parentcode' : data[d].code,
                        'name' : '查询中...'
                    }
                    data.push(arr);
                }
            }
            source = {
                datatype: "json",
                datafields: [
                    { name: 'id', map: 'code' },//区划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});
            if(callback){
                //选中根节点 或 将其展开 等 操作
                callback();
            }
            //当点击展开区划时执行以下代码(异步加载下级区划)
            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;
                //第一个下级区划(也就是如果有下级区划时默认加载一个名称为“查询中...”的临时子节点)
                var children = $element.find('ul:first').children();
                //判断是否有区划名称为'查询中...'的下级临时节点
                $.each(children, function () {
                    var item = admdivTree.jqxTree('getItem', this);
                    if (item && item.label == '查询中...') {
                        loaderItem = item;
                        loader = true;
                        return false
                    };
                });
                //根据父级区划code查询子节点
                if (loader) {
                    $.ajax({
                        type: "POST",
                        dataType : 'json',
                        url: admdivTreeUrl,
                        data: {
                            "parentCode":loaderItem.parentId//父级区划code
                        },
                        success :function(data) {
                            //显示到loadDeep层,即加载到loadDeep层时不为其添加name为‘查询中...’的子节点
                            if(data[0].levelno<loadDeep){
                                //构建临时子节点,name为‘查询中...’,value为节点的区划code。
                                for(var d in data){
                                    if(data[d].childcnt>0){
                                        var arr  =
                                        {
                                            'parentcode' : data[d].code,
                                            'value' : data[d].code,
                                            'name' : '查询中...'
                                        }
                                        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'}]);
                            //添加子节点
                            admdivTree.jqxTree('addTo', records1, $element[0]);
                            //删除临时节点
                            admdivTree.jqxTree('removeItem', loaderItem.element);
                        }
                    });
                }
            });
        }
    });
}
/**
 * 构建行政区划树 - 根据登陆用户所在行政区划构建
 * @author frank
 *
 * @param divId divid
 * @param divWidth div宽度(例如:【"200px"】。)
 * @param divHeight div高度(例如:【"400px"】。)
 * @param loadDeep 区划树深度(例如:加载到盟市为【2】,加载到旗县为【3】,以此类推。)
 * @param callback 创建树后的回调函数
 */
function createAdmdivTreeWithAuth(divId,divWidth,divHeight,loadDeep,callback){
   
    //行政区划树
    var admdivTree = $('#'+divId);
    //一级区划数据
    var source = null;
    //下级区划数据
    var source1 = null;
    //根节点url
    var admdivRootUrl = ctx+'/application/socialSecurity/config/insure/getAdmdivByParentCode.do?format=json&sessionId='+sessionId;
    //子节点url
    var admdivTreeWithAuthUrl = ctx+'/application/socialSecurity/config/insure/getAdmdivByParentCodeWithAuth.do?format=json&sessionId='+sessionId;

    //首先请求根节点数据
    $.ajax({
        type: 'POST',
        dataType : 'json',
        url: admdivRootUrl,
        success :function(data) {
            //构建临时子节点,name为‘查询中...’,value为根节点的区划code。
            for(var d in data){
                if(data[d].childcnt>0){
                    var arr  =
                    {
                        'parentcode' : data[d].code,
                        'name' : '查询中...'
                    }
                    data.push(arr);
                }
            }
            source = {
                datatype: "json",
                datafields: [
                    { name: 'id', map: 'code' },//区划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'});
            if(callback){
                //选中根节点 或 将其展开 等 操作
                callback();
            }
            //当点击展开区划时执行以下代码(异步加载下级区划)
            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;
                //第一个下级区划(也就是如果有下级区划时默认加载一个名称为“查询中...”的临时子节点)
                var children = $element.find('ul:first').children();
                //判断是否有区划名称为'查询中...'的下级临时节点
                $.each(children, function () {
                    var item = admdivTree.jqxTree('getItem', this);
                    if (item && item.label == '查询中...') {
                        loaderItem = item;
                        loader = true;
                        return false
                    };
                });
                //根据父级区划code查询子节点
                if (loader) {
                    $.ajax({
                        type: "POST",
                        dataType : 'json',
                        url: admdivTreeWithAuthUrl,
                        data: {
                            "parentCode":loaderItem.parentId//父级区划code
                        },
                        success :function(data) {
                            //显示到loadDeep层,即加载到loadDeep层时不为其添加name为‘查询中...’的子节点
                            if(data[0].levelno<loadDeep){
                                //构建临时子节点,name为‘查询中...’,value为节点的区划code。
                                for(var d in data){
                                    if(data[d].childcnt>0){
                                        var arr  =
                                        {
                                            'parentcode' : data[d].code,
                                            'value' : data[d].code,
                                            'name' : '查询中...'
                                        }
                                        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'}]);
                            //添加子节点
                            admdivTree.jqxTree('addTo', records1, $element[0]);
                            //删除临时节点
                            admdivTree.jqxTree('removeItem', loaderItem.element);
                        }
                    });
                }
            });
        }
    });
}

猜你喜欢

转载自geertu.iteye.com/blog/2346494