更改被拖動的jqGrid行的CSS

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

我在想我可以添加一個CSS類到拖動的行，但我不是100％確定如何。

任何人都可以幫忙嗎？謝謝！

來源

2012-04-17 FastTrack

您可以使用onstart回調修改正上拖動該行的風格。

我做the following demo爲你展示它是如何做：

enter image description here

相應的代碼是

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

這裏簡單resetAltRows功能我描述here使用。你可以試試the demo看到所有的作品。

來源

2012-04-17 17:40:30 Oleg

太棒了！感謝Oleg。唯一的問題是，我正在使用alt行，它不會在備用行上選擇新的樣式。有任何想法嗎？ – FastTrack 2012-04-17 21:27:06

@FastTrack：我在'altRows：true'的用法中沒有看到任何問題。我更新了我的答案，幷包含一個演示。 – Oleg 2012-04-17 22:29:14

奧列格：我認爲我的問題與替代行的背景顏色有關。在你的例子中，被拖動的白色行的背景顏色變成紅色。在被拖動時，alt行永遠不會將背景顏色更改爲紅色。 – FastTrack 2012-04-17 23:53:47

那麼你可以添加類到您的股利或行是這樣的：

這裏的Fiddle

$(document).ready(function(){ 

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

}); 

});

來源

2012-04-17 14:59:39

更改被拖動的jqGrid行的CSS

回答

相關問題