是否可以调用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'});
});
}
答案 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>