Introduction
Today, I am going to discuss how to move up or move down GridView
row using jQUERY in ASP.NET.
Background
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.)
<%@ 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="⇑"
style="color: Red;"/>
<input id="btnDown"
type="button" value="⇓"
style="color: Red;" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</form>
</body></html>
5.Add the following code in your code behind file - Default.aspx.cs (I have added necessary comments for understanding.)
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");
gvStudent.DataSource = ds;
gvStudent.DataBind();
}
}
原文地址:http://www.codeproject.com/Tips/730399/Move-up-or-Move-down-GridView-rows-using-jQuery-AS