jQuery EasyUI Data Grid - Format Spalten
Die folgenden Beispiele sind in easyui Datagrid-Spalte Daten formatiert innen und benutzerdefinierte Spalte Formatierer verwenden, wenn der Preis weniger als 20 Text rot wird.
Um ein Datengitter (Datagrid) Spalte zu formatieren, müssen wir das Formatierungs Attribut zu setzen, die eine Funktion ist. Die Formatierungsfunktion enthält drei Parameter:
- Wert: Der Wert des entsprechenden Feldes in der aktuellen Spalte.
- Reihe: Die aktuelle Zeilendaten aufgezeichnet.
- Index: Die aktuelle Zeilenindex.
Erstellen eines Data Grid (Datagrid)
<Table id = "tt" title = "Formatieren von Spalten" class = "easyui-Datagrid" style = "width: 550px; height: 250px" url = "data / datagrid_data.json" singleSelect = "true" iconCls = "Symbol-save"> <Thead> <Tr> <Th Feld = "itemid" width = "80"> Item ID </ th> <Th Feld = "productid" width = "80"> Product ID </ th> <Th Feld = "gelisteter" width = "80" align = "right" Formatter = "formatPrice"> Listenpreis </ th> <Th Feld = "Unitcost" width = "80" align = "right"> Kosten pro Einheit </ th> <Th Feld = "attr1" width = "100"> Attribut </ th> <Th field = "status" width = "60" align = "center"> Stauts </ th> </ Tr> </ Thead> </ Table>
Bitte beachten Sie, dass "gelisteter 'Feld hat eine" Formatter' Attribut, das die Formatierungsfunktionen an.
Schreiben Formatierungsfunktionen
Funktion formatPrice (val, Zeile) { if (val <20) { return '<span style = "color: red;"> (' + val + ') </ span>'; } Else { Rückkehr val; } }