【原创】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>());
}
源码下载地址（免积分下载）
http://download.csdn.net/detail/mansai/6624037 实现tr拖放排序 gridview jqueryui sortable 非连续排序
补充：.NET技术 , ASP.NET
