sortTable组件
#sortTable.js
/*
说明：
1. 该组件用于将一个普通的table，变成一个可以排序的table，同时可以添加奇数偶数行的样式(支持自定义)
2. JSLogger.js 是一个记录日志的组件，不用的话，可以将类似JSLogger的代码全部删掉，不会影响当前组件。
3. 兼容：IE7 8 9,FF,chorme
*/
//缓存table数据的对象
//使用table的ID作为属性进行访问
var tableMap = {};
/**
* 更新table的方法
* 更新后支持：奇偶样式（），表头排序
*@param tableId 表的ID
*@param config 配置信息
* - widths 各个列的宽度数组 默认[200,200]
* - oldEven 奇偶样式数据，默认["old","even"]\
* - sortType 排序类型：txt文本，int数值类型 默认都是文本排序
**/
function updateTable(tableId,config){
config = config ||{};
config.widths = config.widths ||[200,200,200,200,200,200,200,200,200,200,200,200,200,200,200,200];//默认200px宽度
config.sortType = config.sortType || ["txt","txt","txt","txt","txt","txt","txt","txt","txt","txt","txt","txt","txt"];
config.oldEven = config.oldEven ||["sort_old","sort_even"];//默认奇偶样式
var tableObj = document.getElementById(tableId);
if(tableObj==null){return;}
//是否需要缓存数据：如果没有缓存数据，则进行如下操作
if(!!tableMap[tableId]==false){
var rows = tableObj.rows;
var len = rows.length;
for(var i=1;i<len;i++){
var row = rows[i];
if(i%2==0){
row.className = config.oldEven[0];
row.classNameOld = config.oldEven[0];
}else{
row.className = config.oldEven[1];
row.classNameOld = config.oldEven[1];
}
}
JSLogger.log("缓存table");
//tableObj.className="sortTable";
tableObj.setAttribute("cellpadding","0");
tableObj.setAttribute("cellspacing","0");
tableObj.setAttribute("border","0");
var tempArr = [];
for(var i=0;i<len;i++){
var row = rows[i];
var rowArr = [];
if(i>0){//第一行不拷贝
var cells = row.cells;
for(var k=0;k<cells.length;k++){
rowArr.push(cells[k].innerHTML);//只保存td的html
}
tempArr.push(rowArr);
}
}
tableMap[tableId] = tempArr;
JSLogger.log(tempArr,true);
//给table的head添加时间监听
JSLogger.log("给table的head添加事件监听");
var head = rows[0];
var cells = head.cells;
for(var j=0;j<cells.length;j++){
var cell = cells[j];
//添加排序图标
var sortSpan = document.createElement("SPAN");
sortSpan.className = "sort_asc_def";
sortSpan.setAttribute("name","sortSpan");
sortSpan.setAttribute("sortType",config.sortType[j]);
sortSpan.innerHTML = " ";
sortSpan.setAttribute("tableId",tableId);//存储表ID
sortSpan.setAttribute("colIndex",j);//存储列索引
sortSpan.setAttribute("sort","desc");//存储排序顺序
cell.appendChild(sortSpan);
cell.className="sort_head";
if(config.widths){
cell.style.width = (config.widths[j]+"px" || "");
}
//排序图标添加click点击事件：兼容IE\FF\Chrome
if(window.attachEvent){
sortSpan.attachEvent("onclick",function (sortSpan,config) {
return function (){
sortTable(sortSpan,config);
}
}(sortSpan,config));
//表头不可以选中
cell.attachEvent("onselectstart",function (cell) {
return function (){
return false;
}
}(cell));
}else{//FF ,chrome
sortSpan.addEventListener("click",function (sortSpan,config) {
return function (){
sortTable(sortSpan,config);
}
}(sortSpan,config),false);
//表头不可以选中：在css样式中实现
}
}
}
}
/*排序的方法
*@param tdDom 当前TD对象
*@param config 配置信息(详细说明见updateTable方法)
*
*/
function sortTable(tdDom,config){
//JSLogger.log("tdDom.tableId = "+tdDom.getAttribute("tableId") +",tdDom.colIndex = "+tdDom.getAttribute("colIndex"));//+",innerHTML = "+tdDom.innerHTML);
JSLogger.log("sort = "+tdDom.getAttribute("sort")+",sortType = "+tdDom.getAttribute("sortType"));
var tableId = tdDom.getAttribute("tableId");
var sort = tdDom.getAttribute("sort");
var colIndex = tdDom.getAttribute("colIndex");
var table = document.getElementById(tableId);
var sortType = tdDom.getAttribute("sortType");//txt文字排序/int数值排序
//var rows = [];
//除第一样以外，全部删除
while(table.rows[1]){
//rows.push(table.rows[1]);
table.deleteRow(1);
}
setTimeout(function(){
//从缓存中获取原始table的所有行
var rowsData = tableMap[tableId];
var colLen = rowsData[0].length;
var JSON ={colIndex:colIndex,sort:sort,sortType:sortType};
rowsData = sortRows(rowsData,JSON);//;
//JSLogger.log(rowsData[0][0]);
for(var i=0;i<rowsData.length;i++){
var row = table.insertRow(-1);
//奇偶样式
if(i%2==1){
row.className = config.oldEven[0];
row.setAttribute("classNameOld",config.oldEven[0]);
}else{
row.className = config.oldEven[1];
row.setAttribute("classNameOld",config.oldEven[1]);
}
//注入td内容
for(var j=0;j<colLen;j++){
var cell = row.insertCell(-1);
cell.innerHTML = rowsData[i][j];
}
}
},0);
//重置所有排序图标 :name="sortSpan"
var spanArr = document.getElementsByTagName("span");
for(var k=0;k<spanArr.length;k++){
var span = spanArr[k];
if("sortSpan"==span.getAttribute("name") && "sort_desc"==span.className){
span.className = "sort_desc_dis";
}else if("sortSpan"==span.getAttribute("name") && "sort_asc"==span.className){
span.className = "sort_asc_dis";
}
}
//最后重置排序
if("desc"==sort){
tdDom.setAttribute("sort","asc");
tdDom.className = "sort_desc";
}else{
tdDom.setAttribute("sort","desc");
tdDom.className = "sort_asc";
}
}
/*
*自定义数组排序方法
*@param rows 一个table的所有行的数据
*@param JSON 参数
* -colInex 列索引 按照那个列进行排序
* -sort 正序还是反序 asc/desc
* -sortType txt文本排序/int 数值排序
*/
function sortRows(rows,JSON){
var colIndex = JSON.colIndex;
var sort = JSON.sort;
var sortType = JSON.sortType;
//JSLogger.log(rows,true);
JSLogger.log("colIndex = "+colIndex+",sort = "+sort+",sortType = "+sortType);
rows = rows.sort(function(row1,row2){
if("txt"==sortType){//文本排序
if("asc"==sort){
if((row1[colIndex]>row2[colIndex])===true){return 1;}
else if(( row1[colIndex]<row2[colIndex])===true){return -1;}
else{return 0;}
}else{
if((row1[colIndex]>row2[colIndex])===true){return -1;}
else if(( row1[colIndex]<row2[colIndex])===true){return 1;}
else{return 0;}
}
}else{//数值排序
if("asc"==sort){
return parseFloat(row1[colIndex])- parseFloat(row2[colIndex]);
}else{
return -(parseFloat(row1[colIndex])- parseFloat(row2[colIndex]));
}
}
});
return rows;
}
附件是完整代码和实例。
欢迎指正
愤怒的jser - 好东西就要共享