淘汰赛 js - 使用列标题进行表格排序 [英] knockout js - Table sorting using column headers
问题描述
我是淘汰赛的新手 &需要帮助练习如何使用列标题对表格进行动态排序.
I'm new to knockout js & need help workout how to dynamically sort a table using the column header.
以下是我的代码的一部分:
Following is part of my code:
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>
在我的视图模型中,我使用以下函数使用表头对数据表进行排序.
In my view model I've the following function which I use to sort a data table using the table header.
视图模型:
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;
}
});
};
即使上面的代码有效,我认为应该有更好的方法来做到这一点(我的意思是将列 id 作为参数传递),这在有大量列时会很有用.
Even though above code is working I think there should be a better way to do this (I mean passing the column id as a parameter) which will be useful when there is a large of columns.
我试过 left[self.sortColumn] <对 [self.sortColumn] 吗?-1 : 1
,没有按预期工作.
I tried left[self.sortColumn] < right[self.sortColumn] ? -1 : 1
, which didn't work as expected.
如果可以通过动态列名进行排序,请提供示例代码.
If it is possible to sort via a dynamic column name please show a sample code.
提前致谢.
推荐答案
这是一个快速 bindingHandler,您可以将其添加到您的 th 中.单击 th 后,它将根据绑定中定义的属性名称对列进行排序.
Here is a quick bindingHandler that you can add to your th's. Upon clicking the th it will sort the column according the property name as defined in the binding.
ko.bindingHandlers.sort = {
init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var asc = false;
element.style.cursor = 'pointer';
element.onclick = function(){
var value = valueAccessor();
var prop = value.prop;
var data = value.arr;
asc = !asc;
data.sort(function(left, right){
var rec1 = left;
var rec2 = right;
if(!asc) {
rec1 = right;
rec2 = left;
}
var props = prop.split('.');
for(var i in props){
var propName = props[i];
var parenIndex = propName.indexOf('()');
if(parenIndex > 0){
propName = propName.substring(0, parenIndex);
rec1 = rec1[propName]();
rec2 = rec2[propName]();
} else {
rec1 = rec1[propName];
rec2 = rec2[propName];
}
}
return rec1 == rec2 ? 0 : rec1 < rec2 ? -1 : 1;
});
};
}
};
这更优雅一些,因为您不必为每一列创建单独的函数.可以在此处找到更完整的工作示例:http://jsfiddle.net/brendonparker/6S85t/
This is a little more elegant in that you don't have to create a separate function for each column. A more complete working example can be found here: http://jsfiddle.net/brendonparker/6S85t/
这篇关于淘汰赛 js - 使用列标题进行表格排序的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!