jQuery EasyUI Data Grid - Format Columns
The following examples are formatted in easyui DataGrid column data inside, and use custom column formatter, if the price is less than 20 text will turn red.
To format a data grid (DataGrid) column, we need to set the formatter attribute, which is a function. The formatting function contains three parameters:
- value: the value of the corresponding field in the current column.
- row: The current row data is recorded.
- index: The current row index.
Creating a Data Grid (DataGrid)
<Table id = "tt" title = "Formatting Columns" class = "easyui-datagrid" style = "width: 550px; height: 250px" url = "data / datagrid_data.json" singleSelect = "true" iconCls = "icon-save"> <Thead> <Tr> <Th field = "itemid" width = "80"> Item ID </ th> <Th field = "productid" width = "80"> Product ID </ th> <Th field = "listprice" width = "80" align = "right" formatter = "formatPrice"> List Price </ th> <Th field = "unitcost" width = "80" align = "right"> Unit Cost </ th> <Th field = "attr1" width = "100"> Attribute </ th> <Th field = "status" width = "60" align = "center"> Stauts </ th> </ Tr> </ Thead> </ Table>
Please note that, 'listprice' field has a 'formatter' attribute, which indicates the formatting functions.
Write Formatting Functions
function formatPrice (val, row) { if (val <20) { return '<span style = "color: red;"> (' + val + ') </ span>'; } Else { return val; } }