Question

我正在使用数据表，我想用动态列填充表。这些列将根据“订单”属性显示。通过属性“ Id_Col”将行映射到列，并且“ RowIdx”对应于行的索引。我想填充数据表选项：“列”和“数据” 我的json对象如下：

我希望得到您的帮助。预先谢谢你！

{
    "Col": [
        {
            "Id_Col": 1,
            "Col_Name": "Col 1",
            "Order": 1
        },
        {
            "Id_Col": 2,
            "Col_Name": "Col 2",
            "Order": 2
        },
        {
            "Id_Col": 3,
            "Col_Name": "Col 3",
            "Order": 3
        },
        {
            "Id_Col": 4,
            "Col_Name": "Col 4",
            "Order": 4
        }
    ],
    "Row": [
        {
            "Id_Col": 1,
            "RowIdex": 1,
            "Val": "Row 1 col 1"
        },
        {
            "Id_Col": 2,
            "RowIdex": 1,
            "Val": "Row 1 col 2"
        },
        {
            "Id_Col": 3,
            "RowIdex": 1,
            "Val": "Row 1 col 3"
        },
        {
            "Id_Col": 4,
            "RowIdex": 1,
            "Val": "Row 1 col 4"
        },
        {
            "Id_Col": 1,
            "RowIdex": 2,
            "Val": "Row 2 col 1"
        },
        {
            "Id_Col": 2,
            "RowIdex": 2,
            "Val": "Row 2 col 2"
        },
        {
            "Id_Col": 3,
            "RowIdex": 2,
            "Val": "Row 2 col 3"
        },
        {
            "Id_Col": 4,
            "RowIdex": 2,
            "Val": "Row 3 col 4"
        },
        {
            "Id_Col": 1,
            "RowIdex": 3,
            "Val": "Row 3 col 1"
        },
        {
            "Id_Col": 2,
            "RowIdex": 3,
            "Val": "Row 3 col 1"
        },
        {
            "Id_Col": 3,
            "RowIdex": 3,
            "Val": "Row 3 col 2"
        },
        {
            "Id_Col": 4,
            "RowIdex": 3,
            "Val": "Row 3 col 3"
        }
    ]
}

Answer 1

如果var audio = new Audio("FILE 1"); audio.play(); audio.addEventListener('ended',function(){ audio = new Audio("FILE 2"); audio.id = "stream"; audio.load(); audio.play(); //alert("it should be playing"); });是列位置，而Order是列引用，我们可以映射这些Col和Row对象进行重新排序和重新构造，以满足Datatable对象/数组的源代码。

您可以在这里参考： https://datatables.net/examples/data_sources/js_array.html

可以在下面的示例演示中随意运行：

Id_Col

var rawdata = { Col:
   [ { Id_Col: 1, Col_Name: 'Col 1', Order: 5 },
     { Id_Col: 5, Col_Name: 'Col 5', Order: 1 },
     { Id_Col: 2, Col_Name: 'Col 2', Order: 2 },
     { Id_Col: 3, Col_Name: 'Col 3', Order: 3 },
     { Id_Col: 4, Col_Name: 'Col 4', Order: 4 } ],
  Row:
   [ { Id_Col: 1, RowIdex: 1, Val: 'Row 1 col 1' },
     { Id_Col: 2, RowIdex: 1, Val: 'Row 1 col 2' },
     { Id_Col: 3, RowIdex: 1, Val: 'Row 1 col 3' },
     { Id_Col: 4, RowIdex: 1, Val: 'Row 1 col 4' },
     { Id_Col: 1, RowIdex: 2, Val: 'Row 2 col 1' },
     { Id_Col: 2, RowIdex: 2, Val: 'Row 2 col 2' },
     { Id_Col: 3, RowIdex: 2, Val: 'Row 2 col 3' },
     { Id_Col: 4, RowIdex: 2, Val: 'Row 3 col 4' },
     { Id_Col: 1, RowIdex: 3, Val: 'Row 3 col 1' },
     { Id_Col: 2, RowIdex: 3, Val: 'Row 3 col 1' },
     { Id_Col: 3, RowIdex: 3, Val: 'Row 3 col 2' },
     { Id_Col: 4, RowIdex: 3, Val: 'Row 3 col 3' },
     { Id_Col: 5, RowIdex: 1, Val: 'Row 1 col 5' },
     { Id_Col: 5, RowIdex: 2, Val: 'Row 2 col 5' },
     { Id_Col: 5, RowIdex: 3, Val: 'Row 3 col 5' }
   ] };

var newCol=[];
var newData=[];
var colId_to_OrderIndex=[];

for (var i = 0; i < rawdata.Col.length; i++){
   var ColOrderIndex = rawdata.Col[i].Order-1;
   var ColId = rawdata.Col[i].Id_Col;
   var ColName = rawdata.Col[i].Col_Name;

    newCol[ColOrderIndex] = {
      "title" : ColName
    };

    colId_to_OrderIndex[ColId] = ColOrderIndex;
}

for (var i = 0; i < rawdata.Row.length; i++){
    var RowOrderIndex = rawdata.Row[i].RowIdex-1;
    var RowColId = rawdata.Row[i].Id_Col;
    var ColVal = rawdata.Row[i].Val;
    var MapColId = colId_to_OrderIndex[RowColId];
    
    if(newData[RowOrderIndex]===undefined){
      newData[RowOrderIndex]=[];
    }
    
    newData[RowOrderIndex][MapColId]= ColVal;
}

console.log(rawdata);
console.log(newCol);
console.log(newData);

$(document).ready(function() {
    $('#example').DataTable( {
        data: newData,
        columns: newCol
    } );
} );

用动态列填充jquery数据表

1 个答案: