Question

我正在尝试根据特定列的条件更改单元格背景颜色，它不起作用。请帮我解决。这是我试过的。我的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>

感谢。

Answer 1

您尝试使用我为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中的条件格式化单元格背景颜色

1 个答案: