时间戳

首页 > 解决方案 > 在 Tabulator 中动态加载子节点

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 并且每次更新后都会重新绘制表格，因此我无法查看子节点并卡在根节点上。无论如何要执行此操作吗？提前致谢！

标签： javascripttabulator

解决方案

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

加载数据时，您需要在表中包含子行

推荐阅读