我是新来淘汰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>
在我的视图模型中,我有以下功能,用于使用表头对数据表进行排序.
视图模型：
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作为参数传递),当有大量列时,这将是有用的.
我试过了：
左[self.sortColumn]右[self.sortColumn]？ -1：1
这没有预期的运作.
解决方法
这是一个快速绑定的手柄,你可以添加到你的th.单击它将按照绑定中定义的属性名称对列进行排序.
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/
