Easyui Formatting columns

The following instance formats the column data in the Easyui DataGrid and uses the formatter of the custom column to turn the text red if the price is less than 20.

In order to format a data grid (DataGrid) column, we need to set the formatter property, which is a function. This format function contains three parameters:

• Value: The current column corresponds to the field value.
• Row: The current row record data.
• Index: The current row subscript.

Create a data grid (DataGrid)

2. <table id="tt" title="Formatting Columns" class="easyui- datagrid " style="width:550px; Height:250px"
4. URL="Data/datagrid_data.json"
6. singleselect="true" iconcls="Icon-save">
8. <thead>
10. <tr>
12. <th field="Itemid" width=">"Item ID</th >
14. <th field = "ProductID" width=< Span class= "ATV" > " > product id</TH>
16. <th field = "ListPrice" width=< Span class= "ATV" > " align= "right" formatter= "Formatprice" >list price</TH>
18. <th field="UnitCost" width= "align" = "Right"> Unit cost</th>
20. <th field="attr1" width="Attribute"></th >
22. <th field="status" width="Align" = "center">stauts</th>
24. </tr>
26. </thead>
28. </table>

Note that the ' ListPrice ' field has a ' formatter ' attribute, which is used to indicate the format function.

Write formatting functions

2. function formatprice(val,row) {
4. if (val < ) {
6. return ' <span style= ' color:red; ' > ('+val+') </span> ';
8. } else {
10. return Val;
12. }
14. }

Easyui Formatting columns