2017-06-02 11 views
0

誰かがZKグリッド内のセルの背景色を変更する方法を知りましたか?数時間ウェブを検索していて、それほど多く見つけることができません。静的なセルは問題ではありませんが、これは動的にレンダリングされたグリッドです。単一の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> 

マイVM:すべての

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

    } 

} 
+0

どのような状態で細胞を着色する必要がありますか? – chillworld

答えて

0

まず、

あなたはMVVMであるので@Wireセレクタを配線しない限り動作しません。
私は具体的には、それを行う方法を言わないのは、悪い習慣だからです。

だけMVVM仕事:

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

あなたがそれをアクセスもできない場合、あなたは常にすべての値の分離Boolean[][]の代わりにが含まれているどのようなラッパークラスを作ることができます。

0

ViewModelを使用しているとき、@wireはデフォルトでは動作しません。 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にバインドします。

関連する問題