1
我有一個帶有可拖動和可拖放行的GridView。我使用tableDnD來實現這一點。拖放部分工作正常。我面臨的問題是，當我嘗試獲取重新排序的網格數據時，我需要將其保存回數據庫。我的代碼如下所示：使用TableDnD拖放GridView行
<script type="text/javascript">
var strorder;
function reorder(table, row) {
if (!table)
table = $("#<%= gdvSteps.ClientID %>")[0];
var rows = table.tBodies[0].rows;
var step = 1;
for (var i = 0; i < rows.length; i++) {
strorder = strorder + $(".orderbox", rows[i]).html + "|";
$(".orderbox", rows[i]).html(step++);
strorder = strorder + $(".orderbox", rows[i]).html + ";";
}
}
$(document).on('click', '#<%=btnSave.ClientID %>', function() {
$.ajax({
type: "POST",
url: "Test_Grid.aspx/GridViewReorders",
data: '{"Reorder":"' + strorder + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
cache: false,
success: function (msg) {
alert("successful!" + msg.d);
}
})
return false;
});
$(document).ready(function() {
$("#<%= gdvSteps.ClientID %>").tableDnD({
dragHandle: ".dragHandle",
onDrop: reorder
});
$("#<%= gdvSteps.ClientID %> tr").hover(function() {
$(this.cells[0]).addClass('showDragHandle');
}, function() {
$(this.cells[0]).removeClass('showDragHandle');
});
});
</script>
<div>
<asp:GridView ID="gdvSteps" runat="server" OnRowEditing="gdvSteps_RowEditing"
OnRowUpdating="gdvSteps_RowUpdating" OnRowCancelingEdit="gdvSteps_RowCancelingEdit"
AutoGenerateColumns="false">
<Columns>
<asp:ImageField ItemStyle-CssClass="dragHandle">
</asp:ImageField>
<asp:BoundField DataField="Step" HeaderText="P" ItemStyle-CssClass="orderbox" ItemStyle-Width="10px" />
<asp:TemplateField HeaderText="Sistem">
<ItemTemplate>
<asp:Label ID="lblSistem" runat="server" Text='<%# Bind("Sistem") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:DropDownList ID="ddlSistem" runat="server" DataTextField="SUP_MCH_CODE" DataValueField="SUP_MCH_CODE"
OnSelectedIndexChanged="ddlSistem_SelectedIndexChanged" AutoPostBack="true">
</asp:DropDownList>
</EditItemTemplate>
<ItemStyle Width="40px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Box">
<ItemTemplate>
<asp:Label ID="lblBox" runat="server" Text='<%# Bind("Box") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:DropDownList ID="ddlBox" runat="server" DataTextField="MCH_CODE" DataValueField="OBJID">
</asp:DropDownList>
</EditItemTemplate>
<ItemStyle Width="40px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Job">
<ItemTemplate>
<asp:Label ID="lblJob" runat="server" Text='<%# Bind("Job") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:DropDownList ID="ddlJob" runat="server" DataTextField="Job" DataValueField="IDJob">
</asp:DropDownList>
</EditItemTemplate>
<ItemStyle Width="300px" />
<FooterStyle HorizontalAlign="Left" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Observations">
<ItemTemplate>
<asp:Label ID="lblObservations" runat="server" Text='<%# Bind("Observations") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtObservations" runat="server" DataTextField="Observations" DataValueField="Observations">
</asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Executant">
<ItemTemplate>
<asp:Label ID="lblExecutant" runat="server" Text='<%# Bind("Executant") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:DropDownList ID="ddlExecutant" runat="server" DataTextField="Executant" DataValueField="IDExecutant">
</asp:DropDownList>
</EditItemTemplate>
<ItemStyle Width="250px" />
<FooterStyle HorizontalAlign="Left" />
</asp:TemplateField>
<asp:TemplateField ShowHeader="False">
<ItemTemplate>
<asp:ImageButton ID="btnEdit" runat="server" CausesValidation="False" CommandName="Edit"
ImageUrl="~/Imagenes/Edit.png" Text="Edit" />
</ItemTemplate>
<EditItemTemplate>
<table>
<tr>
<td>
<asp:ImageButton ID="btnUpdate" runat="server" CausesValidation="True" ImageUrl="~/Imagenes/Ok.png"
CommandName="Update" Text="Update"></asp:ImageButton>
</td>
<td>
<asp:ImageButton ID="btnCancel" runat="server" CausesValidation="False" ImageUrl="~/Imagenes/Cancel.png"
CommandName="Cancel" Text="Cancel"></asp:ImageButton>
</td>
</tr>
</table>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField ShowHeader="False">
<ItemTemplate>
<asp:ImageButton ID="btnDelete" runat="server" CausesValidation="False" CommandName="Delete"
ImageUrl="~/Imagenes/Delete.png" Text="Delete" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:Button ID="btnSave" runat="server" Text="Save" />
</div>
而且代碼隱藏功能我打電話是這樣的：
[WebMethod]
public static string GridViewReorders(string Reorder)
{
return Reorder.Split(';')[0];
}
暫時我只是測試，如果我能得到數據，當我打的保存按鈕。
事情是，當我重新排序行之前按鈕，它工作正常。正在調用該方法並顯示警報消息。但是，如果我在重新排序行之後按下按鈕，則不執行任何操作，並且該方法未被調用。
我不知道這是否是獲取重新排序的行數據的最佳方式。我不知道爲什麼按鈕或方法在重新排序後停止工作。
任何幫助將不勝感激！
以下是幫我建立這個鏈接：
http://isocra.com/2008/02/table-drag-and-drop-jquery-plugin/
http://aspdotnet-example.blogspot.com.ar/2011/10/gridview-reorder-row-drag-and-drop.html
你有沒有想過這個？ – PeonProgrammer