[置顶] gridview结合jqueryui实现tr拖放排序，并保存到服务端

先上图片看看效果，(排序规则为非连续，不影响原有顺序结构）
希望资深级专家看完源码，能指导一下。

1、数据结构（id与orderid，主键与排序字段）
2、gridview解析为tbody格式方便jqueryui调用
给gridview增加PreRender事件

protected void GridView1_PreRender(object sender, EventArgs e)
    {
        GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
    }

gridview源码

<asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333"
            GridLines="None" EmptyDataText="EmptyData" AutoGenerateColumns="False"
            Width="450px" OnPreRender="GridView1_PreRender">
            <RowStyle BackColor="#EFF3FB" />
            <Columns>
                <asp:BoundField DataField="id" HeaderText="Id" />

                <asp:TemplateField HeaderText="Product">
                    <ItemTemplate>
                        <asp:Label ID="Label1" runat="server" Text='<%# Eval("ListName").ToString().Replace("<br>"," ") %>'></asp:Label>
                    </ItemTemplate>
                    <ItemStyle Wrap="False" />
                </asp:TemplateField>
                <asp:BoundField DataField="OrderId" HeaderText="OrderId" />
            </Columns>
            <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
            <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
            <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <EditRowStyle BackColor="#2461BF" />
            <AlternatingRowStyle BackColor="White" />
        </asp:GridView>

3、jqueryui拖放排序源码

<script src="JS/jquery/jquery.min.js"></script>
    <script src="JS/jquery-ui/jquery-ui.min.js"></script>
    
    <script type="text/javascript">
        // <!CDATA[
        $(function () {
            var startRow;//获取拖放时的起始table行号
            //得到原始排列顺序，记录在OrderIds一维数组中
           var OrderIds = new Array();
            $("#GridView1 tbody tr").each(function (i) {
                OrderIds[i] = $("#GridView1 tbody tr:eq(" + i + ") td:eq(2)").text();
            })
            //固定table列宽
            var fixHelper = function (e, ui) {
                ui.children().each(function () {
                    $(this).width($(this).width());
                });
                startRow = $(ui).parent().find("tr").index($(ui)[0]);//获取拖放时的起始table行号
                return ui;
            };
            $("#GridView1 tbody").sortable({
                helper: fixHelper,
                axis: 'y',
                cursor: 'move',
                start: function (e, ui) {
                    ui.helper.css({ "background": "#ffef8c" })//拖动时的行，要用ui.helper  
                    return ui;
                },
                stop: function (e, ui) {
                    setTrBgcolor();//设置拖放后隔行背景色
                    ui.item.css({ "background": "#ffef8c" });//释放鼠标时，要用ui.item才是释放的行  
                    //获取拖放排序後table行号
                    var stopRow = $(ui.item).parent().find("tr").index($(ui.item)[0]);
                    //有拖放动作，但没有改变行序
                    if (stopRow == startRow) {
                        return false;
                    }
                    //判断是否上移拖放,交换
                    if (stopRow < startRow) {
                        var temp = stopRow;
                        stopRow = startRow;
                        startRow = temp;
                    }
                    var sql = "";//ajax传到后台sql语句序列
                    for (var i = startRow; i <= stopRow; i++) {
                        $("#GridView1 tbody tr:eq(" + i + ") td:eq(2)").text(OrderIds[i]);
                        sql += "UPDATE dbo.OA_Demo SET orderid=" + OrderIds[i] + " WHERE id=" + $("#GridView1 tbody tr:eq(" + i + ") td:eq(0)").text()+";";
                    }
                   //服務端保存
                    $.ajax({
                        type: "Post",
                        url: "sortDemo.aspx/OrderService",
                        data: "{sql:'"+sql+"'}",
                        contentType: "application/json; charset=utf-8",
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert(XMLHttpRequest.status);
                            alert(textStatus);
                            alert(errorThrown);
                        }
                    });
                    return ui;
                }
            }).disableSelection();
        });
        //隔行換色
        function setTrBgcolor() {
            $("#GridView1 tbody tr:even").css("background-color", "#EFF3FB");//给偶数行添加背景颜色
            $("#GridView1 tbody tr:odd").css("background-color", "#fff");//给奇数行添加背景颜色
        }

        // ]]>
    </script>

４、后端保存源码

//拖放排序後保存
    [System.Web.Services.WebMethod]
    public static void OrderService(string sql)
    {
        DBUtility.DbHelperSQL.ExecuteSqlTran(sql.Split(';').ToList<string>());
    }

源码下载地址（免积分下载）

点击打开链接