网格视图与拖放.获取新的数据顺序

本文关键字：数据 顺序 获取 视图 拖放 网格 | 更新日期: 2023-09-27 18:18:33

我将通过一个使用拖放网格视图的示例，您可以在其中重新排序数据。我试图找出一旦用户重新排序的网格视图，他们如何喜欢它，我怎么能得到数据在第一列的顺序，他们已经改变了它。我已经尝试添加一些代码到按钮事件来得到这个，但它只得到原始的顺序，而不是什么用户改变了它。

ASPX Page: -

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Untitled Page</title>
<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>
<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>
</head>
<body>
    <form id="form1" runat="server">
    <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>
        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
    </form>
</body>
</html>

ASPX.CS Page: -

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
public partial class _Default : System.Web.UI.Page
{
    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();
        }
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        foreach (GridViewRow row in gvSource.Rows)
        {
            Response.Write(row.Cells[0].Text.ToString());
        }
    }
}

网格视图与拖放.获取新的数据顺序

你可以使用jquery 'tableDnD'插件与asp.net listview或repeater。
这样的:
ASP。 

        <asp:Repeater>
            <ItemTemplate>
                <tr id='<%# Eval("ItemID") %>'>
                <!-- Assign the unique key as the id of the row. -->
                    ...
                </tr>
            </ItemTemplate>
        </asp:Repeater>
JQuery 

    $(document).ready(function () {
        $("#tbl").tableDnD({
            onDrop: function (table, row) {
                var RowIDs = '';
                $('#tbl tr').each(function () {
                    RowIDs += $(this).attr('id') + ",";
                });
                $('#<%= hdnIDs.ClientID %>').val(RowIDs);
                // Save the resulting sequence in a hidden field.
                $('#<%= btnSaveOrder.ClientID %>').click();
                // Postback the page and process the new sequence on server side.
            },
            onDragClass: "myDragClass",
        });
    });
相关文章：