GridView之精讲作品:可以前台排序，左右移动GridView中选中行的东西

<% ... @ Page Language="C#" AutoEventWireup="true" CodeFile="WebForm1.aspx.cs" Inherits="WebForm1"  %>

< HTML >
   < HEAD  runat ="Server" >
         < title > movegrid </ title >
         < meta  name ="GENERATOR"  Content ="Microsoft Visual Studio .NET 7.1" >
         < meta  name ="CODE_LANGUAGE"  Content ="C#" >
         < meta  name ="vs_defaultClientScript"  content ="JavaScript" >
         < meta  name ="vs_targetSchema"  content ="http://schemas.microsoft.com/intellisense/ie5" >
         < script  src ="movegrid.js" ></ script >         
</ HEAD >
     < body >
         < form  id ="Form1"  method ="post"  runat ="server" >
             < br  />
             < table  width ="100%" >
                 < tr >
                     < td  style ="width: 100px" >
             < asp:datagrid  id ="PowerTable"  runat ="server"  BorderColor ="#CC9966"  BorderStyle ="None"  BorderWidth ="1px"
                BackColor ="White"  CellPadding ="4" >
< SelectedItemStyle  Font-Bold ="True"  ForeColor ="#663399"  BackColor ="#FFCC66" >
</ SelectedItemStyle >

< ItemStyle  ForeColor ="#330099"  BackColor ="White" >
</ ItemStyle >

< HeaderStyle  Font-Bold ="True"  ForeColor ="#FFFFCC"  BackColor ="#990000" >
</ HeaderStyle >

< FooterStyle  ForeColor ="#330099"  BackColor ="#FFFFCC" >
</ FooterStyle >

< PagerStyle  HorizontalAlign ="Center"  ForeColor ="#330099"  BackColor ="#FFFFCC"  Mode ="NumericPages" >
</ PagerStyle >
             </ asp:datagrid ></ td >
                 </ tr >
                 < tr >
                     < td  style ="width: 100%" >
                     < div  style ="display:none" >                          < input  onclick ="add_row(Main_Tab)"  type ="button"  value ="ins_row" >< input  onclick ="add_col(Main_Tab)"  type ="button"  value ="ins_col" >
                 < input  onclick ="del_row(Main_Tab)"  type ="button"  value ="Del_row" >   < input  onclick ="del_col(Main_Tab)"  type ="button"  value ="Del_col" >
                 < input  onclick ="res_tab(Main_Tab)"  type ="button"  value ="Restore" >   < input  onclick ="exp_tab(Main_Tab)"  type ="button"  value ="Export" ></ div >

                 < hr  />
                ( Move:  < input  id ="move"  onclick ="Move_up(Main_Tab)"  type ="button"  value ="Up" >
                         < input  id ="move"  onclick ="Move_down(Main_Tab)"  type ="button"  value ="Down" >
                 < input  id ="move"  onclick ="Move_left(Main_Tab)"  type ="button"  value ="Left" >   < input  id ="move"  onclick ="Move_right(Main_Tab)"  type ="button"  value ="Right" >
                ) </ td >
                 </ tr >
             </ table >
             < script > ...
                //alert(document.getElementById("DataGrid1").rows.length);
                var tbObj = document.getElementById("PowerTable");
                var rows_length = tbObj.rows.length-1;
                var page_size = 10;
                var page_count = Math.ceil(rows_length / page_size);
                //alert(Math.ceil(page_count));
                var pager_html = "";
                for(i = 1; i <= page_count; i++)...{
                    
                    pager_html += "[ <a href='javascript:;' onclick='chpager("+i+")'>"+i+"</a> ]&nbsp;";
                }
            
                 document.getElementById("pager").innerHTML = pager_html;
                chpager(1);        
                //alert(rows_length);
                //alert(page_size);        
                var last_page_count = rows_length - Math.floor(rows_length/page_size)*page_size;
                //alert(last_page_count);
                function chpager(nowpage)...{
                    for(i = 1; i <= tbObj.rows.length-1; i ++)...{
                        tbObj.rows[i].style.display = "none";                    
                    }                    
                    var show_page_end = nowpage == page_count ? (nowpage - 1)*page_size + last_page_count : nowpage* page_size;
                    for(k = (nowpage-1) * page_size + 1; k <= show_page_end; k ++)...{                        
                        tbObj.rows[k].style.display = "block";
                        tbObj.rows[k].style.borderBottom = "1px";
                    }
                }
             </ script >
         </ form >
     </ body >
</ HTML >

using  System;
using  System.Collections;
using  System.ComponentModel;
using  System.Data;
using  System.Drawing;
using  System.Web;
using  System.Web.SessionState;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Web.UI.HtmlControls;
using  System.Data.SqlClient;