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'},{......}]);

本文出自 “因简单而自在” 博客，请务必保留此出处http://dengshuangfu.blog.51cto.com/8794650/1709274