如何在运行时设置jqgrid单元格颜色

时间:2010-05-28 05:05:24

标签: asp.net jqgrid

我从数据库填充jqgrid,其中一列是红色,蓝色等颜色列。我可以根据运行时来自数据库的值设置此列的单元格颜色吗?在这种情况下我应该如何设置格式化程序?我试过这样但不起作用

var colorFormatter = function(cellvalue, options, rowObject) {
        var colorElementString = '<div class="colorBlock" style="background-color: red;"></div>';
        return colorElementString;
---
---
colModel: [
                { name: 'GroupName', index: 'GroupName', width: 200, align: 'left' },
                { name: 'Description', index: 'Description', width: 300, align: 'left' },
                { name: 'Color', index: 'Color', width: 60, align: 'left', formatter: colorFormatter}],

3 个答案:

答案 0 :(得分:1)

我正在根据状态更改行的背景颜色(“status”是数据列)。希望这可能有所帮助。以下是示例代码:

<style>
    .state_inactive {
        background-color:##FF9999 !important;
        border:1px solid ##A6C9E2;
        color:##222222;
    }
</style>

<script type="text/javascript">
    $j("#Grid").jqGrid({
        url:"getData.php",
        datatype:"json",
        colNames:['Name', 'Organization', 'Status'],
        colModel:[{name:'name', index:'name'}, {name:'organization', index:'organization'}, {name:'status', index:'status'}],
    },
    gridComplete:function() {
        var ids = jQuery("#Grid").jqGrid('getDataIDs');

        for (var i = 0; i < ids.length; i++) { 
            var status = jQuery("#Grid").jqGrid("getCell", ids[i], 'status');

            if (status == "-20") {
                $j('#' + ids[i]).removeClass("ui-widget-content");
                $j('#' + ids[i]).addClass("state_inactive");
            }
        }
    })
</script> 

答案 1 :(得分:1)

为格式化颜色的函数添加加载完成调用:

loadComplete: function (data) {
    $.each(data.rows, function (i, item) {
        var rowId = data.rows[i].id || data.rows[i]._id_;
        var myRow = new Array(item.valueOf());

        jQuery('#' + grid).setCell(rowId, colName, '', { background: 'red'});
    });
}

您只需添加代码即可检查您要应用的条件。

答案 2 :(得分:0)

看起来像jqgrid的设计缺陷。

最好的方法是在加载过程中实现此功能,而自定义格式化程序只有一个可以执行此操作的值。但是你需要这样做不是在价值上,而是在它前面的div或跨度上。