按父级淘汰 HTML 表组

Question

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

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

我该怎么做？

<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

这次是另一种解决方案，将原始可观察数组单独放置，并使用过滤器功能创建父子行为。在下面运行 sn -p。

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>

Answer 2

你可以稍微改变你的 observable 数组的结构吗？如果是这样，请运行下面的 sn-p。如果不是如上所述，纯计算是要走的路。看看这个链接http://www.knockmeout.net/2011/04/utility-functions-in-knockoutjs.html。它具有您需要的所有功能。可能会展平数组并为您的父母获得独特的价值。然后为孩子们使用过滤器。如果您仍然遇到困难，请告诉我们，我可以尝试使用这些实用程序来解决问题。

function task(name, id, data) {
  var self = this;
  this.name = ko.observable(name);
  this.id = ko.observable(id);
  this.children = ko.observableArray(data);
}

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

  // variables
  self.currentTask = ko.observable();
  self.tasks = ko.observableArray([
    new task('Trades', 2, [{
      Id: 7,
      Name: 'FileIn'
    }]),
    new task('Positions', 3, [{
      Id: 1,
      Name: 'ManualItems'
    }, {
      Id: 4,
      Name: 'Rec'
    }]),
    new task('Cash', 5, [{
      Id: 6,
      Name: 'ReportA'
    }, {
      Id: 8,
      Name: 'ReportB'
    }])
  ]);

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

<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 data-bind="foreach: tasks">
    <tr>
      <td data-bind="text: id"></td>
      <td data-bind="text: name"></td>
      <td></td>
      <td></td>
    </tr>
    <!-- ko foreach: children -->
    <tr>
      <td></td>
      <td></td>
      <td data-bind="text: Id"></td>
      <td data-bind="text: Name"></td>
    </tr>
    <!-- /ko -->
  </tbody>
</table>