- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
希望有人能帮我解决这个问题。我有一个 ASP.NET gridview,其中 DataKeyName 具有 GridView 的主键。
我需要拖放此网格行,以便用户可以在 GridView 中对顺序进行排序。我可以通过添加以下代码来进行 gridview 拖放。
$(document).ready(function () {
$("#GridView1").tableDnD();
});
但是我在获取更新的行顺序以便更新数据库中的此顺序时遇到问题。即当我使用 tableDnD tableDnDSerialize()
时,它总是返回 nullonDrop:
function (table, row) {
alert($('#GridView1').tableDnDSerialize());
}
返回:GridView1[]=&GridView1[]=
请帮助我。
最佳答案
您需要在 GridView 上提供键值的行 ID。这可以在 OnRowDataBound 事件中轻松完成。在你的头脑中链接你的 JavaScript 文件。 jquery.tablednd.js 来自 2014 年 10 月 30 日
<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 的服务器 ID。如果不在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 事件来激活此功能并为每行分配一个 Key。请注意,此 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");
}
}
关于javascript - 使用 jQuery 在 ASP.NET GridView 拖放中面临问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5980959/
我在这里有一个我想要做的事情的例子:http://jsbin.com/OwoYAlEQ/1/edit 这是我的 HTML: person one person two person three per
我想知道是否有人知道是否有一个预先制定的解决方案:我在 ASP.net 网站上有一个列表,我希望用户能够通过拖放对列表进行重新排序。此外,我希望有第二个列表,用户可以将第一个列表中的项目拖到其中。 到
我想知道是否有人知道是否有一个预先制定的解决方案:我在 ASP.net 网站上有一个列表,我希望用户能够通过拖放对列表进行重新排序。此外,我希望有第二个列表,用户可以将第一个列表中的项目拖到其中。 到
我在我的 Web 应用程序中使用 Ajax ControlToolkit 中的 ModalPopupExtender。我将其 Drag 属性设置为 true,但是当我拖动弹出面板并将其放到新位置时,它
所以,基于this answer ,我有一组可以拖放并卡入到位的 div。唯一的问题是,可拖动的 div 具有不同的高度,我需要它们始终捕捉到目标的底部,而不是顶部。 您可以在this JsFiddl
我一直在使用 Bea 的解决方案 here一段时间后发现它非常有帮助。现在我遇到的问题是,当我将项目拖放到另一个 ListView 控件中或拖放到另一个 ListView 控件中,并且我想在拖动“期间
我试图在使用 QTreeWidget.setItemWidget() 重新父级(拖放)后将小部件放入 QTreeWidgetItem 但是,如果编译以下代码,结果是 QTreeWidgetItem 内
这是场景,我使用的是prototype和scriptaculous,但我相信jquery也会有同样的问题。我在相对定位的 div 中有一个可拖动图像的列表。问题是我无法将图像拖出父 div...好吧.
我正在使用一个普通(Bootstrap)表,我想在其中包含可排序的行。我正在使用 Angular CDK (DragDropModule) 来实现排序/排序。但是,当拖动行时,它会扭曲宽度,因为 cd
我正在尝试在我的 UICollectionView 中实现拖放机制,这与在快捷方式应用程序中重新排序快捷方式的组件非常相似。 截至目前,行为是当您开始拖动时,会留下一个透明的单元格 View ,而另一
我有以下 Jquery UI 拖放 jsfiddle https://jsfiddle.net/zoojsfiddle/ud96jdcp/ 具有
我希望创建一个基于网络的“公告板”,可以这么说,用户可以在其中创建/删除/拖放“图钉”,而不允许重叠“图钉”。 这是一个图表,应该有助于说明我正在尝试创建的内容: 'pins' 可能已创建双击;他们会
我是一名优秀的程序员,十分优秀!