EasyUI DataGrid 应用示例

我们使用如下标签来创建表格

<table id="dg"></table>

JS代码如下：

$('#dg').datagrid({         columns:[[             {field:'TIME',title:'标题1,width:140},             {field:'SUM_NUM',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:'标题3,width:140,align:'right'},             {field:'GROUP_NUM',title:'标题4',width:140,                         styler:function(value,row,index){                             if (value < 20){                                  // 返回css里面定义的样式                                  return {class:'c1',style:'color:red'}                              }               }}              ]] ,              height:360,              pageSize:10,              showHeader:true,  //是否显示头部              rownumbers:true,  //是否显示行数              pagination:true , //是否显示分页组件              rowStyler: function(index,row){                     if (row.SUM_NUM>80){                             return 'background-color:#6293BB;color:#fff;';                      }              },              onClickCell:function(index,field,value){                     /*                              index:行索引，0开始                              field：所选列绑定的field名                              value：该单元格显示的内容                     */                }     });

然后设置表格的数据源

$('#dg').datagrid('loadData', [{'TIME':'2015-09-23','SUM_NUM':'40'},{......}]);