Question

我有一个来自JQuery插件的数据表，它显示从数据库中提取的对象。在每一行的末尾都有一个“编辑”按钮，单击该按钮会打开一个弹出窗口，其中包含允许用户更改对象的字段。

以下代码是打开弹出窗口的“编辑”按钮。

<td>@Ajax.ActionLink("Edit",
                                 "controllerMethodReturningEditView",
                                 new
                                 {
                                     Id = @m.Id
                                 },
                                 new AjaxOptions
                                 {
                                     HttpMethod = "GET",
                                     UpdateTargetId = "popupBox",
                                     InsertionMode = InsertionMode.Replace,
                                     OnSuccess = "openPopup('myPopup')"
                                 })</td>

按下编辑按钮时调用的控制器方法只会打开一个部分显示在弹出框中的视图

return PartialView("editObjectView", objectModel);

这个“editObjectView”只包含一个带有输入字段的表单。

@using(Html.BeginForm(...
           <label>...</label><input ... />
           .... and so on

然后在此弹出窗口中，允许用户编辑显示对象的值。当用户在弹出窗口中按下“保存”按钮时，新值将被发送到控制器方法，该方法将值（到对象）保存在数据库中。保存值时，控制器方法调用加载第一个视图的控制器方法（显示数据表的视图），该方法从数据库请求所有对象，以显示新对象或对象的更改。

现在我的问题是：在编辑对象后重新加载页面时，如何更改已编辑行的样式？我想要的是在最近编辑的行周围设置一个红色边框。如果我不必通过用于重新加载页面的所有控制器方法发送对象，我更愿意。

感谢您的帮助，感激不尽！

Answer 1

不知道返回到页面的内容并且不知道要更新的样式。

假设您想要交替每行css类。将内容添加到页面后，您可以执行以下操作：

$("tr:nth-child(odd)", "#YOUR_TABLE_ID").addClass("odd-row");

或者，确保将每行HTML格式化为唯一的ID标签“...”，然后执行一些jQuery，在添加到页面后设置该类。

如果请求是Ajax请求，并且您使用json返回某些内容 - 例如：

var json { Id = Table.ID, status = true };

然后OnSuccess事件将执行以下操作：

function OnSaveSuccess(data) {
    if (data.status) {
        $("#" + data.Id).addClass("highlight-row");
    } else {
    console.warn("save was not successful!");
    }
}

编辑显示的值时，在JQuery Datatables中更改行的样式

1 个答案: