码迷,mamicode.com
首页 > 其他好文 > 详细

EasyUI DataGrid 应用示例

时间:2015-11-03 23:10:38      阅读:373      评论:0      收藏:0      [点我收藏+]

标签: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

EasyUI DataGrid 应用示例

标签:easyui datagrid 应用示例

原文地址:http://dengshuangfu.blog.51cto.com/8794650/1709274

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!