在 jQuery EasyUI 的 DataGrid 中，你可以通过设置 rowStyler 属性来根据条件动态设置行的背景颜色。以下是一个简单的例子，演示如何根据条件设置行的背景颜色：
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery EasyUI 设置行背景颜色示例</title>
    <!-- 引入 jQuery 库 -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <!-- 引入 EasyUI 样式和脚本文件 -->
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>

    <!-- 创建 EasyUI Datagrid -->
    <table id="datagrid" class="easyui-datagrid" style="width:100%;height:300px"
           url="your_data_url"
           pagination="true"
           rownumbers="true"
           fitColumns="true"
           columns="[your_columns]">
    </table>

    <!-- JavaScript 部分 -->
    <script type="text/javascript">
        // JavaScript 代码

        $(function(){
            $('#datagrid').datagrid({
                // 其他配置...

                // 设置行背景颜色的条件函数
                rowStyler: function(index, row){
                    // 在这里根据条件设置行的背景颜色
                    if (row.price > 100) {
                        return 'background-color: #FFCCCC;'; // 设置为浅红色
                    } else if (row.quantity < 10) {
                        return 'background-color: #CCFFCC;'; // 设置为浅绿色
                    }
                    // 默认无样式
                    return '';
                }
            });
        });
    </script>

</body>
</html>

在上述代码中，我通过在创建 DataGrid 时设置 rowStyler 属性，指定了一个条件函数。这个条件函数接收行的索引和数据作为参数，根据条件返回行的样式，例如设置背景颜色。

在这个例子中，我根据商品价格和数量的条件设置了不同的背景颜色，你可以根据实际需求修改条件和颜色。

请确保替换 "your_data_url" 为实际数据源的 URL，并根据你的数据模型修改列的名称和数量。


转载请注明出处：http://www.zyzy.cn/article/detail/13122/jQuery EasyUI