更改被拖动的 jqGrid 行的 CSS答案

【问题标题】：Change the CSS of a jqGrid Row Being Dragged更改被拖动的 jqGrid 行的 CSS
【发布时间】：2012-04-17 14:47:30
【问题描述】：

我正在使用 jqGrid 的拖放功能，我想知道如何更改被拖动的行的 CSS。

我想我可以在拖动的行中添加一个 CSS 类，但我不是 100% 确定如何。

有人可以帮忙吗？谢谢！

【问题讨论】：

标签： jquery jqgrid drag-and-drop

【解决方案1】：

您可以使用onstart 回调来修改正在拖动的行的样式。

我为你制作了the following demo 来演示如何做到这一点：

对应的代码是

$("#grid1").jqGrid('gridDnD', {
    connectWith: '#grid2',
    onstart: function (ev, ui) {
        ui.helper.removeClass("ui-state-highlight")
            .addClass("ui-state-error ui-widget")
            .css({
                border: "5px ridge tomato"
            });
    }
});

在示例中，我将 jqGrid 默认添加的样式"ui-state-highlight" 删除到拖动行，然后添加"ui-widget" 以修复拖动行的字体问题。最后，我添加了与我需要的样式相对应的样式：CSS 类 "ui-state-error" 和 CSS 样式 border: 5px ridge tomato。

另外我使用 CSS 样式

.ui-jqgrid .ui-jqgrid-bdiv table.ui-state-active { border-style: none; }

防止目标网格中出现水平滚动条。

已更新：我认为在某些网格中使用 altRows: true 没有任何问题。可能你的原因是在

中使用sortableRows

// make rows of grid2 sortable
$("#grid2").jqGrid('sortableRows', {
    update: function () {
        resetAltRows.call(this.parentNode);
    }
});

我描述了here 的简单resetAltRows 函数。你可以试试the demo 看看一切正常。

【讨论】：

太棒了！谢谢奥列格。唯一的问题是，我正在使用 alt 行，它不会在备用行上选择新样式。有什么想法吗？
@FastTrack：我没有看到altRows: true的使用有什么问题。我更新了我的答案并添加了一个演示。
Oleg：我认为我的问题与 alt 行的背景颜色有关。在您的示例中，白色行的背景颜色在被拖动时变为红色。 alt 行在被拖动时从不会将背景颜色更改为红色。
@FastTrack：这很简单：您应该将ui.helper.removeClass("ui-state-highlight") 修改为ui.helper.removeClass("ui-state-highlight myAltRowClass") 以删除您使用的类myAltRowClass（jqGrid 中的默认值："ui-priority-secondary"）。我修改了the last demo的代码。

【解决方案2】：

您可以像这样将类添加到您的 div 或行：

这是Fiddle

$(document).ready(function(){

$('div').click(function(){
$(this).addClass('red');

});

});

【讨论】：