HTML 表格 - 使用 Knockout 的嵌套表格行答案

【问题标题】：HTML Table - Nested Table Row using KnockoutHTML 表格 - 使用 Knockout 的嵌套表格行
【发布时间】：2017-12-26 07:46:58
【问题描述】：

我有一个 JSON 对象，其中 EntityCode、EntityName、TagName 和 TaskName（来自 TagList）将成为表列标题。

TaskRecordList 中的StatusFlagName 然后将位于其相关TaskName 下的嵌套行中。 StatusFlagName 值应直接位于 TaskName 下方。

我如何让它工作？ StatusFlagName 将不会显示。

var ViewModel = function() {
this.taskRecords = ko.observableArray([
{
	EntityCode: "name",
  EntityName: "name desc23",
  TagName: "L1",
  TaskList: [
  	{
    	TaskName: "TaskABC",
      TaskRecordList: [
      	{ 
        	StatusFlagName: "OK"
        },
        { 
        	StatusFlagName: "TEST"
        }
      ]
    },
    {
    	TaskName: "TaskDEF",
      TaskRecordList: [
      	{ 
        	StatusFlagName: "Error"
        }
      ]
    }
  ]
}
]);
  
};
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.2/knockout-min.js"></script>
<table class="table table-bordered">
<tbody data-bind="foreach: taskRecords">
            <tr>
                <td data-bind="text: EntityCode"></td>
                <td data-bind="text: EntityName"></td>
                <td data-bind="text: TagName"></td>
                <td></td>
                <!--ko foreach: TaskList-->
                <td data-bind="text: TaskName">
                    <table>
                        <tbody>
                            <!--ko foreach: TaskRecordList-->
                            <tr>
                                <td data-bind="text: StatusFlagName"></td>
                            </tr>
                            <!--/ko-->
                        </tbody>
                    </table>
                </td>
                <!--/ko-->
                
            </tr>   
  </tbody>
</table>

【问题讨论】：

标签： json html knockout.js

【解决方案1】：

当您使用<td data-bind="text: TaskName"> 时，剔除将用TaskName 的值替换此标记中的任何内容作为文本，这就是您最后一个嵌套表被替换为TaskName 值的原因。

您可以为TaskName 添加div 或span，如下所示：

 <table class="table table-bordered">
   <tbody data-bind="foreach: taskRecords">
      <tr>
         <td data-bind="text: EntityCode"></td>
         <td data-bind="text: EntityName"></td>
         <td data-bind="text: TagName"></td>
         <td></td>
         <!--ko foreach: TaskList-->
         <td> 
            <div data-bind="text: TaskName"></div>
            <table>
               <tbody>
                  <!--ko foreach: TaskRecordList-->
                  <tr>
                     <td data-bind="text: StatusFlagName"></td>
                  </tr>
                  <!--/ko-->
               </tbody>
            </table>
         </td>
         <!--/ko-->

      </tr>
   </tbody>
</table>

【讨论】：

谢谢！这似乎做到了！