Knockout - 在 HTML 表中显示来自 LINQ 的数据透视数据答案

【问题标题】：Knockout - Display Pivot Data from LINQ in HTML TableKnockout - 在 HTML 表中显示来自 LINQ 的数据透视数据
【发布时间】：2018-02-03 14:28:00
【问题描述】：

在我的代码中，我调用了一个存储过程。我希望将结果（TaskName）中一列的行值用作 HTML 表列。

我目前在一个单元格中显示所有透视数据的代码。透视在 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 和 KnockOut 代码...

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/

【问题讨论】：

有什么问题？
对不起。已更新。
嗯，这太宽泛了。至少你需要展示一次认真的尝试来自己完成此任务并准确指出失败的地方或卡住的地方。
当我需要将数据拆分为单独的单元格标题时，数据会合并到一个单元格标题中。这就是所有需要的。
我认为我的代码确实表明了这样做的认真尝试。

标签： html linq tsql knockout.js

【解决方案1】：

认为您可以将 with 绑定与 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>

【讨论】：