·您现在的位置: 云翼网络 >> 文章中心 >> 网站建设 >> 网站建设开发 >> ASP.NET网站开发 >> DataGrid GridView 单页javascript 表头排序

DataGrid GridView 单页javascript 表头排序

作者:佚名      ASP.NET网站开发编辑:admin      更新时间:2022-07-23

DataGrid GridView 单页javascript 表头排序

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 }