Easyui DataGrid formatted display data

Http://blog.163.com/[email protected]/blog/static/103242241201512502532379/

Setting the Formatter property is a function, and the Format function has 3 parameters: the cell formatter function, take three parameters:
value:the field value.
Rowdata:the row record data.
Rowindex:the row index. First, formatted to show the sex background of the JSON in the gender value is 0, 1, the page display call Format function: (JS mode)

{

Title: ' Gender ',

Field: ' Gender ',

WIDTH:50,

Formatter:function (Value,rec) {

return rec.gender==0? ' Female ': ' Male ';

}

}

Second, the format of display time

{

Title: ' Return Date ',

Field: ' Date ',

WIDTH:120,

Formatter:function (value, REC, index) {

if (value = = undefined) {

Return "";

}

/*json format time to JS time format */

var date = new Date (value);

return date.getfullyear () + '-' + (Date.getmonth () + 1) + '-' + date.getdate () + ' +date.gethours () + ":" +date.getminutes ();

}

},

Formatting display data style formatting less than 20 price display red (HTML) create a 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= ">product id</th>"
16. <th field= "ListPrice" width= "Up" align= "right" formatter= "Formatprice" >list price</th>
18. <th field= "UnitCost" width= "Up" 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 that indicates a format function.

Write formatting functions

1. function Formatprice (val,row) {
2. if (Val < 20) {
3. Return ' <span style= ' color:red; > (' +val+ ') </span> ';
4. } else {
5. return Val;
6. }
7. }

Easyui DataGrid formatted display data