ドラッグ中のjqGrid行のCSSを変更する

Question

jqGridのドラッグアンドドロップ機能を使用しています。ドラッグされている行のCSSをどのように変更できるかを知りたいと思います。

ドラッグした行にCSSクラスを追加できると思っていますが、100％確実ではありません。

誰でも手助けできますか？ありがとう！

Answer 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の使用に関する問題はありません。おそらくその理由は、単純なresetAltRows機能は、私がhereを説明

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

にsortableRowsの利用でした。 the demoを試してみてください。

Answer 2

さてあなたは、このようなあなたのdivにクラスを追加したり、行することができます

はここFiddle

$(document).ready(function(){ 

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

}); 

});