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

这篇博客详细介绍了如何实现GridView的前台排序和行移动功能,包括前后台代码实现及JavaScript脚本。提供了一个链接到具体问题的讨论,并分享了示例图片和代码下载链接。
摘要由CSDN通过智能技术生成

看到CSDN上许多的朋友问到这样的问题,都没几个人帮助解决掉,今天心情好就总结下,帮大家解决这个问题,

问题如下这个连接地址

http://topic.csdn.net/u/20080407/11/05a1957d-1e69-4310-a1b9-1dcbf28e3fd6.html?seed=1281358213

可以前台排序,左右移动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:;' οnclick='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;
    
/// <summary>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值