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的枢轴数据

回答

相关问题