更改被拖动的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

回答

相关问题