توضیحات و دانلود

کشیدن ردیف ها از Source GridView به GridView با استفاده از jQuery در ASP.Net
0 0
کشیدن ردیف ها از Source GridView به GridView با استفاده از jQuery در ASP.Net

با سلام در این مقاله کوتاه توضیح می دهیم که چگونه می توانیم Rows را از Source GridView بکشیم و سپس با استفاده از jQuery آن را در یک مقصد دیگر GridView در ASP.Net رها کنیم.

کد HTML
کد HTML ساده و شامل دو GridViews gvSource منبع GridView و دیگری gvDest Destination GridView است.

<asp:GridView ID="gvSource" runat="server" CssClass="drag_drop_grid GridSrc" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="Item" HeaderText="Item"/>
        <asp:BoundField DataField="Price" HeaderText="Price"/>
    </Columns>
</asp:GridView>
<hr />
<asp:GridView ID="gvDest" runat="server" CssClass="drag_drop_grid GridDest" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="Item" HeaderText="Item" />
        <asp:BoundField DataField="Price" HeaderText="Price"/>
    </Columns>
</asp:GridView>

اتصال به منبع و مقصد GridViews
در اینجا منبع GridView را با بعضی از کالاهای خرید اتصال می دهیم و مقصد GridView به یک ردیف ساختگی محدود شده است.
C #

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[2] { new DataColumn("Item"), new DataColumn("Price") });
        dt.Rows.Add("Shirt", 450);
        dt.Rows.Add("Jeans", 3200);
        dt.Rows.Add("Trousers", 1900);
        dt.Rows.Add("Tie", 185);
        dt.Rows.Add("Cap", 100);
        dt.Rows.Add("Hat", 120);
        dt.Rows.Add("Scarf", 290);
        dt.Rows.Add("Belt", 150);
        gvSource.UseAccessibleHeader = true;
        gvSource.DataSource = dt;
        gvSource.DataBind();
 
        dt.Rows.Clear();
        dt.Rows.Add();
        gvDest.DataSource = dt;
        gvDest.DataBind();
    }
}

اجرای قابلیت Drag and Drop با استفاده از jQuery
 برای پیاده سازی قابلیت Drag and Drop بین منبع و مقصد GridViews از jQuery UI Sortable Plugin استفاده می کنیم.

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js"></script>
<link rel="Stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" />
<script type="text/javascript">
    $(function () {
        $(".drag_drop_grid").sortable({
            items: 'tr:not(tr:first-child)',
            cursor: 'crosshair',
            connectWith: '.drag_drop_grid',
            axis: 'y',
            dropOnEmpty: true,
            receive: function (e, ui) {
                $(this).find("tbody").append(ui.item);
            }
        });
        $("[id*=gvDest] tr:not(tr:first-child)").remove();
    });
</script>

در زیر روش های CSS برای منبع و مقصد GridViews آورده شده است

<style type="text/css">
    .GridSrc td
    {
        background-color: #A1DCF2;
        color: black;
        font-size: 10pt;
        font-family:Arial;
        line-height: 200%;
        cursor: pointer;
        width:100px
    }
    .GridSrc th
    {
        background-color: #3AC0F2;
        color: White;
        font-family:Arial;
        font-size: 10pt;
        line-height: 200%;
        width:100px;
    }
    .GridDest td
    {
        background-color: #eee !important;
        color: black;
        font-family:Arial;
        font-size: 10pt;
        line-height: 200%;
        cursor: pointer;
        width:100px
    }
    .GridDest th
    {
        background-color: #6C6C6C !important;
        color: White;
        font-family:Arial;
        font-size: 10pt;
        line-height: 200%;
        width:100px
    }
</style>

 


دانلود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

ارسال نظر
ارسال پیام به :