Question

我正在通过以下方式获取数据。

{  
   P3_WOStatusDescription:"Analysis",
   PlannedHours:"17",
   ConsumedHours:"12",
   RemainingHours:"5"
}
{  
   P3_WOStatusDescription:"Child Work Order_Illustration",
   PlannedHours:"",
   ConsumedHours:"",
   RemainingHours:""
}
{  
   P3_WOStatusDescription:"Closed",
   PlannedHours:"0",
   ConsumedHours:"0",
   RemainingHours:"0"
}
3:{  
   P3_WOStatusDescription:"Delivered",
   PlannedHours:"0",
   ConsumedHours:"0",
   RemainingHours:"0"
}
{  
   P3_WOStatusDescription:"Illustration Review",
   PlannedHours:"0",
   ConsumedHours:"0",
   RemainingHours:"0"
}
5:{  
   P3_WOStatusDescription:"Linguistic Review",
   PlannedHours:"18",
   ConsumedHours:"0",
   RemainingHours:"18"
}

我想以以下方式将数据绑定到表中

$.ajax({
    type: 'GET',
    url: P3Server + 'Dashboard/getBarChart?FromDate=' + date1 + '&ToDate=' + date2,
    success: function(data) {

        tableBody = "<tr>";
        for (var prop in data.Data) {
            tableBody = tableBody + "<th>" + data.Data[prop].P3_WOStatusDescription + "</th>";
            //columns.push(prop);
        }
        tableBody += "</tr>";

        tableBodyP = "<tr>";
        for (var prop in data.Data) {
            tableBodyP = tableBodyP + "<td>" + data.Data[prop].PlannedHours + "</td>";
            //columns.push(prop);
        }
        tableBodyP += "</tr>";

        tableBodyC = "<tr>";
        for (var prop in data.Data) {
            tableBodyC = tableBodyC + "<td>" + data.Data[prop].ConsumedHours + "</td>";
            //columns.push(prop);
        }
        tableBodyC += "</tr>";

        tableBodyR = "<tr>";
        for (var prop in data.Data) {
            tableBodyR = tableBodyR + "<td>" + data.Data[prop].RemainingHours + "</td>";
            //columns.push(prop);
        }
        tableBodyR += "</tr>";
        $('#data-table thead').val(tableBody);
        $('#data-table tbody').val(tableBodyP);
        $('#data-table tbody').val(tableBodyC);
        $('#data-table tbody').val(tableBodyR);

        //createGraph('#data-table', '.chart');


    },
    error: function(data) {
        showMsg(data.Status, true, 'Error');
    }
})

我的HTML是

<div class = "chart" >
   <table id = "data-table"
      border = "1"
      cellpadding = "10"
      cellspacing = "0" >
      <thead > </thead>
      <tbody > </tbody>
   </table>
</div>

如何动态绑定

Answer 1

使用$（'＃data-table tbody'）。html（tableBody + tableBodyP + tableBodyC + tableBodyR）;并删除那些$（'＃data-table thead'）。val ...行。

$.ajax({
  type: 'GET',
  url: P3Server + 'Dashboard/getBarChart?FromDate=' + date1 + '&ToDate=' + date2,
  success: function(data) {

    tableBody = "<tr>";
    for (var prop in data.Data) {
      tableBody = tableBody + "<th>" + data.Data[prop].P3_WOStatusDescription + "</th>";
      //columns.push(prop);
    }
    tableBody += "</tr>";

    tableBodyP = "<tr>";
    for (var prop in data.Data) {
      tableBodyP = tableBodyP + "<td>" + data.Data[prop].PlannedHours + "</td>";
      //columns.push(prop);
    }
    tableBodyP += "</tr>";

    tableBodyC = "<tr>";
    for (var prop in data.Data) {
      tableBodyC = tableBodyC + "<td>" + data.Data[prop].ConsumedHours + "</td>";
      //columns.push(prop);
    }
    tableBodyC += "</tr>";

    tableBodyR = "<tr>";
    for (var prop in data.Data) {
      tableBodyR = tableBodyR + "<td>" + data.Data[prop].RemainingHours + "</td>";
      //columns.push(prop);
    }
    tableBodyR += "</tr>";

    $('#data-table tbody').html(tableBody + tableBodyP + tableBodyC + tableBodyR);
    //createGraph('#data-table', '.chart');

  },
  error: function(data) {
    showMsg(data.Status, true, 'Error');
  }
})

如何将数据绑定到表以将行转换为列？

1 个答案: