Question

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

我目前在一个单元格中显示所有数据透视的代码。枢轴在LINQ中完成，因为实体框架不会读取SQL sproc中的动态SQL查询。

我可以控制以下每个代码部分，以便可以更新任何内容。

这是sproc输出......

这就是我希望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代码......

＆＃13;

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());

＆＃13;

<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>

＆＃13;

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

Answer 1

认为你可以使用with with binding和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>

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

1 个答案: