界面异步加载tree(固定的两级节点)

function createProjectTree(divId,divWidth,divHeight,callback){
 //行政区划树
  var proTplTree = $('#'+divId);
 //一级区划数据
 var source = null;
 //下级区划数据
 var source1 = null;
 
  //根节点url
 var rootUrl = ctx + "/application/fspi/pro/getProTplsTree.do?sessionId=" + sessionId+ "&format=json";
 //首先请求根节点数据DIC_ADMDIV
    $.ajax({
  type: 'POST',
        dataType : 'json',
        url: rootUrl,
        success :function(data) {
         source = {
             datatype: "json",
                datafields: [
                 { name: 'id' },
                 { name: 'parentId' },
                 { name: 'items' },
                 { name: 'label' }
                ],
                id: 'id',
                localdata: data
   };
            //生成区划树
            var dataAdapter = new $.jqx.dataAdapter(source);
            dataAdapter.dataBind();
            var records = dataAdapter.getRecordsHierarchy('id', 'parentId', 'items', [{ name: 'label', map: 'label'}]);
            proTplTree.jqxTree({ source: records, width: divWidth, height: divHeight});
            if(callback){
             //选中根节点 或 将其展开 等 操作
             callback();
            }else{
             //1、点击父节点的时候置灰操作
                $("#byfTopNav_1").byfButtonSwitch([
                    1, 2, 3, 4, 5, 6, 7, 8, 9
                ]);
                //初始化选中第一个项目节点
                $('#projectTree').jqxTree('selectItem', $("#projectTree").find('li:first')[0]);
            }
   //当点击展开区划时执行以下代码(异步加载下级区划)
            proTplTree.on('expand', function (event) {
             var label = proTplTree.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 = proTplTree.jqxTree('getItem', this);
                    if (item && item.label == '查询中...') {
                     loaderItem = item;
                        loader = true;
                        return false
     };
                });
                //根据父级区划code查询子节点
                if (loader) {
                 $.ajax({
                     type: "POST",
                     dataType : 'json',
                        url: rootUrl,
                        data: {
                         "parentId":loaderItem.parentId//父级区划code
                        },
                        success :function(data) {
                         if(data.length>0){
                          source1 = {
                                     datatype: "json",
                                     datafields: [
                                         { name: 'id'},
                                         { name: 'parentId' },
                                         { name: 'label'  }
                                     ],
                                     id: 'id',
                                     localdata: data
            };
            var dataAdapter = new $.jqx.dataAdapter(source1);
                                 dataAdapter.dataBind();
                                 var records1 = dataAdapter.getRecordsHierarchy('id', 'parentId', 'items', [{ name: 'label', map: 'label'}]);
                                 //添加子节点
            proTplTree.jqxTree('addTo', records1, $element[0]);
            //删除临时节点
            proTplTree.jqxTree('removeItem', loaderItem.element);
                         }else{
                          //删除临时节点
        proTplTree.jqxTree('removeItem', loaderItem.element);
                         }
                         
      }
     });
    }
   });
  }
 });
}

猜你喜欢

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