淘汰賽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>

Answer 2

你允許改變了一下週圍的觀察到陣列的結構？如果是這樣的話，運行下面的代碼片段。如果不是如上所述，純粹的計算是要走的路。看看這個鏈接http://www.knockmeout.net/2011/04/utility-functions-in-knockoutjs.html。它具有您需要的所有功能。 probaly壓平陣列併爲你的父母獲得獨特的價值。然後爲孩子使用過濾器。如果你仍然有困難，讓我們知道，我可以嘗試使用這些公用程序工作。

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([ 
 
    \t {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>