我是新来的淘汰赛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作为参数）时，有一个大列，这将是有益的。
我试图left[self.sortColumn] < right[self.sortColumn] ? -1 : 1 left[self.sortColumn] < right[self.sortColumn] ? -1 : 1 ，符合市场预期，没有工作。
如果能够通过动态列名称进行排序，请显示示例代码。
提前致谢。
这里是一个快速bindingHandler，您可以添加到您的日的。 当点击如在结合所定义的第它将根据属性名称排序的列。
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/
left[self.sortColumn] < right[self.sortColumn] ? -1 : 1
不起作用，因为self.sortColumn是，你必须通过调用它作为一个函数来获取价值ko.observable。
self.deptList.sort(function (a, b) {
if(self.isSortAsc())
a[self.sortColumn()]() < b[self.sortColumn()]() ? -1 : 1;
else
a[self.sortColumn()]() < b[self.sortColumn()]() ? 1 : -1;
});
，你也需要像观测设置的值
if(self.sortColum === event.target.id)
self.isSortAsc(!self.isSortAsc());
else
{
self.sortColumn(event.target.id);
self.isSortAsc("True");
}
代替
if(self.sortColum === event.target.id)
self.isSortAsc = !self.isSortAsc;
else
{
self.sortColumn = event.target.id;
self.isSortAsc = "True";
}
我已经把工作示例
<table class="dept_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>
<script>
// deptlist data
var mylist = [
{id:1, name:"Dept 1", description: "D1"},
{id:2, name:"Dept 2", description: "D6"},
{id:3, name:"Dept 3", description: "D3"},
{id:4, name:"Dept 4", description: "D4"}];
// Deptlist-item Viewmodel
var Dept = function (data) {
var self = this;
for(var key in data){
// this is the lazy approach usually you should only use observables where they are needed
if(data.hasOwnProperty(key))this[key] = ko.observable(data[key]);
}
};
// Deptlist Viewmodel
var Deptlist = function(table_data){
var self = this;
this.deptList = ko.observableArray([]);
this.sortColumn = ko.observable("id");
this.isSortAsc = ko.observable(true);
for(var i = 0;i < table_data.length;i++){
if(table_data.hasOwnProperty(i))this.deptList.push(new Dept(table_data[i]));
}
this.sortFunction = function(){
if(self.sortColumn() === event.target.id)
self.isSortAsc(!self.isSortAsc());
else
{
self.sortColumn(event.target.id);
self.isSortAsc(true);
}
self.deptList.sort(function (a, b) {
if(a[self.sortColumn()]() < b[self.sortColumn()]())return !self.isSortAsc();
else return self.isSortAsc();
});
}
};
var deptList = new Deptlist(mylist);
ko.applyBindings(deptList,$('.dept_table')[0]);
</script>
