[置顶] js 表格排序 支持 中英文 ， 可选择不排序的行

/** * <p>sortTable.js * <p>通用于指定了ID的表格进行排序 * @author heardy * @time 2010/12/31 * @version 1.0 * <p>调用代码样式： * <p>sortTableByColumn("sortTable",0,'int',1,1);//说明表格Id是sortTable 点击的是第一列 数据类型是int 第一行和最后一行不排序 * <p>sortTableByColumn("sortTable",1,'date',2,3);//说明表格Id是sortTable 点击的是第二列 数据类型是date 前两行和最后三行不排序 * <p>sortTableByColumn("sortTable",2,'cn',2,1);//说明表格Id是sortTable 点击的是第三列 数据类型是中文字符 前两行和最后一行不排序 * <p>本程序在IE6 和 Firefox 3.6.6 下 成功测试通过 其他未进行测试 */ //设置隐藏排序符号 spanSrc = document.createElement("<span>"); spanSrc.innerHTML = "▼";// 占位用 var f = this.spanSrc.cloneNode(true); // 判断是使用IE还是使用FireFox function ieOrFireFox(ob) { if (ob.textContent != null) return ob.textContent; var s = ob.innerText; return s.substring(0, s.length); } // 添加排序符号 function addSortSymbols(header, px) { // 添加符号 if (px == "asc") f.innerHTML = "▲"; else f.innerHTML = "▼"; f.style.visibility = 'visible';// 设置F样式为显示 header.appendChild(f);// 挂载到header下方 // header.style.textIndent = f.offsetWidth;//设置宽度,若有此项,显示时前方会有空格 } // 排序 sortTableId:表的id, iCol:第几列; dataType:iCol对应的列显示数据的数据类型 ; start:指定前几排不排序 ; end:指定后几排不排序 function sortTableByColumn(sortTableId, iCol, dataType, start, end) { var sortTable = document.getElementById(sortTableId);// 获取表对象 var tbody = sortTable.tBodies[0]; var colRows = tbody.rows; var aTrs = new Array; // var sortedHeader = sortTable.tHead.rows[0].cells[iCol]; // cells表示该行(tr)的单元格(td)组 var sortedHeader = sortTable.rows[0].cells[iCol]; // 若标题栏没有<thead>包围的话用此变量 使用此变量时,start至少指定为1 要不 标题也进行排序 f.style.visibility = 'hidden';// 开始设置排序符号位隐藏 var unSortRows = new Array;//记录不需要排序的行 var j = 0;// 记录不排序的下标 // 将得到的列放入数组，备用 for ( var i = 0; i < colRows.length; i++) { if (i >= start && i <= colRows.length - end - 1) aTrs[i - start] = colRows[i];//需要排序的行 else unSortRows[j++] = colRows[i];//不需要排序的行 } // 判断上一次排列的列和现在需要排列的是否同一个。 if (sortTable.sortCol == iCol) {//判断时候排序过 if (sortTable.sortOrder == "desc") {//实现递增 递减 交替排序 aTrs.sort(compareEle(iCol, dataType, 'asc')); sortTable.sortOrder = "asc"; } else { aTrs.sort(compareEle(iCol, dataType, 'desc')); sortTable.sortOrder = "desc"; } } else {//首次点击调用此方法 // 如果不是同一列，使用数组的sort方法，传进排序函数 aTrs.sort(compareEle(iCol, dataType, 'asc')); // 第一次按递增排序 sortTable.sortOrder = "asc";//记录此次排序 } // 当数据排序介绍之后,由于sortTable.sortOrder设置了排序格式,所以直接调用sortTable.sortOrder进行设置显示的符号 addSortSymbols(sortedHeader, sortTable.sortOrder); // 记录最后一次排序的列索引 sortTable.sortCol = iCol; var oFragment = document.createDocumentFragment(); j = 0; //首先挂载不排序的头记录 if (start != 0) for ( var i = 0; i < start; i++) { oFragment.appendChild(unSortRows[j++]); } //其次挂载排序后的行记录 for ( var i = 0; i < aTrs.length; i++) { oFragment.appendChild(aTrs[i]); } //再则挂载不排序的尾记录 if (end != 0) for ( var i = 0; i < end; i++) { oFragment.appendChild(unSortRows[j++]); } //擦除挂载在tbody下的数据，将新数据挂载上去 tbody.appendChild(oFragment); } // 将列的类型转化成相应的可以排列的数据类型 function convert(sValue, dataType, sortDerection) { switch (dataType) { case "int": if (sValue.length <= 0) { sValue = "-999999999";//设置整型空字符默认为此数据，假设所有的数据大于此数据，说明空字符是最小的数据 } return parseInt(sValue, 10); case "float": return parseFloat(sValue); case "date": return new Date(Date.parse(sValue)); default: return sValue.toString().toLowerCase(); } } // 排序函数，iCol表示列索引，dataType表示该列的数据类型 function compareEle(iCol, dataType, sortDerection) { return function(oTR1, oTR2) {// oTR1 oTR2 分别代表两个相邻的行 var returnResult = 0; if (dataType == "cn") {//假若是中文排序 直接调用此方法进行排序 returnResult = (ieOrFireFox(oTR1.cells[iCol])) .localeCompare(ieOrFireFox(oTR2.cells[iCol])) } else { var vValue1 = convert(ieOrFireFox(oTR1.cells[iCol]), dataType, sortDerection); var vValue2 = convert(ieOrFireFox(oTR2.cells[iCol]), dataType, sortDerection); if (vValue1 < vValue2) { returnResult = -1; } else if (vValue1 > vValue2) { returnResult = 1; } else { returnResult = 0; } } if (sortDerection == "desc") { return -returnResult; } else { return returnResult; } }; }

 里面部分方法是从网上好友那得到的，本人对里面的所有方法进行了注释，也添加自己的方法，进行支持中文排序，点击排序列后，显示排序符号，对不需要进行排序的行指定行数。

 

希望有人能继续完善！

 

转载请写明出处，谢谢！