EASYUI的datagrid怎么实现动态改变一行数据的背景色

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了EASYUI的datagrid怎么实现动态改变一行数据的背景色相关的知识,希望对你有一定的参考价值。

$('#outputData').datagrid(
url : Emo.OutputDataManager.getConfig().minDataUrl,
autoWidth : true,
autoHeight : true,
fitColumns : true,
columns : [ [
field : 'id',
title : '主键值',
sortable : true,
hidden : true
,
field : 'isException',
title : '是否超标',
sortable : true,
hidden : true
当是否超标是1的时候,这一行的背景色为红色,怎么做

参考技术A
field : 'isException',
title : '是否超标',
sortable : true,
hidden : true
formatter : function(value, rowData, rowIndex) //设置文本文字
if (value == 1)
return "超标";

,
styler:function(value,row,index)//设置样式
if (value ==1)
return 'background-color:#FF0000;';




我这样写只是field : 'isException',这个里面的数据是红色,不是一整行都是红色,如果你要的是一整行都是红色的话:styler:...改为
rowStyler:function(index,row)
if (row.isexception==1)
return 'background-color:#FF0000;';



绝对正确!

easyUi动态生成datagrid列

应用目标

在一个公共页面用单选按钮实现查询信息,根据选择不同,返回不同的信息,因此需要生成不同的列

实现代码:

function loadDataGrid(){
        $(‘#datagrid‘).datagrid({        //生成datagrid基本信息
                    url : ‘${ctx}/userBpm/workspace-listPersonalTasks‘,    //请求地址
                    此处省略......
            });
    setColumns();    //此处调用
}
//动态生成datagrid列
function setColumns(){
    var colnumsStr = "[ [";
        colnumsStr += "{title: ‘发起时间‘,field: ‘STARTTIME‘,width: 150},";
        colnumsStr += "{title: ‘结束时间‘,field: ‘ENDTIME‘,width: 150},";
        colnumsStr += "{title : ‘备注‘,field : ‘remark‘,width: 150}";
        colnumsStr += "] ]";
        var options={};
        options.columns = eval(colnumsStr);
        $(‘#datagrid‘).datagrid(options);
}

注:不知为何,动态生成列后第一次加载页面的时候如果有记录信息会执行两次请求,没有记录信息则会请求三次;当从有信息的页面到没有信息的页面的时候,没有信息的页面仍然会显示上一个页面的信息,刷新或再次请求则恢复正常。还有一些其他的莫名其妙的问题,最后无奈放弃此方法,如有高手大神知道,还请指导,谢谢。

以上是关于EASYUI的datagrid怎么实现动态改变一行数据的背景色的主要内容,如果未能解决你的问题,请参考以下文章

jquery easyui 怎么动态改变datagrid的列!

easyui datagrid 动态加入移除editor

C# wpf datagrid 动态加载数据后改变单元格颜色bug

easyUI_动态改变datagrid的url值

easyui如何动态改变列的编辑属性

easyui datagrid在行编辑状态下,如何实现给其他行数据赋值