在jqGrid中突出显示一个数字阈值?

时间:2011-12-15 16:41:34

标签: jquery jqgrid

是否可以调用jqGrids loadComplete函数并突出显示满足或超过特定阈值的列中的特定单元格。这是我正在尝试做的事情:

loadComplete: function() {

    var threshold = '5';

    // How do I iterate through each row and check for a value exceeding my threshold?

    $.each(rows,function(index, value) {
       //alert("index: " + index);
       grid.jqGrid('setCell',index,"name", '', {'color':'red'});

    });
}

3 个答案:

答案 0 :(得分:1)

       loadComplete: function() {
        var cssGreen = {'background-color':'#6DFF6D',
            'filter': 'progid:DXImageTransform.Microsoft.gradient(startColorstr = \'#D9FFD9\', endColorstr = \'#6DFF6D\')',
            'background': '-moz-linear-gradient(bottom, #D9FFD9, #6DFF6D 2px, #D9FFD9 4px)'};
        var cssRed = {'background-color':'#FF6D6D',
            'filter': 'progid:DXImageTransform.Microsoft.gradient(startColorstr = \'#FECECD\', endColorstr = \'#FF6D6D\')',
            'background': '-moz-linear-gradient(bottom, #FECECD, #FF6D6D 2px, #FECECD 4px)'};
        var columns = grid.jqGrid('getGridParam', 'colModel');
        var ids = jQuery("#gridMain").jqGrid('getDataIDs');
        for (var i = 0; i < columns.length; i++) {
            var columnName = columns[i].name;
            for (var j = 0; j < ids.length; j++) {
                var cell = grid.jqGrid("getCell", ids[j], columnName);
                grid.setCell(ids[j], columnName, '', '', {'title':colNameData[i]}); 
                if (cell != null && cell.indexOf("%g") >= 0) {
                    grid.jqGrid('setCell', ids[j], columns[i].name, '', cssGreen);
                } else if (cell != null && cell.indexOf("%r") >= 0) {
                    grid.jqGrid('setCell', ids[j], columns[i].name, '', cssRed);
                }
            }
        }

希望这个例子是你所寻找的。函数循环遍历单元格,如果celldata包含'%g',它将应用定义到顶部的CSS syle。只需将CSS设置为您想要的任何突出显示样式。

答案 1 :(得分:0)

您可以使用afterInsertRow事件:

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events

有一个rowData和一个rowElem参数,所以看起来你有你需要的一切。 (我会在单元格中添加一个类并使用css设置颜色)

答案 2 :(得分:0)

这也可以使用jqgrid&#39; s custom formatter

来实现

例如,您可以这样做:

<script>
jQuery("#grid_id").jqGrid({
...
   colModel: [ 
      ... 
      {name:'price', index:'price', width:60, align:"center", editable: true, formatter:currencyFmatter},
      ...
   ]
...
});

function currencyFmatter (cellvalue, options, rowObject)
{
   if (cellvalue > 5){
     return "<div style='color:red'>"+cellvalue+"</div>";
   }else{
     return cellvalue;
   }
}
</script>
相关问题