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クラス"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);
    }
});

ここで私がここで説明した単純なresetAltRows関数。デモを試して、すべてが機能することを確認できます。

Answer 2

次のように、divまたは行にクラスを追加できます。

これがフィドルです

$(document).ready(function(){

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

});

});