Knockout - 在HTML表格中顯示來自LINQ的樞軸數據

在我的代碼中，我調用了一個存儲過程。我希望結果（TaskName）中的一列的行值用作HTML表格列。Knockout - 在HTML表格中顯示來自LINQ的樞軸數據

代碼我目前已經在一個單元格中顯示了所有的pivoted數據。該樞紐在LINQ中完成，因爲實體框架不會讀取SQL存儲過程中的動態SQL查詢。

我可以控制下面的每個代碼段，以便更新任何內容。

這裏是存儲過程的輸出...

這就是我想要的HTML表格看...

如何顯示的數據在上面所需的格式？

這裏是LINQ查詢...

var records = from tr in _dbContext.Task_GetParentRecords().AsEnumerable() 
          group tr by tr.EntityCode 
          into grp 
          select new TaskRecordOverviewDTO() 
          { 
           EntityCode = grp.Key, 
           Tasks = grp.Select(t => t.TaskName), 
           StatusFlagName = grp.Select(t => t.OverallStatus) 
          };

下面是我的HTML，JavaScript和淘汰賽代碼...

var viewModel = function(data) { 
 
    var self = this; 
 
    
 
    // variables 
 
    self.taskRecordsTEST = ko.observableArray([ 
 
    { 
 
     "EntityCode": "DEMO", 
 
     "Tasks": [ 
 
      "Cash Process", 
 
      "Positions Process", 
 
      "Trades Process", 
 
      "Addendum Errors" 
 
     ], 
 
     "StatusFlagName": [ 
 
      "RED", 
 
      "RED", 
 
      "RED", 
 
      "ORANGE" 
 
     ] 
 
    }, 
 
    { 
 
     "EntityCode": "SP00", 
 
     "Tasks": [ 
 
      "Cash Process", 
 
      "Positions Process", 
 
      "Trades Process", 
 
      "Addendum Errors" 
 
     ], 
 
     "StatusFlagName": [ 
 
      "RED", 
 
      "ORANGE", 
 
      "RED", 
 
      "GREEN" 
 
     ] 
 
    } 
 
]); 
 
    
 
}; 
 

 
ko.applyBindings(new viewModel());

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> 
 
<table class="table table-hover"> 
 
     <thead> 
 
      <tr> 
 
       <th>Entity Code</th> 
 
       <!--ko foreach: taskRecordsTEST--> 
 
       <th> 
 
        <div style="height:50px" data-bind="text: Tasks"></div> 
 
       </th> 
 
       <!--/ko--> 
 
      </tr> 
 
     </thead> 
 
     <tbody id="sortable" data-bind="foreach: taskRecordsTEST"> 
 
      <tr class="ui-state-default ui-state-disabled"> 
 
        <td class="ui-state-default" data-bind="text: EntityCode"></td> 
 
        <td class="ui-state-default" data-bind="text: StatusFlagName"></td> 
 
       </tr> 
 
     </tbody> 
 
    </table>

http://jsfiddle.net/v2L1ny8r/9/

來源

2017-08-25 Kevin

有什麼問題嗎？ –

對不起。更新。 – Kevin

恩，那太寬了。至少你需要表現出一個認真的嘗試來完成這件事情，並且確切地指出它失敗的地方或者你被困住的地方。 –

認爲你可以使用與一個foreach一起綁定。

http://jsfiddle.net/v2L1ny8r/13/

<table class="table table-hover"> 
    <thead> 
    <tr> 
     <th>Entity Code</th> 
    <!--ko with: taskRecordsTest()[0]--> 
     <!-- ko foreach: $data.Tasks --> 
     <th data-bind="text: $data"></th> 
     <!--/ko--> 
     <!--/ko--> 
    </tr> 
    </thead> 
    <tbody id="sortable" data-bind="foreach: taskRecordsTest"> 
    <tr> 
     <td data-bind="text: EntityCode"></td> 
     <!-- ko foreach: $data.StatusFlagName --> 
      <td data-bind="text: $data"></td> 
     <!--/ko--> 
    </tr> 
    </tbody> 
</table>

來源

2017-08-25 17:57:29

Knockout - 在HTML表格中顯示來自LINQ的樞軸數據

回答

相關問題