根据javascript中的条件设置单元格背景颜色的格式

Question

i am trying to change cell background color based on condition on particular column, it is not working.please help to me to resolve. 我正在尝试根据特定列的条件更改单元格背景颜色，但它不起作用。请帮助我解决。 this is what i have tried. 这就是我尝试过的。 my php page for your reference. 我的php页面供您参考。 thanks. 谢谢。 i found a solution but it doesnt work on my php page. 我找到了解决方案，但在我的php页面上不起作用。 this that solution http://www.ok-soft-gmbh.com/jqGrid/BackgroundColorFormatter.htm 这个解决方案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>

Thanks. 谢谢。

Answer 1

You try to use very old example, which I created for the answer . 您尝试使用我为答案创建的非常旧的示例。 Later I suggested to include another features: cellattr and rowattr , which I recommend to use instead of usage custom formatters just to set attributes and not the content of the cell. 后来我建议包括另一个功能： cellattr和rowattr ，我建议使用这些功能代替使用自定义格式化程序，仅用于设置属性而不是单元格的内容。 Look at the old answer for an example of usage cellattr . 查看旧答案以获取有关cellattr用法的cellattr 。 You can use, for example, the formatter: "number" to format the content of the column, and to use cellattr to set class attribute on the cells to change the background color of the cells. 例如，您可以使用formatter: "number"格式化列的内容 ，并使用cellattr在单元格上设置class 属性以更改单元格的背景颜色。

You posted some code, where you don't use jqGrid at all. 您发布了一些代码，这些代码根本不使用jqGrid。 I suppose, that you wrote some wrapper pqGrid , which use colModel for jqGrid. 我想，您编写了一些包装pqGrid ，其中将colModel用于jqGrid。

In any way, it's important to take in consideration some CSS rules to change the background color. 无论如何，重要的是要考虑一些CSS规则来更改背景颜色。 You use currently background-color property to change the color. 您当前使用background-color属性更改颜色。 The default jQuery UI CSS apply background-image on the cells too. 默认的jQuery UI CSS也会在单元格上应用background-image 。 To be able to change the background color to red, for example, you can use either both background-color and background-image 例如，为了能够将背景颜色更改为红色，可以同时使用background-color和background-image

background-color: red;
background-image: none;

or to use 或使用

background: red;

which reset background-image together with the background-color . 重置background-image和background-color 。

The next problem. 下一个问题。 If you apply the CSS properties by usage a CSS rule, then the usage of 如果您通过使用CSS规则来应用CSS属性，则

span.cellWithoutBackground {
    background-image:none;
}

or 要么

.backgroundRed {
    background-color: red;
    background-image: none;
}

will not work because there are exist jQuery UI rules with two selectors, which set background too. 将不起作用，因为存在具有两个选择器的jQuery UI规则，它们也设置了背景。 To force that your CSS rule will be applied you should use more complex CSS selector. 要强制应用CSS规则，您应该使用更复杂的CSS选择器。 For example 例如

.ui-jqgrid .jqgrow .backgroundRed {
   background-color: red;
   background-image: none;
}

(the classes jqgrow and ui-jqgrid are applied on the outer elements). （类jqgrow和ui-jqgrid应用于外部元素）。

根据javascript中的条件设置单元格背景颜色的格式

问题描述

1 个解决方案

解决方案1
1 2017-04-01 17:15:10

根据javascript中的条件设置单元格背景颜色的格式

问题描述

1 个解决方案

解决方案1 1 2017-04-01 17:15:10

解决方案1
1 2017-04-01 17:15:10