jquery - 更改被拖动的 jqGrid 行的 CSS

Question

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

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

任何人都可以帮忙吗？谢谢！

Answer 1

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

我为您制作了以下演示，以演示如何完成：

对应的代码是

$("#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"
            });
    }
});

在示例中，我"ui-state-highlight"默认将 jqGrid 添加的样式删除到拖动行，然后添加"ui-widget"以修复拖动行的字体问题。最后，我添加了与我需要的样式相对应的样式： CSS class"ui-state-error"和 CSS style 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);
    }
});

我在这里描述的简单resetAltRows功能。您可以尝试演示以查看一切正常。

Answer 2

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

这是小提琴

$(document).ready(function(){

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

});

});