问题：

如何更改单个ZK网格单元格的背景颜色？

胡锋

2023-03-14

有人知道如何更改ZK网格中单元格的背景色吗？在网上搜索了几个小时，找不到太多。静态单元格不是问题，但这是动态渲染的网格。

计划是将某些细胞涂成红色或黄色，因为我想突出显示特定的值。

我的Zul：

<?page title="Ergebnis des Clusterings" contentType="text/html;charset=UTF-8"?>
<zk xmlns:n="native" xmlns:c="client">
    <style>body { background-color: #fcfcfc; }</style>
    <image id="image" src="http://i.imgur.com/dL3ahNV.gif"
        style="display: block; width: 300px; margin: 1% auto 0 auto;">
    </image>
    <window id="win" apply="org.zkoss.bind.BindComposer"
        style="margin: 0 auto; background: #ddf4ea; position: relative;"
        viewModel="@id('vm') @init('frontend.ClusteringOutputVM')"
        border="normal" width="1000px" position="center,top"
        mode="embedded">
        <caption label="KaufDort Cluster - Clustering Output"
            style="font-family: Segoe UI; font-style: normal; font-size: 18px; color: #000000; padding: 5px;" />
        <include style="margin-top: 20px; margin-bottom: 20px;"
            src="marketing.zul" />
        <hbox>
            <grid id="grid" model="@load(vm.mapModel)" hflex="max">
                <columns children="@load(vm.columnsModel)">
                    <template name="children">
                        <column hflex="min" label="@load(each)"
                            sort="none"
                            style="background: #ddf4ea; font-family: Segoe UI; font-style: normal; font-size: 18px; color: #000000; font-weight: normal;" />
                    </template>
                </columns>
                <template name="model" var="cur_row">
                    <row
                        children="@load(vm.columnsModel) @template(forEachStatus.index lt (vm.columnsModel.size()- cur_row.value.size()) ? 'fixed' : 'variable')">
                        <template name="fixed">
                            <cell>
                                <button label="@load(cur_row.key)"
                                    style="border: none; border-radius: 0px; background: #7f8c8d; color: white; text-shadow: none; font-size: 18px;"
                                    onClick="@command('showDiagram')" width="100%" />
                            </cell>
                        </template>

                        <template name="variable">
                            <cell>
                                <label
                                    style="text-align: left; font-family: Segoe UI; font-style: normal; font-size: 14px; color: #000000;"
                                    value="@load(cur_row.value[forEachStatus.index- vm.columnsModel.size()+ cur_row.value.size()])" />
                            </cell>
                        </template>
                    </row>
                </template>
            </grid>
                
            <image id="questionmark" src="Files/QuestionmarkButton.png"
                tooltip="centroid" style="cursor: help" />
              
        </hbox>
    </window>
    <popup id="centroid" width="300px">
        <html>
            <![CDATA[ Text]]>
        </html>
    </popup>
</zk>

我的虚拟机:

public class ClusteringOutputVM {

    private ArrayList<KMeansCluster> clusterList;
    private ArrayList<Feature> featureList;
    private int numOfClusters;
    private ListModelMap data;
    private ListModel columns_model;
    private boolean[][] paintMe;
    @Wire
    private Grid grid;

    public ClusteringOutputVM() {

        data = new ListModelMap();
        columns_model = new ListModelList();

        getSessionGlobalVariables();
        transferDataToListModelMap();
        fillColumnsModel(numOfClusters);
    }

    @AfterCompose
    public void paintCells() {
        for (int i = 0; i < paintMe.length; i++) {
            for (int j = 0; j < paintMe[i].length; j++) {
                if(paintMe[i][j]){
                    grid.getCell(i, j); ?????
                }
            }
        }
    }

    private void transferDataToListModelMap() {
        List<String> valueList = new java.util.ArrayList<String>();
        int featureType = 0;

        for (int i = 0; i < featureList.size(); i++) {
            featureType = featureList.get(i).getFeatureType();
            if (featureType == 0) {
                NumericFeature nf = (NumericFeature) featureList.get(i);
                double mean = nf.getMean();
                double stDev = nf.getStdDev();

                for (int j = 0; j < clusterList.size(); j++) {
                    Instance in = clusterList.get(j).getCentroid();
                    String centroidVal = in.toString(i);
                    double value = Double.valueOf(centroidVal);
                    if (value > (mean + stDev) || value < (mean - stDev)) {
                        paintMe[i+1][j+1] = true;
                    }
                    valueList.add(centroidVal);

                }
            } else {
                for (int j = 0; j < clusterList.size(); j++) {
                    Instance in = clusterList.get(j).getCentroid();
                    paintMe[i+1][j+1] = false;
                    valueList.add(in.toString(i));
                }

                data.put((featureList.get(i).getFeatureName()), valueList);
                valueList = new ArrayList<String>();
            }
        }

    }

    private void getSessionGlobalVariables() {
        clusterList = (ArrayList<KMeansCluster>) Sessions.getCurrent()
                .getAttribute("finalClusterList");
        featureList = (ArrayList<Feature>) Sessions.getCurrent().getAttribute(
                "finalFeatureList");
        numOfClusters = (int) Sessions.getCurrent().getAttribute(
                "chosenNumOfClusters");
        paintMe = new boolean[featureList.size() + 1][clusterList.size() + 1];
    }

    private void fillColumnsModel(int endValue) {
        ((List) columns_model).add(new String("Feature"));
        for (int i = 1; i <= endValue; ++i)
            ((List) columns_model).add(new String("Cluster " + i));

    }

    public ListModel getColumnsModel() {
        return columns_model;
    }

    public ListModel getMapModel() {
        return data;
    }

    @Command
    public void showDiagram(
            @ContextParam(ContextType.COMPONENT) Component component) {

        Button b = (Button) component;
        String featureChosen = b.getLabel();
        Feature feat = null;
        for (int i = 0; i < featureList.size(); i++) {
            if (featureList.get(i).getFeatureName().equals(featureChosen)) {
                feat = featureList.get(i);
            }
        }
        Sessions.getCurrent().setAttribute("chosenFeature", feat);

        if (feat.getFeatureType() != 0)
            // koennte problematisch werden bei anderen Browsern
            Executions.getCurrent().sendRedirect("stackedColumns.zul");
        else
            Executions.getCurrent().sendRedirect("boxplot.zul");

    }

}

共有2个答案

严稳

2023-03-14

正如chillworld所说，在使用ViewModel时，@Wire默认不起作用。在这里阅读如何做到这一点，但请注意，这是不鼓励的。

在这种情况下，更好的解决方案是在每一行的value eList中放置一些ParamObject，而不仅仅是字符串：

class ParamObject {
    private String label;
    private String sClass; // or style
    // getters and setters
}

在您的视图模型.transfer数据到列表模型映射（）中创建它：

Instance in = clusterList.get(j).getCentroid();
String centroidVal = in.toString(i);
double value = Double.valueOf(centroidVal);

ParamObject params = new ParamObject();
params.setLabel(centroidVal);
params.setSclass(value > (mean + stDev) || value < (mean - stDev) ? "colored" : "notColored")
valueList.add(params);

然后，您可以在zul中使用数据绑定:

<label sclass="cur_row.value[weird index calculation].sClass"
       style="your inline style for font"
       value="@load(cur_row.value[weird index calculation].label)" />

您可能希望将索引存储在一个临时字段中，以保持其可读性。

然后，您可以为您的样式编写一些sClass。如果您更喜欢使用内联样式，只需使用您已经拥有的字体样式来合并它，并将ParamObject的sClass/style属性绑定到style而不是sclass。

那绪

2023-03-14

首先，

您在MVVM中，因此除非连接选择器，否则@Wire将无法工作
我具体不说怎么做，因为这样做是不好的做法。

只是工作MVVM：

<cell style="@load(each.condition?'some style':'some other style')"/>

如果您无法访问它，则始终可以创建一个包含所有值的包装类，而不是分隔的布尔[][]。

类似资料：

Vaadin 8改变网格单元格的背景颜色

我如何在Vaadin 8或更高版本中绘制网格单元。由于Vaadin 8不再支持grid.setCellStyleGenerator，我不知道还能做什么。有什么建议吗？
根据单元格内容更改字表单元格背景颜色。
动态更改JTable单元格的背景颜色

我想改变JTable的单元格背景颜色，想从MySQL数据库中获取数据。我在MySQL中使用一个数据表，它有一个状态字段。如果状态为1，则单元格背景颜色应为红色；如果状态为0，则应更改为红色。
更改JTable中一个单元格的背景颜色[重复]
根据值更改表格的背景单元格

问题内容：我的站点读取一个XML文件，该文件包含数据表的信息（值）。我使用CSS设置表格样式，并且一切正常。为了获得更好的用户体验，我想知道是否有可能根据其值动态更改每个单元格的背景颜色？例如：每个包含小于5的数字的单元格都有红色背景色；每个大于等于“ 5”的单元格具有绿色背景色。我对此的第一个解决方案是使用Javascript-但我想知道是否有办法仅使用CSS样式来解决此问题？问题
如何使用python xlwt库更改Excel单元格的背景颜色？

问题内容：我使用xlwt Python库在excel工作簿中写入数据。现在我在将背景色添加到excel单元时遇到了一些问题。例如，我在RGB（10,20,30）中有下一个颜色，最简单的方法是什么？有什么办法可以将此颜色设置为单元格吗？问题答案：在此示例中，我展示了如何设置单元格的背景色，您可以将其运行以得到结果：

如何更改单个ZK网格单元格的背景颜色？

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档