更改被拖动的jqGrid行的CSS

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

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

有人可以帮忙吗？ 谢谢！

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

在示例中，我将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有任何问题altRows: true在某些网格中是altRows: true 。 可能你的原因是在中使用了sortableRows

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

我在这里描述的简单resetAltRows函数。 您可以尝试演示 ，看看一切正常。

Answer 2

那么你可以像这样在div或row中添加类：

这是小提琴

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