Move Up or Move Down GridView Rows using jQuery

The GridView is populated from code behind in Page_Load event and using jQuery we can re-order jQuery row. In every row of GridView, there will be UpArrow button and DownArrow button. Clicking UpArrow button, the associated row will be moved up and clicking DownArrow button, the associated row will be moved down.

Using the Code

Now, I am going to share step by step:

Open Visual Studio.
Create one new Empty Web Project.
Add a new file to your solution. Name it "Default.aspx".

Add the following code in your "Default.aspx" (I have added necessary comments for understanding.)

Collapse | Copy Code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
   <script type ="text/javascript" 
   src ="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  
    <script type="text/javascript">
        var MoveRowUp = "table[id*=gvStudent] input[id*='btnUp']"; //Instance of MoveUp btn
        var MoveRowDown = "table[id*=gvStudent] input[id*='btnDown']";//Instance of MoveDown btn

        $(document).ready(function () {
            DisableRow(); //This function disables first and last row
            //This function Moves up the GridView row
            $(MoveRowUp).click(function () {               
                $(this).parents("tr").insertBefore($(this).parents("tr").prev())            
                DisableRow();
            });

            //This function Moves down the Gridview row
            $(MoveRowDown).click(function () {
                $(this).parents("tr").insertAfter($(this).parents("tr").next());               
                DisableRow();
            });
            //This function disables first and last row
            function DisableRow() {
                $("#<%=gvStudent.ClientID%> 
                tr:has(td) input[id*='btnUp']").attr("disabled", false);
                $("#<%=gvStudent.ClientID%> 
                tr:has(td):first input[id*='btnUp']").attr("disabled", true);
                $("#<%=gvStudent.ClientID%> 
                tr:has(td) input[id*='btnDown']").attr("disabled", false);
                $("#<%=gvStudent.ClientID%> 
                tr:last input[id*='btnDown']").attr("disabled", true);
            }
        });       
                 
    </script>    
</head>
<body>
<form id="form1" runat="server">
     <asp:GridView ID="gvStudent" runat="server" 
     AutoGenerateColumns="False">
        <Columns>
            <asp:BoundField DataField="SNAME" 
            HeaderText="Student Name" SortExpression="SNAME" />
            <asp:BoundField DataField="Class" 
            HeaderText="Student Class" SortExpression="Class" />
            <asp:TemplateField HeaderText="Move Row">
                <ItemTemplate>
                   <input id="btnUp"  
                   type="button" value="&uArr;" 
                   style="color: Red;"/> &nbsp;
                    <input id="btnDown" 
                    type="button" value="&dArr;" 
                    style="color: Red;" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>        
</form>
</body></html>

Add the following code in your code behind file - Default.aspx.cs (I have added necessary comments for understanding.)

Collapse | Copy Code

using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
public partial class Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {              
        if (!this.IsPostBack)
        {
             LoadStudent(); //Populates GridView from Students table
        }
    }
    protected void LoadStudent()
    {
        SqlConnection conn = new SqlConnection("YOUR CONNECTION STRING");
        SqlCommand cmd = new SqlCommand
        ("Select * from Students", conn); //Use your DB table name instead of Students
        SqlDataAdapter da = new SqlDataAdapter(cmd);
        DataSet ds = new DataSet(); da.Fill
        (ds,"Students");

Collapse | Copy Code

        gvStudent.DataSource = ds;
        gvStudent.DataBind();       
    }
}

Now your code is ready. Press F5 to run. Happy coding!!!

Points of Interest

For more information on jQuery, you can find online help at www.jquery.com.

from:

http://technet.microsoft.com/zh-cn/library/cc163829.aspx

http://blog.sina.com.cn/s/blog_661beca00100snex.html

http://www.cnblogs.com/lxblog/archive/2013/01/11/2856582.html

相关阅读:
c++ list_iterator demo
模板元编程例子
 !a && !b 和 !(a || b) 的故事
 简明解释算法中的大O符号
 重构oceanbase的一个函数
 正则表达式识别汉字
 编写易于理解代码的六种方式
 Linux下的tar压缩解压缩命令详解
 2013 年 —— Facebook 在开源方面的工作介绍
 Kent Beck揭秘Facebook开发部署流程
原文地址：https://www.cnblogs.com/happy-Chen/p/3636993.html