展会信息港展会大全

js表格字段排序的实例代码介绍
来源:互联网   发布日期:2016-01-28 12:58:46   浏览:1554次  

导读:本篇文章只要是对js表格字段排序的实例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助1 比较函数生成器:代码如下: *** 比较函数生成器** @param iCol* 数据行数* @param sData ...

本篇文章只要是对js表格字段排序的实例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助

1.比较函数生成器:

代码如下:

/**

* 比较函数生成器

*

* @param iCol

*数据行数

* @param sDataType

*该行的数据类型

* @return

*/

functiongenerateCompareTRs(iCol, sDataType) {

returnfunctioncompareTRs(oTR1, oTR2) {

vValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType);

vValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType);

if(vValue1 < vValue2) {

return-1;

}elseif(vValue1 > vValue2) {

return1;

}else{

return0;

}

};

}

2.处理比较字符类型:

代码如下:

/**

* 处理排序的字段类型

*

* @param sValue

*字段值 默认为字符类型即比较ASCII码

* @param sDataType

*字段类型 对于date只支持格式为mm/dd/yyyy或mmmm dd,yyyy(January 12,2004)

* @return

*/

functionconvert(sValue, sDataType) {

switch(sDataType) {

case"int" :

returnparseInt(sValue);

case"float" :

returnparseFloat(sValue);

case"date" :

returnnewDate(Date.parse(sValue));

default :

returnsValue.toString();

}

}

3.主函数:

代码如下:

/**

* 通过表头对表列进行排序

*

* @param sTableID

*要处理的表ID<table id=''>

* @param iCol

*字段列id eg: 0 1 2 3 ...

* @param sDataType

*该字段数据类型 int,float,date 缺省情况下当字符串处理

*/

functionsortTable(sTableID, iCol, sDataType) {

varoTable = document.getElementById(sTableID);

varoTBody = oTable.tBodies[0];

varcolDataRows = oTBody.rows;

varaTRs =newArray;

for(vari = 0; i < colDataRows.length; i++) {

aTRs[i] = colDataRows[i];

}

if(oTable.sortCol == iCol) {

aTRs.reverse();

}else{

aTRs.sort(generateCompareTRs(iCol, sDataType));

}

varoFragment = document.createDocumentFragment();

for(varj = 0; j < aTRs.length; j++) {

oFragment.appendChild(aTRs[j]);

}

oTBody.appendChild(oFragment);

oTable.sortCol = iCol;

}

将以上问代码封装到一个js文件中,在html页面中引用。

测试test.html:

代码如下:

< htmlxmlns = "http://www.w3.org/1999/xhtml" >

< title > 表列排序 </ title >

< scripttype = "text/javascript"src = "js/sortTable.js" > </ script >

< body >

< tableborder = "1"id = "tblSort" >

< theadstyle = "color: red; bgcolor: blank" >

< tr >

< thonclick = " sortTable('tblSort',0);"style = "cursor: pointer" > LastName </ th >

< thonclick = " sortTable('tblSort',1,'int');"style = "cursor: pointer" > Number </ th >

< thonclick = " sortTable('tblSort',2,'date');"style = "cursor: pointer" > Date </ th >

</ tr >

</ thead >

< tbody >

< tr >

< td > A </ td >

< td > 1 </ td >

< td > 5/9/2008 </ td >

</ tr >

< tr >

< td > B </ td >

< td > 3 </ td >

< td > 6/9/2008 </ td >

</ tr >

< tr >

< td > D </ td >

< td > 6 </ td >

< td > 5/4/2008 </ td >

</ tr >

< tr >

< td > E </ td >

< td > -5 </ td >

< td > 5/4/2007 </ td >

</ tr >

< tr >

< td > H </ td >

< td > 34 </ td >

< td > 5/8/2008 </ td >

</ tr >

< tr >

< td > C </ td >

< td > 12 </ td >

< td > 1/4/2018 </ td >

</ tr >

</ tbody >

</ table >

</ body >

</ html >

赞助本站

人工智能实验室

相关热词: 字段 表格 排序 js

AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港