在Tabulator中动态加载子节点

时间:2019-02-11 10:43:20

标签: javascript tabulator

var table = new Tabulator("#view360-table", {
    width:"100%",
    dataTree:true,
    layout:"fitDataFill",
rowContext:function(e, row){
    //e - the click event object
    //row - row component
    alert(row.getIndex());
    },
    dataTreeStartExpanded:false,
    ajaxURL:"http://localhost/JSONNew/rum.json?v="+Math.floor(Math.random()*100000),
    ajaxError:function(xhr, textStatus, errorThrown){
    alert("Sorry Error Loading The Table!");
    },
     dataTreeRowExpanded:function(row, level){
        var index= row.getIndex();
    $.get("http://localhost/JSONNew/id_"+index+".json", function(data, status){        
     var obj = JSON.parse(data);
     alert(data);
      row.update({_children:obj});
    },"text");
    },
    columns:[
    {title:"Name", field:"name", width:200, responsive:0}, 
    {title:"Status", field:"status", align:"center",formatter:"tickCross",formatterParams:{allowEmpty:true},width:150, responsive:0},
    {title:"Acknowledge", field:"ack", align:"center",formatter:"tickCross",formatterParams:{allowEmpty:true}, width:150, responsive:0},
    {title:"Application",columns:[{title:"Application Performance",field:"apperf",formatterParams:{allowEmpty:true} ,align:"center",formatter:"tickCross",width:100,responsive:0}
    ,{title:"Application Availablity", align:"center",formatter:"tickCross",formatterParams:{allowEmpty:true},field:"appavail",width:100,responsive:0}]},
    {title:"Last Status Change",align:"center", field:"statchange", width:200, sorter:"datetime",sorterParams:{allowEmpty:true,format:"DD-MM-YYYY hh.mm AM/PM", alignEmptyValues:"top",},responsive:2},
    ],
}); 

每次树扩展时,我想从URL加载子节点。但是,由于dataTreeStartExpanded设置为false并且每次更新后都会重新绘制表,所以我无法查看子代并卡在根节点上,仍然可以执行此操作吗? 预先感谢!

1 个答案:

答案 0 :(得分:0)

数据树扩展不是异步的,因此当用户扩展树时将无法加载子级,因为它不会在显示子行之前等待ajax请求返回。此外,扩展元素仅针对首先具有子级的行显示。

在其中加载数据时,您需要在表中包括子行