在日常的WEB开发中,对表格的排序经常会用到,于是在网上找了些资料,然后自己下来研究了下,做了一些整理,现在将他贴出来,一来备忘,二来可以帮助其他需要的人。
需要注意的地方:
关于table中按行按列排序的方法:
1. 取出每一行作为排序的单元,结果即为完整的正确的排序。
2. 每一行中有一个关键字用于排序的标准
2.1 每一个关键字都有类型的区别,如string, int, date, float等类型
3. IE和Firefox中,元素中内容的存储形式有一定的区别
4. 数组有已有的排序接口,[无参数形式和有参数形式]
4.1 无参数形式的排序,按第一个字母的顺序进行,第一个字母相同者比较
第二个字母,以此类推
4.2 有参数形式的排序,通过实现一个排序函数,每次取出两个tr进行排序
5. 如果连续点击同一个th,则表示要对当前的列进行升序和降序操作。
6. 列中的数据类型不同,则排序方式有所差别,如同是数字,按string和Int排序
则可能出现不同的结果。
排序过程中使用了,createDocumentFragment()函数,如果使用document
.createElement(),由于需要多次遍历DOM树,如果表格很大的话,会造成一定
的性能问题,所以采取createDocumentFragment(),将片段创建在内存中,最后
通过查找tbody节点,完成插入操作。
1. 取出每一行作为排序的单元,结果即为完整的正确的排序。
2. 每一行中有一个关键字用于排序的标准
2.1 每一个关键字都有类型的区别,如string, int, date, float等类型
3. IE和Firefox中,元素中内容的存储形式有一定的区别
4. 数组有已有的排序接口,[无参数形式和有参数形式]
4.1 无参数形式的排序,按第一个字母的顺序进行,第一个字母相同者比较
第二个字母,以此类推
4.2 有参数形式的排序,通过实现一个排序函数,每次取出两个tr进行排序
5. 如果连续点击同一个th,则表示要对当前的列进行升序和降序操作。
6. 列中的数据类型不同,则排序方式有所差别,如同是数字,按string和Int排序
则可能出现不同的结果。
排序过程中使用了,createDocumentFragment()函数,如果使用document
.createElement(),由于需要多次遍历DOM树,如果表格很大的话,会造成一定
的性能问题,所以采取createDocumentFragment(),将片段创建在内存中,最后
通过查找tbody节点,完成插入操作。
下面是一个截图
好了,代码如下,没有使用第三方的库,可能效果上比较粗糙,但是逻辑功能已经实现,你可以自己设计一些比较漂亮的CSS重新进行“界面化”。
判断浏览器类型,并作出相应的返回动作:
/** * @param obj the object to judge * @return the content of the object. */ function IEorFF(obj){ if(obj.textContent != null){//IE return obj.textContent; }else{//FF var s = obj.innerText; return s.substring(0,s.length); } }
做具体的排序动作:
/** * @param tid the id of table element * @param col which col to sort * @param type the datatype of the selected col. * @return null */ function sortTable(tid, col, type){ var table = document.getElementById(tid);//get the table element var tbody = table.tBodies[0];//get the tbody array. var colrows = tbody.rows;//get all rows in colrows. var trs = new Array;//new a array to store the rows. for(var i = 0;i < colrows.length-1; i++){//store all rows in array trs. trs[i] = colrows[i+1]; } if(table.sortcol == col){//if the selected col is current col, then reverse it. trs.reverse(); }else{//else sort it. trs.sort(compare(col, type));//sort and save the result in the trs array. } var frag = document.createDocumentFragment();//new a element to store the result. for(var i = 0;i < trs.length; i++){//fullfill the element with sorted array. frag.appendChild(trs[i]); } tbody.appendChild(frag);//add the array to tbody. table.sortcol = col;//set the sortcol to col. }
其中用到了一个外部函数:
compare(value, type)
相当于java中的comparable接口,需要实现自己的排序方式,代码如下:
/** * @param col the special col to compare * @param type data type of the special col * @return * 1 : gt * 0 : eq * -1 : lt */ function compare(col, type){ return function(arg1, arg2){ var v1 = convert(IEorFF(arg1.cells[col]), type); var v2 = convert(IEorFF(arg2.cells[col]), type); if(v1 > v2){ return 1;//> }else if(v1 < v2){ return -1;//< }else{ return 0;//== } }; }
而这个函数又调用了一个转化器,转换器可以根据不同的类型返回可排序的串:
/** * @param value the org value in string type * @param type data type of the org value. * @return the correct type of the special value. */ function convert(value, type){ switch(type){//convert the value to correct type case 'int'://integer return parseInt(value); case 'float'://float return parseFloat(value); case 'date'://date return new Date(Date.parse(value)); default://other, admit to be string. return value.toString(); } }
好了,代码就这么点,由于公司要求,所以注释是英文的,我也懒得改了。看看怎么使用吧,
只需要在table/th里加入对点击时间的监听就可以了:
οnclick="changeimg(this);sortTable('toSort', 0, 'int')"