将自定义颜色添加到 w2ui 单元格 [网格]
Posted
技术标签:
【中文标题】将自定义颜色添加到 w2ui 单元格 [网格]【英文标题】:Add custom color to w2ui cell [Grid] 【发布时间】:2016-12-06 09:51:14 【问题描述】:我正在尝试为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 打印行,我得到的行与它应该编码的方式完全相同(参见上面所述的单单元格样式的代码)。但它并没有反映在表格中。
第二个问题
我想用一种颜色为行着色,最重要的是,我想给一个单独的单元格着色(两种不同的规则,一种用于行,一种用于列)。由于第一个要求我没能达到,所以我没有花太多时间在这个问题上。
第三个问题
如何使行的高度动态化?假设我有一个列名response
,我为其分配了一个固定宽度,当该行的内容超过宽度时,它会在可用宽度之后显示...
。我想在下一行展示它。有可能吗?
谢谢。
【问题讨论】:
【参考方案1】:回答您的第一个问题:
style
在到达客户端时必须是 JSON 对象,因此在服务器端,它必须是稍后传递给 json_encode()
的数组
$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,如果与列组一起使用,它看起来很古怪。
【讨论】:
我可以为行使用任何自定义 css 吗?或者我需要遵循什么特定格式? 可以正常使用CSS。在某些情况下,您可能必须将!important
添加到 CSS 属性中,以便您可以强制浏览器覆盖 w2ui 默认值(或从其他样式表中获取的样式,例如 jquery-ui 或 bootstrap)。以上是关于将自定义颜色添加到 w2ui 单元格 [网格]的主要内容,如果未能解决你的问题,请参考以下文章
JS/w2ui:如何使用 w2ui JavaScript UI 库将子级添加到网格?
如何将自定义视图添加到 JSQMessagesViewController 单元格,以便它包含一个带有一些按钮和文本视图的视图?