我正在尝试根据特定列的条件更改单元格背景颜色，但它不起作用。请帮助我解决。这就是我尝试过的。 我的 php 页面供您引用。谢谢。我找到了一个解决方案，但它在我的 php 页面上不起作用。这个那个解决方案http://www.ok-soft-gmbh.com/jqGrid/BackgroundColorFormatter.htm
<?php
$con=mysqli_connect("localhost","user","pass","db");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$val = mysqli_query($con,"select storenm,FA_SOH,FA_CY_QTY,FA_CT_QTY from pr_report");
$arr=array();
while ($row = mysqli_fetch_array($val)){
$arr[] = "["."'".$row['storenm']."'".","."'".$row['FA_SOH']."'".","."'".$row['FA_CY_QTY']."'"."]";
}
$assign = implode(',',$arr);
?>
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name=viewport content="width=device-width, initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8">
<!--jQuery dependencies-->
<link rel="stylesheet" href="jquery-ui.css" />
<script src="jquery-1.11.0.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script type="text/javascript" src="touch-punch.min.js"></script>
<!--PQ Grid files-->
<link rel="stylesheet" href="pqgrid.min.css" />
<script src="pqgrid.min.js"></script>
<!--PQ Grid Office theme-->
<link rel="stylesheet" href="themes/office/pqgrid.css" />
<style type="text/css">
span.cellWithoutBackground
{
display:block;
background-image:none;
margin-right:-2px;
margin-left:-2px;
height:14px;
padding:4px;
}
</style>
<script>
$(function () {
var data = [<?PHP echo $assign;?>];
var obj = {
swipeModel: { on : true },
//scrollModel: { autoFit: true },
title: "Grid From JSON",
collapsible: { on: true, collapsed: false },
virtualX: false,
virtualY: false,
freezeRows: 0,
freezeCols: 1,
editable: false,
resizable: false,
width: 400,
height: 400,
title: "ParamQuery Grid Example"
};
obj.colModel = [{
title: "Storenm", width: 100, dataType: "string" },
{ title: "FSOH", width: 200, dataType: "float",align: "center" },
{ title: "FCY", width: 150, dataType: "float",align: "center",
formatter: function (cellvalue) {
var color;
var val = Number(cellvalue);
if (val>25) {
color = 'red';
} else if (val>15) {
color = 'yellow';
} else {
color = 'green';
}
return '<span class="cellWithoutBackground" style="background-color:' + color + ';">' + cellvalue + '</span>';
}
},
{ title: "Profits ($ millions)", width: 150, dataType: "float", align: "right"}];
obj.dataModel = {data: data};
$("#grid_array").pqGrid(obj);
});
</script>
</head>
<body>
<div id="grid_array" style="margin:100px;"></div>
</body>
</html>
谢谢。
最佳答案
您尝试使用非常旧的示例，这是我为 the answer 创建的。后来我建议添加另一个功能:cellattr和rowattr ，我建议使用它而不是使用自定义格式化程序来设置属性而不是单元格的内容。看the old answer用法示例 cellattr 。例如，您可以使用 formatter: "number"格式化列的内容，并使用 cellattr设置class单元格上的属性用于更改单元格的背景颜色。
您发布了一些代码，其中根本不使用 jqGrid。我想，你写了一些包装 pqGrid ，使用 colModel对于 jqGrid。
无论如何，考虑一些 CSS 规则来更改背景颜色很重要。您当前使用background-color属性来改变颜色。默认 jQuery UI CSS 应用 background-image对细胞也有影响。例如，为了能够将背景颜色更改为红色，您可以同时使用 background-color和background-image
background-color: red;
background-image: none;
或使用
background: red;
重置 background-image与 background-color 一起.
下一个问题。如果您通过使用 CSS 规则来应用 CSS 属性，则使用
span.cellWithoutBackground {
background-image:none;
}
或
.backgroundRed {
background-color: red;
background-image: none;
}
将不起作用，因为存在带有两个 选择器的 jQuery UI 规则，它们也设置了背景。要强制应用 CSS 规则，您应该使用更复杂的 CSS 选择器。例如
.ui-jqgrid .jqgrow .backgroundRed {
background-color: red;
background-image: none;
}
(类 jqgrow 和 ui-jqgrid 应用于外部元素)。
关于javascript - 根据javascript中的条件格式化单元格背景颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43158937/