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

【问题标题】：How to change background color in single ZK Grid Cells?如何更改单个 ZK 网格单元中的背景颜色？
【发布时间】：2017-11-04 08:55:39
【问题描述】：

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

计划是将某些单元格着色为红色或黄色，因为我想突出显示该特定值。

我的祖尔：

<?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");

    }

}

【问题讨论】：

在什么情况下需要为您的单元格着色？

标签： java grid cell background-color zk

【解决方案1】：

首先，

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

只需工作 MVVM ：

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

如果你不能访问它，你总是可以创建一个包含所有值的包装类，而不是 Boolean[][] 分隔。

【讨论】：

【解决方案2】：

正如chillworld 所说，@Wire 默认情况下在使用 ViewModel 时不起作用。阅读here 怎么做，但请注意不鼓励这样做。

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

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

在您的ViewModel.transferDataToListModelMap() 中创建它：

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)" />

您可能希望将索引存储在 temporary field 中以保持可读性。

然后您可以为您的风格编写一些 sClass。如果您更喜欢使用内联样式，只需将其与您已有的字体样式连接起来，并将ParamObject 的 sClass/style 属性与style 绑定，而不是sclass。

【讨论】：