انتقال سطرهای گریدویو توسط Jquery در Asp.Net

در این مقاله سطرهای گریدویو را توسط Jquery در Asp.Net انتقال می دهیم.

انتقال سطرهای گریدویو توسط Jquery در Asp.Net

در این مقاله  سطرهای گریدویو را توسط Jquery در Asp.Net انتقال می دهیم.

ابتدا در پایگاه داده خود یک جدول به نام EMPLOYEE به شکل زیر بسازید:

سپس مقداری داده در جدول خود درج کنید:

حال یک پروژه جدید از نوع وب فرم بسازید و یک صفحه جدید به نام Default.aspx به پروژه خود اضافه کنید

در قسمت head  باید آدرس های فایل های jquery را به صفحه اضافه کنید:

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="jquery.tablednd.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#gvEmployee").tableDnD();
        })
    </script>

سپس از جعبه ابزار خود یک کنترل گرید به صفحه اضافه کنید:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="MoveableRecords.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>حرکت سطر های گرید ویو</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="jquery.tablednd.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#gvEmployee").tableDnD();
        })
    </script>
</head>
<body dir="rtl">
    <form id="form1" runat="server">
        <table style="border: solid 15px blue; width: 100%; vertical-align: central;">
            <tr>
                <td style="padding-left: 50px; padding-top: 20px; padding-bottom: 20px; background-color: skyblue; font-size: 20pt; color: orangered;">جابه جایی سطر های گرید ویو               </td>
            </tr>
            <tr>
                <td style="text-align: left; padding-left: 50px; border: solid 1px red;">
                    <asp:GridView ID="gvEmployee" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None" CellSpacing="4" >
                        <AlternatingRowStyle BackColor="White" />
                        <EditRowStyle BackColor="#2461BF" />
                        <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                        <HeaderStyle BackColor="#507CD1" Font-Bold="true" ForeColor="White" />
                        <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
                        <RowStyle BackColor="#EFF3FB" Font-Names="Verdana" />
                       
                        <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
                        <SortedAscendingCellStyle BackColor="#F5F7FB" />
                        <SortedAscendingHeaderStyle BackColor="#6D95E1" />
                        <SortedDescendingCellStyle BackColor="#E9EBEF" />
                        <SortedDescendingHeaderStyle BackColor="#4870BE" />
                    </asp:GridView>
                </td>
            </tr>

        </table>
    </form>
</body>
</html>

در رویداد صفحه خود یک متد به نام BindGrid فراخوانی کنید:

   protected void Page_Load(object sender, EventArgs e)  
        {  
            if (!Page.IsPostBack)  
                BindGrid();  
        }

در بدنه تابع  بالا ابتدا به پایگاه داده خود متصل شده و تمامی رکورد های جدول employee را میخوانیم و گرید ویو را پر میکنیم:

       private void BindGrid()
        {
            SqlConnection con = new SqlConnection();
            con.ConnectionString = @"Server=.;database=EmployeeManagement;UID=sa; pwd=123;";
            SqlCommand cmd = new SqlCommand("SELECT * FROM EMPLOYEE", con);
            da = new SqlDataAdapter(cmd);
            da.Fill(dt);
            con.Open();
            cmd.ExecuteNonQuery();
            con.Close();

            if (!object.Equals(dt, null))
            {
                if (dt.Rows.Count > 0)
                {
                    gvEmployee.DataSource = dt;
                    gvEmployee.DataBind();
                }
                else
                {
                    gvEmployee.DataSource = null;
                    gvEmployee.DataBind();
                }
            }
        }

کد کامل صفحه Default.aspx.cs :

using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;

namespace MoveableRecords
{
    public partial class Default : System.Web.UI.Page
    {
        SqlDataAdapter da;
        DataTable dt = new DataTable();

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
                BindGrid();
        }

        private void BindGrid()
        {
            SqlConnection con = new SqlConnection();
            con.ConnectionString = @"Server=.;database=EmployeeManagement;UID=sa; pwd=123;";
            SqlCommand cmd = new SqlCommand("SELECT * FROM EMPLOYEE", con);
            da = new SqlDataAdapter(cmd);
            da.Fill(dt);
            con.Open();
            cmd.ExecuteNonQuery();
            con.Close();

            if (!object.Equals(dt, null))
            {
                if (dt.Rows.Count > 0)
                {
                    gvEmployee.DataSource = dt;
                    gvEmployee.DataBind();
                }
                else
                {
                    gvEmployee.DataSource = null;
                    gvEmployee.DataBind();
                }
            }
        }


    }
}

در این مثال از یک فایل jquery.tablednd.js استفاده کردیم که در صفحه خود به گرید یک id به نام gvEmployee دادیم که در تگ script  توسط این id تابع tableDnD موجود در فایل jquery  را فراخوانی میکنیم که این فایل jquery وظیفه انتقال سطرهای گرید ویو را بر عهده دارد:

   <script type="text/javascript">
        $(function () {
            $("#gvEmployee").tableDnD();
        })
    </script>

حالا میتوانید برنامه خود را اجرا کنید:

حالا یک سطر را انتخاب کنید و آنرال جا به جا کنید:

فایل های ضمیمه