• 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 }
  • 相关阅读:
    idea 找不到包或找不到符号
    JOISC部分题解
    欧拉数学习笔记
    [清华集训2017]生成树计数
    [ZJOI2019]开关
    【题解】CF817E Choosing The Commander
    CSP-S 2020游记
    【学习笔记】线段树合并
    【题解】[IOI2005]Riv 河流
    【题解】哈希冲突
  • 原文地址:https://www.cnblogs.com/Chaser-Eagle/p/3683826.html
Copyright © 2020-2023  润新知