DataGrid GridView 单页javascript 表头排序_.NET_编程开发_程序员俱乐部

JS代码如下：

 1 <script>
 2 var curObj;
 3 var shell = 1;
 4 function sortTable(L) {
 5  var start=new Date()
 6  var i;
 7  var DataGrid1 = document.getElementByIdx_x_x("DataGrid1");
 8 var theRows=new Array();
 9 for (i = 1; i < DataGrid1.rows.length-1; i++) {
10     var str = "";
11     var tds = DataGrid1.rows[i].getElementsByTagName_r("td");
12     var cloum = tds[L].innerText;
13     if (L == 7 || L == 8 || L == 9) {
14         cloum = tds[L].innerHTML;
15     }
16     var html = DataGrid1.rows[i].outerHTML;
17     DataGrid1.rows[i].outerHTML);
18     theRows[i - 1] = new Array(cloum,html);
19 }
20 if (shell==1){
21 shell=2;
22 //根据不同类型的列选择不同的排序方式，据实际情况定
23  switch(parseInt(L)){
24  case 5:
25   theRows.sort(sortRows);
26   break;
27  case 4,3:
28   theRows.sort(sortRows1);
29   break;
30  default:
31   theRows.sort(sortRows2);
32   }
33 }
34 else{
35 shell=1;
36  switch(parseInt(L)){
37  case 5:
38   theRows.sort(sortRows0);
39   break;
40  case 4,3:
41   theRows.sort(sortRows11);
42   break;
43  default:
44   theRows.sort(sortRows22);
45  }
46 }
47 var str=''
48 for(i=0;i<theRows.length;i++) {
49  str+=theRows[i][1];
50  }
51  DataGrid1.outerHTML = '<table border="0" cellPadding="-1" cellSpacing="0" BorderColor="White" width="100%" bordercolor="#ffffff" name="DataGrid1" id="DataGrid1">'  + DataGrid1.rows[0].outerHTML + str + '</table>'
52 curObj=null;
53 
54 return ;
55 }
56 //降序－－－－－－－－－－－－－－－－－－－
57 //数值类型的列进行排序
58 function sortRows(x,y) {
59   if(x[0]>y[0]) return -1;
60   else if(x[0]<y[0]) return 1;
61   else return 0;
62 }
63 //金额类型的列进行排序
64 function sortRows1(x, y) {
65     var aa = x[0].replace("￥", "").replace(",", "");
66     var bb = y[0].replace("￥", "").replace(",", "");
67   if(parseInt(aa)>parseInt(bb)) return -1;
68   else if(parseInt(aa)<parseInt(bb)) return 1;
69   else return 0;
70 }
71 //处理字符串列的排序
72 function sortRows2(x,y) {
73     return y[0].localeCompare(x[0]);
74 }
75 //end 降序－－－－－－－－－－－－－－－－－－－－－
76 //升序－－－－－－－－－－－－－－－－－－ －
77 //数值类型的列进行排序
78 function sortRows0(x,y) {
79   if(x[0]<y[0]) return -1;
80   else if(x[0]>y[0]) return 1;
81   else return 0;
82 }
83 //金额类型的列进行排序
84 function sortRows11(x, y) {
85     var aa = x[0].replace("￥", "").replace(",", "");
86     var bb = y[0].replace("￥", "").replace(",", "");
87   if(parseInt(aa)<parseInt(bb)) return -1;
88   else if(parseInt(aa)>parseInt(bb)) return 1;
89   else return 0;
90 }
91 //处理字符串类型的列排序
92 function sortRows22(x,y) {
93     return x[0].localeCompare(y[0]);
94 }
95 //end 升序－－－－－－－－－－－－－－－－－－－－－
96   </script>

后台调用方法：

 1 private void DataGrid1_ItemDataBound(object sender, DataGridItemEventArgs e)
 2 {
 3             if (e.Item.ItemType == ListItemType.Header)
 4             {
 5                 e.Item.Cells[2].Attributes["onClick"] = "javascript:sortTable(1)";
 6                 e.Item.Cells[3].Attributes["onClick"] = "javascript:sortTable(2)";
 7                 e.Item.Cells[4].Attributes["onClick"] = "javascript:sortTable(3)";
 8                 e.Item.Cells[5].Attributes["onClick"] = "javascript:sortTable(4)";
 9                 e.Item.Cells[6].Attributes["onClick"] = "javascript:sortTable(5)";
10                 e.Item.Cells[8].Attributes["onClick"] = "javascript:sortTable(7)";
11                 e.Item.Cells[9].Attributes["onClick"] = "javascript:sortTable(8)";
12                 e.Item.Cells[10].Attributes["onClick"] = "javascript:sortTable(9)";
13             }
14 }