在客户端,表排序

分享于 

8分钟阅读

Web开发

  繁體 雙語

介绍

本教程包含根据你在HTML中指定的数据类型对 table 进行客户端排序的( 上升和下降)。 只需添加" type=Date and" onclick="sorttable ( 事件,0 )" table ( 函数的第二个参数是从零开始的列的索引) thead 部分中每个单元格的属性。

这个JavaScript代码可以用来编写你自己的对任何 Array 数据类型的排序。 如你所知,JavaScript是松散类型化语言,所以 Array 对象中可以用的一般排序函数可以用于对 Array 对象中的数据进行排序。 你必须做的只是编写一个定制的比较逻辑,可以用 Array.sort() 函数调用。 使用三个简单的步骤,你可以实现自己的排序机制。

  • 使用所需的特定数据填充 Array 对象。 如果要排序 table,则将每一行放入 Array
  • 编写自定义比较功能。 如果需要排序的值类型为 date 或者 浮点数 ,编写一个函数来比较这些值。
  • 将自定义比较函数名作为参数调用,调用对象函数的Arraysort()

函数 Arraysort 内部调用传递给它的函数来比较两个值。 所以这个定制函数应该有两个参数。 它应该返回一个正数或者负数或者零。 如果它返回任何其他数据,sort 函数将抛出错误。 在这个示例函数中,Custom() 用于比较不同类型的数据。 这样,你就可以实现对自己类型数据的排序。

下面是我让writen实现排序的代码:

//what type of data to be sorted.//need to mention in the table header cell tag.var type;//index of the column to be sorted.var columnIndex,lastIndex,isDescending;//varaiables for creating up arrow and down arrow.var upArrow,downArrow;function initSortArrows()
{
 //create a span element. upArrow = document.createElement("SPAN");
 var node6 = document.createTextNode("6");
 upArrow.appendChild(node6);
 //apply css class to show '5' as an arrow. upArrow.className = "arrow";
 //creating span tag for downArrow. downArrow = document.createElement("SPAN");
 var node5 = document.createTextNode("5");
 downArrow.appendChild(node5);
 downArrow.className = "arrow";
}function toString(value)
{
 return value.toUpperCase();
}function toDate(value)
{
 return Date.parse(value); 
}function Custom(a,b)
{
 if(a==undefined||b==undefined)
 return0;
 var val1=a.children[columnIndex].innerText;
 var val2=b.children[columnIndex].innerText;
 var a1=val1.split('.');
 var b1=val2.split('.');
 //get the maximum length of array.var maxlength;
 if(a1.length>b1.length)
 maxlength=a1.length;
 else maxlength=b1.length;
 //iterate through array item to get individual order no. for(var i=0;i<maxlength;i++)
 {
 //if both order number is same conitue to next order.//else return the differenceif(a1[i]!=undefined && b1[i]!=undefined)
 {
 if(parseInt(a1[i])==parseInt(b1[i]))
 {
 continue;
 }
 else {
 if(parseInt(a1[i])<parseInt(b1[i]))
 return isDescending?-1:+1;
 if(parseInt(a1[i])>parseInt(b1[i]))
 return isDescending?+1:-1;
 return0; 
 }
 }
 //if one of the order does not exists,return 1 or -1.else {
 if(a1[i]==undefined)
 return -1;
 elsereturn1;
 }
 }
 return0; 
}//function returning another function.function customCompare(type,isDescend,columnIndex)
{
 var TypeCast;
 //assign the typecast to point to the cast function.//if type is 'Custom' then return the Custom() function.if(type=="Number")
 TypeCast=Number;
 elseif(type=="Date")
 TypeCast=toDate;
 elseif(type=="Custom")
 return Custom;
 else TypeCast=toString;
 returnfunction(row1,row2)
 {
 var val1,val2;
 val1=row1.children[columnIndex].innerText;
 val2=row2.children[columnIndex].innerText;
 if(TypeCast(val1)<TypeCast(val2))
 return isDescend?-1:+1;
 if(TypeCast(val1)>TypeCast(val2))
 return isDescend?+1:-1;
 return0;
 } 
}//function used for sorting table rows.function sortTable(eventclick,index)
{
 //if arrows are not created create it.if(upArrow==undefined)
 initSortArrows();
 //get the TD element. var cell=eventclick.srcElement;
 //if the user clicks on the"SPAN" tag which was added dynamically.if(cell.tagName=="SPAN")
 cell=cell.parentElement; 
 elseif (cell.type==undefined)
 type="String";
 else type=cell.type;
 //set the current index. columnIndex=index;
 //get the head tag.var thead=cell.parentElement;
 var table=thead.parentElement.parentElement;
 //if clicked on span tag go one level up.if(!table.tBodies)
 {
 table=table.parentElement; 
 thead=thead.parentElement; 
 }
 var tblBody = table.tBodies[0];
 var tblRows = tblBody.rows;
 //set the direction.if(columnIndex==lastIndex)
 {
 if(isDescending==true)
 isDescending=false;
 else isDescending=true;
 }
 else 
 isDescending=true;
 //make the array of rows.var rowArray=new Array();
 //add each row to array.for(var i=0;i<tblRows.length;i++)
 {
 rowArray[i]=tblRows[i];
 } 
 //call the generic function to sort the array.//custom comare will return another function whih compares the value passed. rowArray.sort(customCompare(type,isDescending,columnIndex));
 //append the sorted array to table.for(var i=0;i<rowArray.length;i++)
 {
 tblBody.appendChild(rowArray[i]);
 }
 //first time sorting.if(lastIndex==undefined)
 {
 cell.appendChild(downArrow.cloneNode(true));
 isDescending=true;
 }
 elseif(index!=lastIndex)
 {
 thead.cells[lastIndex].removeChild(thead.cells[lastIndex].children[0]);
 cell.appendChild(downArrow.cloneNode(true));
 }
 elseif(index==lastIndex)
 {
 cell.removeChild(cell.children[0]);
 if(isDescending==true)
 cell.appendChild(downArrow.cloneNode(true));
 else cell.appendChild(upArrow.cloneNode(true));
 }
 //set the last sorted column index. lastIndex=index;
}

使用代码

rowArray.sort() 函数将在内部调用 customCompare() 函数来比较两个值。 这里函数返回另一个函数,该函数将接受两个参数并返回 +1,-1或者 0. 我们唯一要注意的是从 customCompare 函数中返回一个正数或者负数数据。 在这里,我添加了一个更多的抽象级别,它会发现要比较的数据类型和'类型'table header 列中的属性。

Points of Interest

可以下载的代码包含日期。区分大小写的字符串和自定义数据类型的排序。 它也会自动向 table 列 header 添加一个向上箭头或者向下箭头。 要动态获取箭头,应该添加CSS类 array。

历史记录

  • 18 2007年09月 - 已经创建。
  • 05 2007年10月 - 已经修改。
  • 16 2007年10月 - 已经修改。

tab    SID  sort  
相关文章