按家长淘汰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

Here is another solution this time leaving your original observable array alone and using the filter functionality to create a parent child behavior. run snippet below.

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

你是否允许改变你的可观察数组的结构？如果是这样的话，请运行下面的代码段。如果不是如上所述，纯计算是要走的路。看看这个链接http://www.knockmeout.net/2011/04/utility-functions-in-knockoutjs.html。它具有您需要的所有功能。 probaly flatten array并为您的父母获取独特的价值。然后为孩子们使用过滤器。如果你仍然有困难让我们知道，我可以尝试使用这些实用工具。

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>