JS排序

简介

这里说的排序,是在Web页面上,使用JavaScript代码,对表格数据进行的排序。

单击表头列,对该列进行排序,再次单击,则反序。

第一次单击一列为DESC,第二次为ASC,第三次又为DESC。

 

WFT项目中使用了两种JS排序,

l  1号排序方案

n  整理人:张生

n  版本:未知

n  代表场景:基金行情

n  排序算法:冒泡排序

 

l  2号排序方案

n  整理人:邓太华

n  版本:Ver 1.2

n  代表场景:高级搜索

n  排序算法:选择排序

 

注:

由于排序比较耗时,两种方案都增加了“loading”操作提示。

2号排序方案先前比较慢,并且为了统一排序方式,最终统一使用了1号排序方案。

 

 

控件提取人:邓太华 提取时间:2010.3.8

项目使用实例

基金分析-》基金行情

/FinancialManager/FundAnalysis/FundQuotes/FundQuotes.aspx

基金分析-》区间收益排名

/FinancialManager/FundAnalysis/IncomeRanking/IncomeRanking.aspx

基金分析-》高级搜索

/FinancialManager/FundAnalysis/AdvancedSearch/AdvancedSearch.aspx

 

 

在IE下,基金行情的排序大概在4秒以内。

使用方法

1号排序方案的使用:

a)       引用JS代码,包括TableSorter 函数的定义;

b)       在要排序的表格之后,插入下面的脚本:

 <script language="javascript" ype="text/javascript">

       new TableSorter("mainTable", 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18);

</script>

其中,“mainTable”就是要排序的表格名称,后面的数字参数,为要排序的列索引号

c)       如果要在排序之后,执行其它处理,例如为第1列设置序号,可以修改 TableSorter.prototype. afterSort 的定义。

 

2号排序方案的使用:

a)       引用JS代码,包括SortTableClass 的定义;

b)       在要排序的表格之后,插入下面的脚本:

<script> var mySortTable = new SortTableClass("sortTable1");</script>

其中,“sortTable1”是要排序的名称;

c)       在要排序的表头,增加如下的HTML:

<th><a href="#" onclick="mySortTable.SortByCol(1,'int');">Number</a></th>

       <th><a href="#" onclick="mySortTable.SortByCol(2);">String</a></th>

其中,onclick事件中的mySortTable 为前面脚本中定义的变量名称,SortByCol为排序方法,该方法有两个参数,详见源码说明。

 

注意事项

由于排序速度跟算法和数据量紧密相关,所以较少的数据量是关键。

1号排序方案只需要告诉要排序的列,程序会自己去判断列类型然后排序;

2号排序方案需要在HTML标记中指明哪些列要排序并指明排序的类型。

 

两种方案均需注意排序后的特殊处理。

// 如果想测试执行时间,请引用JS文件 NbfCommon.js

// 正式使用,请注释掉 CalcExecuteTime(); 相关代码,包括HTML中的divPageLoadTime 元素(用于显示时间)和loading 元素(用于显示正在排序)

源码说明

源码地址:

1号排序方案

JS文件地址: NBF/WebUI/WFTWeb/Script/TableSort.js

Demo地址:/WFTWeb/TableSort/SortDemo1.htm

 

2号排序方案

JS文件地址: NBF/WebUI/WFTWeb/Script/SortTableClass.js

Demo地址:/WFTWeb/TableSort/SortDemo2.htm

 

选择排序法:

//==============表格排序(算法:选择排序)by dengtaihua 2011.2.13 =============

           function BubbleSort(table, nColNum, strDataType, nSortOrder) { //冒泡排序

               //var length = table.rows.length;

               var length = table.length;

               var find = false;

               var objIndex = 0;

               var temp_x = 0;

               var temp_y = 0;

              

               for (var i = 0; i < length - 1; i++) {

                  temp_x = getCellDataByType1(tableRows[ i][ nColNum] , strDataType);

                   objIndex = i;

                   //var temp_x = x; //当前行的值

                

                   for (var j = i + 1; j < length; j++) {

                       temp_y = getCellDataByType1(tableRows[ j][ nColNum], strDataType);

                       //temp_y : 待比较行的值

 

                       find = false;

                       if (nSortOrder > 0) {//desc

                           if (temp_x < temp_y)

                               find = true; //寻找比当前行值小的最大索引

                       }

                       else {

                           if (temp_x > temp_y)

                               find = true; //寻找比当前行值大的最大索引

                      }

 

                       if (find) {

                           objIndex = j;

                           temp_x = temp_y;

                       }

 

                   }

                   if (objIndex != i) {

                       //找到目标行,进行交换

                       SwapRow1(table, i, objIndex);

                      

                   }

               }

           }

 

       function SwapRow1(table, x, y) {

               var temp_row = table[x];

               table[x] = table[y];

               table[y] = temp_row;

           }

 

冒泡排序法:

for (var x = 0; x < Sorter.length; x++) {

           for (var y = x + 1; y < Sorter.length; y++) {

               if (parseFloat(Sorter[y][0]) < parseFloat(Sorter[x][0])) {

                   var tmp = Sorter[x];

                   Sorter[x] = Sorter[y];

                   Sorter[y] = tmp;

               }

           }

       }

 

参考资源

排序算法:

1号排序方案:冒泡排序

2号排序方案:选择排序

 

从算法上看,选择排序法要比冒泡排序法快。

 

下面是两种排序效果的实际对比:

 

IE8测试结果(毫秒)

FX3.6测试结果(毫秒)

说明

1号排序方案

922,929

630,607

净值列DESC,ASC

2号排序方案

837,850

542,514

净值列DESC,ASC

 

可见,2号排序方案稍快,并且两种方案,在FireFox下面都比IE要快不少。

 

提供类似功能的资源地址:

http://blog.163.com/wangjia_419/blog/static/20044165201081533259380

 

Last edited Mar 15, 2011 at 8:14 AM by dth, version 1

Comments

No comments yet.