比较简单的排序方法,对于小型的排序,在客户端完成就可,麻烦客户端,以来刷新麻烦来回传数据,二来写代码也容易出错.
调用方法:给datagrid的表头的各个列标题添加onclick事件,然后调用sortTable('tblId', colIndex),分别传入要排序的表或datagrid的id号,要排序的列的索引 例如
<asp:BoundColumn DataField="gb_id" HeaderText="<div onclick="sortTable('dgResult', 0)">ID</div>"></asp:BoundColumn>
1function compareMutiTRs(colIndex)
2{
3 return function compareTRs(tr1, tr2)
4 {
5 var value1;
6 var value2;
7 //必须得考虑到 合并单元格的问题
8 var isNull = (tr2.cells[colIndex]== null || tr1.cells[colIndex] == null)
9 if (isNull)
10 {
11 value1 = tr1.cells[0].firstChild.nodeValue;
12 value2 = tr2.cells[0].firstChild.nodeValue;
13 }
14 else
15 {
16 value1 = tr1.cells[colIndex].firstChild.nodeValue;
17 value2 = tr2.cells[colIndex].firstChild.nodeValue;
18 }
19
20 if (value1 > value2)
21 {
22 return 1;
23 }
24 else if (value1 < value2)
25 {
26 return -1;
27 }
28 else
29 {
30 return 0;
31 }
32 }
33}
34
35var lastCol = -1;
36function sortTable(tblId, colIndex)
37{
38 var tbl = document.getElementById(tblId);
39 var trs = tbl.rows;
40 var arrayTRs = new Array();
41 var lastTR = null;
42 var start;
43 var end;
44
45 var flagUp = trs[0].cells.length == 1;
46 var flagDown = trs[trs.length - 1].cells.length == 1
47 if (flagUp)//如果分页提示在上
48 {
49 start = 2;
50 end = trs.length;
51 }
52 else if (flagDown)//如果分页提示在下
53 {
54 start = 1;
55 end = trs.length -1;
56 }
57 else if (flagUp && flagDown)//上下都有分页提示
58 {
59 start = 2;
60 end = trs.length - 1;
61 }
62 else//上下都没有分页提示
63 {
64 start = 1;
65 end = trs.length;
66 }
67
68 if (trs[trs.length - 2].cells.length != trs[trs.length - 1].cells.length)
69 {
70 lastTR = trs[trs.length - 1];//把最后一行保存起来
71 }
72
73 for (var i = start; i < end; i++)//
74 {
75 arrayTRs.push(trs[i]);
76 }
77
78 if (colIndex == lastCol)
79 {
80 arrayTRs.reverse();
81 }
82 else
83 {
84 arrayTRs.sort(compareMutiTRs(colIndex));
85 }
86
87 var fragment = document.createDocumentFragment();
88
89 for (var j = 0; j < arrayTRs.length; j++)
90 {
91 fragment.appendChild(arrayTRs[j]);
92 }
93
94 if (lastTR != null)
95 {
96 fragment.appendChild(lastTR);
97 }
98
99 tbl.tBodies[0].appendChild(fragment);
100
101 lastCol = colIndex;
102}
2{
3 return function compareTRs(tr1, tr2)
4 {
5 var value1;
6 var value2;
7 //必须得考虑到 合并单元格的问题
8 var isNull = (tr2.cells[colIndex]== null || tr1.cells[colIndex] == null)
9 if (isNull)
10 {
11 value1 = tr1.cells[0].firstChild.nodeValue;
12 value2 = tr2.cells[0].firstChild.nodeValue;
13 }
14 else
15 {
16 value1 = tr1.cells[colIndex].firstChild.nodeValue;
17 value2 = tr2.cells[colIndex].firstChild.nodeValue;
18 }
19
20 if (value1 > value2)
21 {
22 return 1;
23 }
24 else if (value1 < value2)
25 {
26 return -1;
27 }
28 else
29 {
30 return 0;
31 }
32 }
33}
34
35var lastCol = -1;
36function sortTable(tblId, colIndex)
37{
38 var tbl = document.getElementById(tblId);
39 var trs = tbl.rows;
40 var arrayTRs = new Array();
41 var lastTR = null;
42 var start;
43 var end;
44
45 var flagUp = trs[0].cells.length == 1;
46 var flagDown = trs[trs.length - 1].cells.length == 1
47 if (flagUp)//如果分页提示在上
48 {
49 start = 2;
50 end = trs.length;
51 }
52 else if (flagDown)//如果分页提示在下
53 {
54 start = 1;
55 end = trs.length -1;
56 }
57 else if (flagUp && flagDown)//上下都有分页提示
58 {
59 start = 2;
60 end = trs.length - 1;
61 }
62 else//上下都没有分页提示
63 {
64 start = 1;
65 end = trs.length;
66 }
67
68 if (trs[trs.length - 2].cells.length != trs[trs.length - 1].cells.length)
69 {
70 lastTR = trs[trs.length - 1];//把最后一行保存起来
71 }
72
73 for (var i = start; i < end; i++)//
74 {
75 arrayTRs.push(trs[i]);
76 }
77
78 if (colIndex == lastCol)
79 {
80 arrayTRs.reverse();
81 }
82 else
83 {
84 arrayTRs.sort(compareMutiTRs(colIndex));
85 }
86
87 var fragment = document.createDocumentFragment();
88
89 for (var j = 0; j < arrayTRs.length; j++)
90 {
91 fragment.appendChild(arrayTRs[j]);
92 }
93
94 if (lastTR != null)
95 {
96 fragment.appendChild(lastTR);
97 }
98
99 tbl.tBodies[0].appendChild(fragment);
100
101 lastCol = colIndex;
102}