使用 JQuery Sortable 重新排序后如何将 .NET Gridview 行顺序保存到数据库

Posted 2023-05-09

【中文标题】使用 JQuery Sortable 重新排序后如何将 .NET Gridview 行顺序保存到数据库

【英文标题】：How to save .NET Gridview row order to database after reordering using JQuery Sortable

【发布时间】：2017-07-04 19:57:16

【问题描述】：

我有一个包含两个字段的数据库表，ColumnName 和 SortOrder。

我正在使用 gridview 在 C# .NET Web 应用程序的页面上显示 ColumnName 字段。

我希望用户能够通过拖放 gridview 行来重新排序行，然后通过将新行号插入到 DB 表的 SortOrder 字段中来将这个新顺序保存到数据库中。

我已设法使用JQueryUI Sortable 使拖放功能正常工作。但我正在努力获取行服务器端的新顺序，以便将其导入数据库。

网格视图代码

<asp:GridView ID="GV_ColumnNames" runat="server" CssClass="sortable">
    <Columns>
        <asp:BoundField DataField="ColumnName" HeaderText="ColumnName" SortExpression="ColumnName" />
    </Columns>
</asp:GridView>

JQuery

    $(function () 

        $(".sortable").sortable(
            items: "tr:not(tr:first-child)",
            axis: "y"
        ).disableSelection();

    );

作为测试我是否可以获得新的行顺序客户端，我在下面编写了 C# 代码，但这只是输出原始行顺序。

    protected void BTN_Confirm_Click(object sender, EventArgs e)
    
        string orderTest = "";

        foreach(GridViewRow row in GV_FlatFileColumnSetting.Rows)
        
            orderTest += row.Cells[0].Text;
        

        Response.Write(orderTest);

    

是否有人对我如何从客户端获取行顺序到服务器端有任何想法，以便我可以运行 SQL 命令将新顺序插入数据库？

非常感谢任何帮助。

【参考方案1】：

jquery 可排序为每次删除元素时都会触发的更新事件。它还有一个 toArray 方法，该方法按元素当前出现的顺序返回元素 id 的数组。 将它与 AJAX 一起使用，您可以执行类似的操作来调用服务器端代码。 这会将 id 数组作为需要在服务器端解码的 json 字符串传递。

$(function () 
  $(".sortable").sortable(
    items: "tr:not(tr:first-child)",
    axis: "y",
    update: function(event, ui) 
      var sortedIDs = $(event.target).sortableGrid( "toArray" );
      $.ajax(
        url: your url,
        data: JSON.stringify(sortedIDs)
      );
    
  ).disableSelection();
);

对不起，我不知道 .NET，所以我不能帮助你服务器端，但希望这会有所帮助。