大佬教程收集整理的这篇文章主要介绍了knockout.js – 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>
在我的视图模型中,我有以下功能,用于使用表头对数据表进行排序.
视图模型:
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
这没有预期的运作.
如果可以通过动态列名进行排序,请显示示例代码.
提前致谢.
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/
以上是大佬教程为你收集整理的knockout.js – knockout js – 使用列标题进行表排序全部内容,希望文章能够帮你解决knockout.js – knockout js – 使用列标题进行表排序所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。