jqGrid Farbstoffe eine gesamte Zeile in Grid basiert auf einer Zellen-Wert
Ich weiß, es ist gefragt worden, bevor, aber ich kann es zu laufen und ich bin aus der Dinge zu versuchen.
Möchte ich einfärben einer Zeile in einem Grid, wenn der Wert nicht 1 - ich benutze eine benutzerdefinierte formatter-für diese. Der formatter selbst funktioniert, das ist nicht das problem.
Ich habe versucht, mehrere Möglichkeiten, die ich bisher gefunden habe, auf der web - hinzufügen einer Klasse, die direkt hinzufügen von CSS-code, mit setRowData
mit setCell
....
Hier sind meine Beispiele zu nennen - keiner von Ihnen arbeitete für mich (Linux, ff363) - alle Zeiger wäre sehr dankbar.
27.05.2010_00:00:00-27.05.2010_00:00:00 ist meine Zeile-id
<style>
.state_inactive {
background-color: red !important;
}
.state_active {
background-color: green !important;
}
</style>
function format_state (cellvalue, options, rowObject)
{
var elem='#'+options.gid;
if (cellvalue != 1) {
jQuery('#list2').setRowData(options.rowID,'',
{'background-color':'#FF6F6F'});
jQuery('#list2').setRowData('27.05.2010_00:00:00-27.05.2010_00:00:00',
'',{'background-color':'#FF6F6F'});
for (var cnt=0;cnt<rowObject.length;cnt=cnt+1) {
jQuery(elem).setCell(options.rowId,cnt,'','state_inactive','');
jQuery(elem).setCell('"'+options.rowId+'"',cnt,'','state_inactive');
jQuery(elem).setCell('"'+options.rowId+'"',cnt,'5',
{'background-color':'#FF6F6F'},'');
}
} else {
for (var cnt=0;cnt<rowObject.length;cnt=cnt+1) {
jQuery(elem).setCell(options.rowId,cnt,'','state_active','');
}
}
<!-- dont modify, we simply added the class above-->
return cellvalue;
}
Du musst angemeldet sein, um einen Kommentar abzugeben.
Scheint es mir, dass Ihr Hauptproblem ist, Sie sind nicht die Einstellung ein 'hintergrund-Farbe' - Stil. Sie sollten zu entfernen "ui-widget-content' - Klasse aus der Reihe (von
<tr>
element)bevor Sie die Klasse
state_activ
oderstate_inactive
, weil jQuery-UI-Klasse "ui-widget-content' zu definieren, die.ui-widget-content
wieund nur mit dem setzen von CSS -
'background-color'
Ihr nicht wirklich die Hintergrundfarbe ändern. So versuchen, so etwas wieloadComplete
sind die Reihen gefüllt und in diegridComplete
nicht. Bei mir funktioniert es innerhalb vonloadComplete
. Ich empfehle Sie immergridview: true
wnd keine Zeit verwendenafterInsertRow
Veranstaltung, die brechen schnell das ausführungsverhalten vongridview: true
parameter. Sie können rufen SiejQuery('#list2').getDataIDs();
innen oderloadComplete
-, test-Wert der Zelle mitgetCell()
und dann entfernen und fügen Sie die Klasse.id
. Verwenden Sie ':', '-' und '.'. jqGrid hatte Probleme mit einigen Symbolen innerhalb vonid
. Um dies zu überprüfen versuchen, mehr einfache form von ids. Außerdem haben einige Zeichen eine räumliche Bedeutung für jQuery. Also die Konstrukte wiejQuery("#"+ options.rowId)
werden kann falschen interpretieren von jQuery. Wenn alle wird die Arbeit mit der einfachen ids, dann können Sie implementieren eine form von Codierung/Decodierung von id-Werten.colModel
. So können Sie konstruieren, wiejQuery("#list2")[0].p.colModel
zu erhaltencolModel
oderjQuery("#list2")[0].p.colNames
zu erhaltencolNames
. Beide Eigenschaften sind arrays, so dass Sie verwenden könnenjQuery("#list2")[0].p.colModel.length
erhalten Sie eine Anzahl von Spalten. Vergessen Sie nicht, dass, wenn Sie verwendenrownumbers: true
danncolModel
hat eine zusätzlicherm
Spalte an Erster Stelle (index 0).jQuery("#list2").jqGrid ('getGridParam', 'colModel')
ist eine dokumentierte Art und Weise zu erhaltencolModel
array. Also, wenn Sie wollen, um die Anzahl der LEBENSFÄHIGEN Spalten, die Sie tun können, folgende:var cm = jQuery("#list2").jqGrid('getGridParam', 'colModel'); var length = cm.length, columnCount = 0; for (var i=0; i<length; i++) { if (!cm[i].hidden && cm[i].name !== "rn") { columnCount++; } }
. Der WertcolumnCount
ist die Anzahl der sichtbaren Spalten des jqGrid #liste2. Spalte "rn" (hat den index 0) sind nur vorhanden, wennrownumbers: true
.transparent
Farbe für die Grenze. Zum Beispiel.ui-jqgrid tr.ui-row-ltr td {border-right-color: transparent;}
entfernt die vertikalen Grenzen zwischen den Zellen. In der gleichen Weise.ui-jqgrid tr.ui-row-ltr td {border-bottom-color: transparent;}
entfernen die Rahmen zwischen den Zeilen. eine Weitere Antwort zeigt, wie Sie die Grenzen in der Spalte Header.für alle, die auf der Suche für eine echte Antwort auf dieses Thema..
dieser funktioniert !
In einem anderen stylesheet-Datei der benutzerdefinierten CSS -
nicht zu vergessen die !wichtig ist, überschreibt das Thema ui-roller
Ich versuchte Lösung für eine lange Zeit und schließlich aus aller Beispiele und Vorschläge zu kombinieren, etwas, dass für mich gearbeitet. Natürlich müssen Sie definieren, benutzerdefinierte css-Stile für diese zu arbeiten. Hoffe, dass dies hilft, obwohl Sie könnten, produzieren Potenzial speed Problem.
...
...
Habe ich versucht, oben genannten Lösungen, aber ich denke, dass ist das richtige:
Wenn der css-Klasse zwischen Apostrophe, dann ist es überschrieben, um das original (Sie können sehen, dass leicht mit firebug):
korrekt mit {color:'red'}:
Gemäß der Dokumentation von setRowData:
Schlage ich vor, dass Sie versuchen someing wie diese.
Dies wird tatsächlich geben Ihnen Zugriff auf die gesamte Zeile.
Sehr Einfach und funktioniert
Vermutet andere Zelle Wert ist Y/N.
code unten geht in loadComplete Veranstaltung