Question

我需要将一个嵌套表添加到jquery数据表的每一行（使用旧数据表）。因此，我尝试将example from datatables.net用于子行并将其修改为我的需要，因为我需要始终显示子行，而不是单击父行。这是我用来构建的代码我的内部表然后显示它..

function buildInnerTable(){
var keys = Object.keys(reportApp.gridData),
    len = keys.length,
    j = 0,
    prop,
    value;
while (j < len) {
    prop = keys[j];
    value = reportApp.gridData[prop];
   detLen = value.detail.length;
   var rowVals = [];
    for(var i = 0; i < detLen; i++){
         tmpRow = "<tr><td>"+value.detail[i].invtid+"</td>"+
                "<td>"+value.detail[i].bf+"</td>"+
                "<td>"+value.detail[i].qtyship+"</td>"+  
                "<td>"+value.detail[i].ordqty+"</td>"+  
                "<td>"+value.detail[i].bf+"</td>"+
                "<td>"+value.detail[i].exttreating+"</td>"+  
                "<td>"+value.detail[i].extpriceinvc+"</td>"+  
                "<td>"+value.detail[i].misc+"</td>"+ 
                "<td>"+value.detail[i].extother+"</td>"+
                "<td>"+value.detail[i].calcext+"</td></tr>";
        rowVals.push(tmpRow);

    }
    setTableRow(rowVals , j);
    j += 1;
}


function setTableRow(rowVals , ndx){

              $("#gridTbl > tbody > tr:eq("+ ndx+ ")").after("<table><tr><th>InvtID</th>"+
                      "<th>Clss</th><th>Pieces</th><th>BilQty</th><th>BF</th><th>Treating</th>"+
                      "<th>Wood</th><th>NEED NAME</th><th>Other</th><th>Misc</th><th>Total</th></tr>"+
                      rowVals);

但是，我没有得到我需要的东西。它看起来像是数据表添加一个新行，然后在新行的第一个单元格内设置新表。但是，当我查看源代码时，根本不会发生什么。它关闭上一行，然后插入新表... 我附上了截图。我需要的是细节显示在主项目行下面并以相同的方式对齐。任何有关我错误的帮助都将不胜感激。

Answer 1

好的......终于想通了。为了使视图正常显示，我不得不在数据表中添加一个新行，然后在该行的一侧添加我的新表。但是，这会导致表格出现索引问题。因此，每次添加新行之前，我都必须检查索引。我发布工作代码，希望它能帮助别人。

    function buildInnerTable(){
    var keys = Object.keys(reportApp.gridData),
    len = keys.length,
    j = 0,
    prop,
    value;
while (j < len) {
    prop = keys[j];
    value = reportApp.gridData[prop]; 
   detLen = value.detail.length;
   var rowVals = [];
//THIS NEXT LINE IS WHERE I GET MY INDEX...
   var ndx = ($("tr:contains("+value.invcnbr+ ")").index());
    for(var i = 0; i < detLen; i++){
         tmpRow = "<tr><td>"+value.detail[i].invtid+"</td>"+
                "<td>"+value.detail[i].bf+"</td>"+
                "<td>"+value.detail[i].qtyship+"</td>"+  
                "<td>"+value.detail[i].ordqty+"</td>"+  
                "<td>"+value.detail[i].bf+"</td>"+
                "<td>"+value.detail[i].exttreating+"</td>"+   
                "<td>"+value.detail[i].extpriceinvc+"</td>"+  
                "<td>"+value.detail[i].misc+"</td>"+ 
                "<td>"+value.detail[i].extother+"</td>"+
                "<td>"+value.detail[i].calcext+"</td></tr>";
        rowVals.push(tmpRow);
    }

    setTableRow(rowVals,ndx);
   }
    j += 1;
  }
} 


function setTableRow(rowVals,ndx){
    var outerTbl = $('#gridTbl').DataTable();
    var tr = $("#gridTbl > tbody > tr:eq("+ ndx+ ")");
//NOTE HOW I ADD A ROW AND THEN ADD NEW TABLE TO CELL IN THE ROW.
   var innerTbl = "<tr><td colspan = 10><table style = 'background-     color:#FFFFFF; width:100%; border:1px solid;'><tr><td>InvtID</td>"+
                      "<td>Clss</td><td>Pieces</td><td>BilQty</td><td>BF</td><td>Treating</td>"+
                      "<td>Wood</td><td>NEED NAME</td><td>Other</td><td>Misc</td><td>Total</td></tr>"+
                      rowVals + "</td></tr>";
             tr.after(innerTbl).show();


}

如何将嵌套表添加到datatable？

1 个答案: