如何将嵌套表添加到datatable？ [英] How to add nested table to datatable?

问题描述

我需要将一个嵌套表添加到jquery数据表的每一行（使用旧数据表）。所以，我尝试使用

解决方案

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

  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 = []; 
 //这个下一行是我获取指数的地方... 
 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>+值。 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; 
} 
} 
 
 
函数setTableRow（rowVals，ndx）{
 var outerTbl = $（'＃gridTbl'）。DataTable（）; 
 var tr = $（＃gridTbl> tbody> tr：eq（+ ndx +））; 
 //注意我如何添加行，然后在行中添加新表。 
 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>处理< / td>+ 
< td> Wood< / td>< td> NEED NAME< / td>< td>其他< / td>< td>杂项< ; / td>< td>总计< / td>< / tr>+ 
 rowVals +< / td>< / tr>; 
 tr.after（innerTbl）.show（）; 
 
 
} 
  

I need to add a nested table to each row of a jquery datatable(using legacy datatables). So, I tried using example from datatables.net for child rows and modifying it to my needs as I need for the child rows to show at all times, rather than on clicking the parent row.Here is the code I am using both to build my inner table and then display it..

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);

But, I am not getting what I need to get. What it looks like is that the datatables adds a new row and then sets the new table inside the first cell on new row. However, when I view source, that isn't what is happening at all. It closes the previous row and then inserts new table... I am attaching a screenshot. What I need is for the details to show below the main item rows and to be aligned in same way. Any help in where I am wrong will be greatly appreciated.

解决方案

Ok... Finally figured this out. In order to make the view show normally, I had to add a new row to the datatable and then, in side that row, add my new table. However, this caused an indexing issue with the table. So, I had to check the index each time before I added new row. I am posting working code in the hope that it will help someone else.

    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？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！