คุณต้องระบุรหัสแถวของค่าคีย์ของคุณใน GridView ทำได้ง่ายๆ ในเหตุการณ์ OnRowDataBound เชื่อมโยงไฟล์ JavaScript ของคุณในหัวของคุณ jquery.tablednd.js เริ่มตั้งแต่วันที่ 30 ตุลาคม 2014
<script src="js/jquery-1.11.1.js" type="text/javascript"></script>
<script src="js/jquery.color.js" type="text/javascript"></script>
<script src="js/jquery.tablednd.js" type="text/javascript"></script>
เขียนหน้า JavaScript แทนที่ gvDevConfig ด้วยชื่อ GridView ของคุณ ใช้รูทีน ajax ของคุณเองเพื่ออัพเดตฐานข้อมูลของคุณด้วยลำดับใหม่ที่กำลังดรอป แทนที่ ctl00_indexPH_gvDevConfig ด้วยรหัสเซิร์ฟเวอร์ของ GridView ของคุณ หากไม่อยู่ใน PlaceHolder คุณสามารถ alert($.tableDnD.serialize()); เพื่อดูว่าซีเรียลไลซ์ใดที่ส่งผ่าน และแทนที่ทั้งหมดยกเว้นค่าตัวเลข โดยคั่นด้วยเครื่องหมายอัฒภาค
<script type="text/javascript" language="javascript">
function ActivateGrid() {
$("#<%=gvDevConfig.ClientID%>").tableDnD({
onDragClass: "highlight",
onDrop: function (table, row) {
$(row).animate({ backgroundColor: "#ffff99" }, 1000).animate({ backgroundColor: "white" }, 3500);
var values = $.tableDnD.serialize().replace(/&/gi, ";").replace(/%5B%5D/gi, "").replace(/ctl00_indexPH_gvDevConfig=/gi, "");
$.ajax({ type: "GET", url: "xml/ajax_spacers.aspx", async: true, data: "DevOrder=" + values, success: function (t) {
$(".jqOrderResults").html("Order Saved");
}
});
}
});
}
</script>
เพิ่มคลาสให้กับส่วนหัวและส่วนท้ายของคุณเพื่อป้องกันการลากและวางไปยังตำแหน่ง สร้างเหตุการณ์ OnRowDataBound เพื่อเปิดใช้งานคุณสมบัตินี้และกำหนดคีย์ให้กับแต่ละแถว โปรดทราบว่า GridView นี้มีอยู่ใน UpdatePanel และมี asp:ScriptManager บนเพจ ใช้ SqlDataSource หรือกระบวนการของคุณเองเพื่อเติม GridView
<asp:GridView ID="gvDevConfig" runat="server" DataSourceID="dsDevConfig" DataKeyNames="DevConfigurationID"
Width="795" CssClass="gvDevCfg" BorderStyle="None" GridLines="None" AutoGenerateColumns="false"
UseAccessibleHeader="false" OnRowDataBound="gvDevConfig_RDB" ShowFooter="true"
OnRowCommand="AddNewRecord">
<HeaderStyle CssClass="dgHead nodrop nodrag" />
<RowStyle VerticalAlign="Top" />
<AlternatingRowStyle VerticalAlign="Top" />
<FooterStyle CssClass="NewMaterialEntry nodrop nodrag" VerticalAlign="Top" HorizontalAlign="Center" />
<Columns>
<asp:Your Columns Here />
</Columns>
</asp:GridView>
โค้ดด้านหลังสำหรับ OnRowDataBound อัปเดต DevConfigurationID ไปยังฟิลด์คีย์ของคุณ เมื่อกริดแสดงผลข้อมูลและไปถึงส่วนท้ายแล้ว JavaScript จะถูกเรียกให้เริ่มต้นคุณสมบัติ DnD
protected void gvDevConfig_RDB(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
if (!((e.Row.RowState & DataControlRowState.Edit) > 0))
{
e.Row.Attributes.Add("id", DataBinder.Eval(e.Row.DataItem, "DevConfigurationID").ToString());
e.Row.Attributes["ondblclick"] = ClientScript.GetPostBackClientHyperlink(((LinkButton)(e.Row.FindControl("lbEdit"))), "", false);
}
}
else if (e.Row.RowType == DataControlRowType.Footer)
{
ScriptManager.RegisterStartupScript(((GridView)sender), this.GetType(), "ResetGrid", "<script type='text/javascript'>ActivateGrid();</script>", false);
}
}
นี่คือรูทีน ajax ของฉันที่เพิ่มลำดับโดยใช้ค่าคีย์ในตารางของฉันเพื่ออัปเดต คุณจะต้องปรับสิ่งนี้ให้เข้ากับตรรกะของคุณ และแน่นอน มีการตรวจสอบข้อผิดพลาดและค่าเพิ่มเติมในสตริงการสืบค้นของคุณ
private void UpdateDevOrder()
{
string keyValues = ValueOf.QueryString("DevOrder");
try
{
string[] RowData = keyValues.Split(";".ToCharArray(), StringSplitOptions.RemoveEmptyEntries);
int NewOrder = 1;
for (int i = 0; i < RowData.Length; i++)
{
string DevConfigurationID = RowData[i];
DB.Update("DevelopmentConfig", "DisplayOrder=" + NewOrder.ToString(), "DevConfigurationID=" + DevConfigurationID);
NewOrder++;
}
Response.Write("Order Saved");
}
catch (Exception ex)
{
audit.Audit(ex.Message, "Exception Error", Request.Url.AbsolutePath, "Xml Command", "UpdateDevOrder()");
Response.Write("Failed");
}
}
person
AdamRoof
schedule
18.12.2014