Я новичок в knockout js и нуждаюсь в тренировке помощи, чтобы динамически сортировать таблицу, используя заголовок столбца.
Ниже приведена часть моего кода:
HTML:
<table>
<thead>
<tr data-bind="click: sortFunction">
<th id='id'>Id</th>
<th id='name'>Name</th>
<th id='description'>Description</th>
</tr>
</thead>
<tbody data-bind="foreach: deptList">
<tr>
<td><span data-bind="text: id" /></td>
<td><span data-bind="text: name" /></td>
<td><span data-bind="text: description" /></td>
</tr>
</tbody>
</table>
В моей модели модели у меня есть следующая функция, которую я использую для сортировки таблицы данных с использованием заголовка таблицы.
ViewModel:
self.deptList = ko.observableArray(mylist);
self.sortColumn = ko.observable("id");
self.isSortAsc = ko.observable("True");
var Dept = function (id, name, description) {
this.id = ko.observable(id);
this.name = ko.observable(name);
this.description = ko.observable(description);
};
var mylist = [
new Dept(1, "Dept 1", "D1"),
new Dept(2, "Dept 2", "D6"),
new Dept(3, "Dept 3", "D3"),
new Dept(4, "Dept 4", "D4")];
self.sortFunction = function (data, event) {
if(self.sortColum === event.target.id)
self.isSortAsc = !self.isSortAsc;
else
{
self.sortColumn = event.target.id;
self.isSortAsc = "True";
}
self.deptList.sort(function (a, b) {
if(self.sortColum === 'id')
{
if(self.isSortAsc)
a.id < b.id ? -1 : 1;
else
a.name < b.name ? 1 : -1;
}
else if(self.sortColum === 'name'){
if(self.isSortAsc)
a.name < b.name ? -1 : 1;
else
a.name < b.name ? 1 : -1;
}
else (self.sortColum === 'description'){
if(self.isSortAsc)
a.description < b.description ? -1 : 1;
else
a.description < b.description ? 1 : -1;
}
});
};
Несмотря на то, что над кодом работает, я думаю, что должен быть лучший способ сделать это (я имею в виду передачу идентификатора столбца в качестве параметра), который будет полезен, когда имеется большое количество столбцов.
Я попробовал: left [self.sortColumn] < right [self.sortColumn]? -1:1 который не функционировал должным образом.
Если можно отсортировать имя динамического столбца, пожалуйста, укажите пример кода. Спасибо заранее.