javascript - 按父级 knockout HTML 表格组

Question

我有一个由 KnockoutJS 动态创建的 HTML 表格...

我希望表的输出按父级分组，如下所示...

我该怎么做？

<table class="table table-hover">
  <thead>
    <tr>
      <th>Task ID</th>
      <th>Task name</th>
      <th>Parent</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: tasks">
    <tr>
      <td data-bind="text: TaskID"></td>
      <td data-bind="text: TaskName"></td>
      <td data-bind="text: Parent"></td>
    </tr>
  </tbody>
</table>

_

var viewModel = function(data) {
    var self = this;

    // variables
    self.currentTask = ko.observable();

    self.tasks = ko.observableArray([
    {TaskID: 1, TaskName: "ManualItems", Parent: 3},
    {TaskID: 2, TaskName: "Trades", Parent: null},
    {TaskID: 3, TaskName: "Positions", Parent: null},
    {TaskID: 4, TaskName: "Rec", Parent: 3},
    {TaskID: 5, TaskName: "Cash", Parent: null},
    {TaskID: 6, TaskName: "ReportA", Parent: 5},
    {TaskID: 7, TaskName: "FileIn", Parent: 2},
    {TaskID: 8, TaskName: "ReportB", Parent: 5}
    ]); 

};

ko.applyBindings(new viewModel());

http://jsfiddle.net/qa0gbf9q/

Answer 1

这是另一个解决方案，这次保留原始可观察数组并使用过滤器功能来创建父子行为。运行下面的代码片段。

var viewModel = function(data) {
  var self = this;

  self.tasks = ko.observableArray([{
    TaskID: 1,
    TaskName: "ManualItems",
    Parent: 3
  }, {
    TaskID: 2,
    TaskName: "Trades",
    Parent: null
  }, {
    TaskID: 3,
    TaskName: "Positions",
    Parent: null
  }, {
    TaskID: 4,
    TaskName: "Rec",
    Parent: 3
  }, {
    TaskID: 5,
    TaskName: "Cash",
    Parent: null
  }, {
    TaskID: 6,
    TaskName: "ReportA",
    Parent: 5
  }, {
    TaskID: 7,
    TaskName: "FileIn",
    Parent: 2
  }, {
    TaskID: 8,
    TaskName: "ReportB",
    Parent: 5
  }]);

  self.getChildren = function(row) {
    return ko.utils.arrayFilter(this.tasks(), function(item) {
      return item.Parent === row.TaskID
    });
  }



  self.filteredtasks = ko.computed(function() {
    return ko.utils.arrayFilter(this.tasks(), function(item) {
      return !item.Parent;
    });
  }, this);


};

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-hover">
  <thead>
    <tr>
      <th>Parent</th>
      <th>Parent Name</th>
      <th>Task Id</th>
      <th>Task Name</th>
    </tr>
  </thead>
  <tbody>
    <!-- ko foreach: filteredtasks -->
    <tr>
      <td data-bind="text: TaskID"></td>
      <td data-bind="text: TaskName"></td>
      <td></td>
      <td></td>
    </tr>
    <!-- ko foreach: $root.getChildren($data) -->
    <tr>
      <td></td>
      <td></td>
      <td data-bind="text: TaskID"></td>
      <td data-bind="text: TaskName"></td>
    </tr>
    <!-- /ko -->
    <!-- /ko -->

  </tbody>
</table>