Как я могу вставить чередующийся цвет фона строки в jqGrid?
JqGrid ряд чередующийся фон
Ответ 1
Посмотрите на altRows
и altclass
options. Остерегайтесь типичной непоследовательной капитализации! Это использует тему jQuery UI, если вы используете jqGrid 3.5 или выше.
Ответ 2
function applyZebra(containerId) {
$('#' + containerId + ' tr:nth-child(even)').addClass("jqgrow evenTableRow");
$('#' + containerId + ' tr:nth-child(odd)').addClass("jqgrow oddTableRow");
}
ContainerId - ваш идентификатор jqGrid. Вызовите этот метод в событии "gridComplete" вашего jqGrid.
Ответ 3
Чтобы использовать тему пользовательского интерфейса jQuery, используйте этот код:
$('#'+gridName+' tr:nth-child(even)').removeClass("ui-priority-secondary");
$('#'+gridName+' tr:nth-child(odd)').addClass("ui-priority-secondary");
Я использую этот код, когда выполняю ручную сортировку (drag-n-drop)
Ответ 4
Привет сначала определяет css:
<style type="text/css">
......
.Color_Red { background:red; }
.Color_Cyan { background:cyan; }
......
Затем в jqGrid...
$("#list2").jqGrid({
........
loadComplete: function() {
var rowIDs = jQuery("#list2").getDataIDs();
for (var i=0;i<rowIDs.length;i=i+1){
rowData=jQuery("#list2").getRowData(rowIDs[i]);
var trElement = jQuery("#"+ rowIDs[i],jQuery('#list2'));
// Red
if (rowData.Estado == 0) {
trElement.removeClass('ui-widget-content');
trElement.addClass('Color_Red');
}
// Cyan
if (rowData.Estado == 2) {
trElement.removeClass('ui-widget-content');
trElement.addClass('Color_Cyan');
}
}
},
});
Таким образом, мы ходим по строкам и применяем RED для выполнения условия , которое == 0 и Cyan, которые удовлетворяют условию == 2.
Вы должны изменить rowData.XXX == XX по имени и значению столбца для проверки.
У меня это так, и он отлично работает.
Удача!
Ответ 5
Вызов loadComplete для изменения цвета фона строки в jqgrid.
loadComplete : function() {
$("tr.jqgrow:odd").addClass('myAltRowClassEven');
$("tr.jqgrow:even").addClass('myAltRowClassOdd');
},
для применения стилей к использованию фона ниже css.
<style type="text/css">
.myAltRowClassEven { background: #E0E0E0; border-color: #79B7E7; }
.myAltRowClassOdd { background: orange; }
</style>
Или
Для изменения шрифта строки в jqgrid см. ссылку ниже
Ответ 6
$("#myGrid").jqGrid({
...
gridComplete: function() {
var _rows = $(".jqgrow");
for (var i = 0; i < _rows.length; i += 2) {
_rows[i].attributes["class"].value += " alt";
}
}
});