SortTable组件的实现

需求分析

      SortTable最基本的需求就是对表格的数据列进行排序，但只实现这么简单的排序，通用性太差，不能灵活满足高级需求。经过挖掘，比较高级的功能一般有：

      1. 除了常规的number string date类型外，可以自定义某列的排序方式

      2. date可以采用各种形式，不一定只能采用默认形式

      3. 可以对些HTML类型的字段进行排序

      4. 可以固定某些列不排序，比如序号列

      5. 对上一次排序的列可以反转排序

      6. 如果表格行数很大，表头可以滚动，这样用户清楚每列是什么数据

      7. 自定义样式表头 数据行的一些样式

      8. 支持复杂的表头中的某些字段排序，比如thead有两个tr，某些td进行了合并

 

      有些需求凭空是想不到，需要有比较多的应用场景才能挖掘出来。

实现

      表格排序的基本原理就是把TR对象push到一个数组中，使用数组的sort方法排序，排序后append到tbody中。append会自动调整tr顺序，且不会重复。

      其实把需求和基本原理弄明白了实现也就不难了。有些需求硬实现起来确实很费劲，但使用自定义属性就很容易实现且定制也会很灵活，还有从html拿到都是字符串，需要转换成排序的类型，但数据中可能是-  -- 、日期格式也是五花八门，实现包容所有数据的类型转换几乎不可能，对于这些我们无法确定的就可以扔出去让使用者自己出来， SortTable本身只处理常规的情况。

      数据量非常大时排序可能就会很慢，应该尽量减少sort比较函数的计算，把比较大小以外的活(计算比较字段)放在sort外面进行。

源代码

HTML: <table id="yield" class="scrollable"> <thead> <tr> <th class="w1">序号</th> <th class="w2">代码</th> <th class="w3">简称</th> <th class="w4 jrj-sort-field" colIndex="3" sortType="number"><span>区间收益率<em>(%)</em></span></th> <th class="w5 jrj-sort-field" colIndex="4" sortType="number"><span>期末净值<em>(元)</em></span></th> <th class="w6 jrj-sort-field" colIndex="5" sortType="number"><span>期初净值<em>(元)</em></span></th> <th class="w7 jrj-sort-field" colIndex="6" sortType="number"><span>期末累计净值</span></th> <th class="w8 jrj-sort-field" colIndex="7" sortType="date"><span>日期</span></th> <th class="w9 jrj-sort-field" colIndex="8" sortType="mySort">基金经理</th> </tr> </thead> <tbody> <tr class="cur"> <td class="tc w1">1</td> <td class="tc w2"><a href="/archives/150019/index.shtml" mce_href="archives/150019/index.shtml" class="num">150019</a></td> <td class="tl w3"><a href="/archives/150019/index.shtml" mce_href="archives/150019/index.shtml" title="银华锐进">银华锐进</a></td> <td class="w4">2.80</td> <td class="w5">1.1470</td> <td class="w6">1.1110</td> <td class="w7">1.1470</td> <td class="w8">2010-2-23</td> <td class="tc w9" title="路志刚 周毅" value="5">路志刚...</td> </tr> </tbody> </table> //下面是基于jquery的实现，风格是我喜欢的传统类定义形式，显然和jquery的风格不一致，整站都用了jquery只好将就了 (function($){ /** * @author jianjun768@gmail.com */ SortTable = function(tableId,config){ this.config = { ascClass : "sorttable_asc", //表头字段升序的class descClass : "sorttable_desc", //表头字段降序的class oddTrClass : "odd", //奇数行样式 evenTrClass : "even", //偶数行样式 hoverClass : "hover", //鼠标hover表头可排序字段的class sortDirect : "asc", //asc或desc toDateFunc : null, //可以自定义转date的函数 fixedCols : "", //"0|5" headScroll:false //表头是否滚动 }; $.extend(this.config,config||{}); this.sortTable = $("#"+tableId); this.tHead = this.sortTable.find("thead"); this.tBody = this.sortTable.find("tbody"); this.sortCol = null; this.fixedCols = null; this.init(); } SortTable.prototype = { init : function(){ var self = this; var config = this.config; this.tHead.find(".jrj-sort-field").each(function(){ var column = this.getAttribute("colIndex"); //判断某列是否可排序 if(self.isSortCol(this)){ $(this).hover(function(){ $(this).addClass(config.hoverClass); },function(){ $(this).removeClass(config.hoverClass); }).click(function(){ self.sort(this,column); var sortClass; if($(this).hasClass(config.ascClass)){ sortClass = config.descClass; }else if($(this).hasClass(config.descClass)){ sortClass = config.ascClass; }else{ if(config.sortDirect=="asc"){ sortClass = config.ascClass; }else if(config.sortDirect=="desc"){ sortClass = config.descClass; } } self.tHead.find(".jrj-sort-field").removeClass(config.ascClass).removeClass(config.descClass); $(this).addClass(sortClass); }); } }); //收集不参加排序的固定列 if(!this.fixedCols){ this.fixedCols = new Array(); var cols = config.fixedCols.split("|"); this.rows = this.tBody.find("tr"); this.rows.each(function(){ var trFixed = new Array(); for(var i=0;i<cols.length;i++){ //tr.cells[1].firstChild.nodeValue trFixed.push($(this).children("td").eq(parseInt(cols[i],10)).text()); } self.fixedCols.push(trFixed); }); } if(config.headScroll){ $(window).bind("scroll",{obj:this},function(event){ var thisObj = event.data.obj; thisObj.headScroll(); }) } }, isSortCol:function( th ){ if(this.getSortType(th)){ return true; } return false; }, getSortType : function(th){ return th.getAttribute('sortType'); }, getSortKey : function(td,type){ var key = td.getAttribute("value"); if(!key){ key = td.firstChild.nodeValue; } switch(type){ case "number" : var key = parseFloat(key,10); return isNaN(key) ? 0 : key; case "date" : var d ; if(this.config.toDateFunc){ d = this.config.toDateFunc(key); }else{ d = this.str2Date(key); } return d.getTime(); default : return key.toString(); } }, generateCompare : function(sortType){ //var sortType = this.getSortType(th); var direct = 1; if(this.config.sortDirect == "desc"){ direct = -direct; } switch(sortType){ case "string" : case "number" : case "date" : return function compareTrs(oTR1,oTR2){ var value1 = oTR1.sortKey; var value2 = oTR2.sortKey; if(value1 < value2){ return -direct; }else if(value1 > value2){ return direct; }else{ return 0; } } default : return window[sortType]; } }, sort : function(th,column){ var self = this; var sortType = this.getSortType(th); this.rows = this.tBody.find("tr"); this.trs = new Array(); $.each(this.rows,function(i,row){ self.trs.push(row); }); if(this.sortCol==column){ this.trs.reverse(); }else{ $.each(this.trs,function(i,tr){ tr.sortKey = self.getSortKey($(tr).children("td").eq(column)[0],sortType); }); var compare = this.generateCompare(sortType); this.trs.sort(compare); } $.each(this.trs,function(index,row){ //恢复固定列 var fixedTds = self.fixedCols[index]; var cols = self.config.fixedCols.split("|"); for(var i=0;i<cols.length;i++){ //row.cells[cols[i]].firstChild.nodeValue = fixedTds[i]; //nodeValue是否为只读属性？ row.cells[cols[i]].innerHTML = fixedTds[i]; } self.tBody.append(row); row.sortKey = null; }); self.sortCol = column; this.alternateRowColors(); }, alternateRowColors : function(){ var oddClass = this.config.oddTrClass; var evenClass = this.config.evenTrClass; this.tBody.find("tr:odd").removeClass(evenClass).addClass(oddClass); this.tBody.find("tr:even").removeClass(oddClass).addClass(evenClass); }, headScroll : function(){ var wScrollTop = $(window).scrollTop(); if(wScrollTop > 0){ this.tHead.css("position","absolute"); this.tHead.css("top",wScrollTop); }else{ this.tHead.css("position","static"); this.tHead.css("top",0); } }, str2Date : function(str){ var s = "-"; var ymd = str.split(s); var year = parseInt(ymd[0],10); var month = parseInt(ymd[1],10); var day = parseInt(ymd[2],10); if(month<1||month>12||day<1||day>31){ alert("错误时间字符串"); return null; } var d = new Date(year,month-1,day); return d; } } })(jQuery);