Easyui DataGrid Application Example

We use the following tags to create the table

<table id= "DG" ></table>

The JS code is as follows:

$ (' #dg '). DataGrid ({ columns:[[ {field: ' Time ', title: ' Title 1,width:140}, {field: ' Sum_num ', title: ' Title 2,width:140, Styler:function (Value,row,index) { if (value < 20) { Return ' Background-color: #ffee00; color:red;text-decoration:underline; '; } }}, {field: ' Province_num ', title: ' Title 3,width:140,align: ' Right '}, {field: ' Group_num ', title: ' Title 4 ', width:140, Styler:function (Value,row,index) { if (value < 20) { Returns the style defined inside the CSS return {class: ' C1 ', Style: ' color:red '} } }} ]] , Height:360, Pagesize:10, Showheader:true,//Whether the head is displayed Rownumbers:true,//whether the number of rows is displayed Pagination:true,//whether to display the paging component Rowstyler:function (Index,row) { if (row. SUM_NUM&GT;80) { Return ' Background-color: #6293BB; color: #fff; '; } }, Onclickcell:function (Index,field,value) { /* Index: Row indexes, 0 start Field: Field name of the selected column binding Value: The contents of the cell display */ } });

Then set the data source for the table

$ (' #dg '). DataGrid (' LoadData ', [{' Time ': ' 2015-09-23 ', ' sum_num ': ' 40 '},{...}]);

This article comes from the "Simple and Easy" blog, so be sure to keep this source http://dengshuangfu.blog.51cto.com/8794650/1709274

Easyui DataGrid Application Example