向 w2ui 单元格 [Grid] 添加自定义颜色

Question

我正在尝试为 w2ui grid 的单元格添加颜色。

按照文档操作后，我可以更改单元格和行的颜色（但单独更改）。

对于单个单元格：

records: [
            { recid: 1, fname: 'Jane', lname: 'Doe', email: 'jdoe@gmail.com', sdate: 384052483664, style: {3:'background-color: yellow; color: white;'}}           
        ]

单行：

records: [
                { recid: 1, fname: 'Jane', lname: 'Doe', email: 'jdoe@gmail.com', sdate: 384052483664, style: 'background-color: red; color: white;'}           
            ]

直到这部分都没问题，因为我正在对记录进行硬编码。

问题：

我正在从服务器加载数据，我正在根据某些条件设置规则，我想相应地更改颜色。

我的理解是，我必须只在服务器上添加样式（我正在使用 php 和 mysql，顺便说一句）。

下面是我的示例代码：

$Query = "SELECT @curRow := @curRow + 1 as id ,`x`, `y`, `z`, `a`, `b`, `c`, `d`, `e`, `f`, `g`, `h`, `i` 
        FROM `table_name` JOIN (SELECT @curRow := 0) r";
        //echo $Query;
        $code=mysqli_query($link,$Query);
        $data = array();
        while($row = mysqli_fetch_assoc($code))
        {
            if($row["id"]==1)
            {
                //$row['expanded']="'spinner'";
                //$object = (object) ['style' => "{ 5: 'color': 'red'; 'background-color': 'whilte' }"];
                //$row['style']=$object;
                $row['style']= "3:'background-color: red; color: black;'";
            }
            //var_dump ($row);
            $data[] = $row;
        }
        $arr = array("total" => count($data), 
        "records" => $data);

Assueme if($row["id"]==1) 是规则之一，所以我在这里尝试添加样式部分。如果您看到代码，我已经尝试了多种方法来为其添加样式。它只是不工作。但是，如果我使用 php 打印行，我得到的行完全按照它应该编码的方式（参见上面提到的单单元格样式的代码）。但它没有反映在 table.

第二题

我想用一种颜色为行着色，除此之外，我想用不同的方式为单个单元格着色（两种不同的规则，一种用于行，一种用于列）。由于第一个要求没能达到，所以没在这个问题上花太多时间

第三题

如何使行高动态变化？假设我有一个列名response，我给它分配了一个固定的宽度，当该行的内容超过宽度时，它会在可用宽度之后显示...。我想在下一行显示它。可以这样做吗？

谢谢。

Answer 1

回答你的第一个问题：

style 到达客户端时必须是 JSON 对象，因此在服务器端，它必须是稍后传递给 json_encode()[ 的数组=21=]

$row['style'] => array('5' => 'background-color: red; color: black;');
...
$result = json_encode($row);

回答你的第二个问题：

最新版本的 w2ui 1.5 支持记录上的 class 和 style 属性。

因此，要为行着色和为行中的单个单元格着色不同，您可以使用：

records: [
    { recid: 1, fname: 'Jane', lname: 'Doe', class: 'my-css-class-for-the-row', style: {3: 'background-color: yellow; color: white;'} }           
];

style 和 class 都可以是字符串或对象，因此您也可以反过来使用 style 为整行着色并 class 为特定单元格着色。

回答你的第三个问题：

由于虚拟滚动，行不能有动态高度。这意味着，所有行必须具有相同的高度。但是，您可以使用

更改所有行的高度

grid.recordHeight = 40; // height in pixels

同样，这需要最新的 1.5 版 w2ui，如果与列组一起使用，它看起来很古怪。

向 w2ui 单元格 [Grid] 添加自定义颜色

Add custom color to w2ui cell [Grid]

javascript

php

w2ui