如何根据单元格的值（GWT）在CellTable中设置特定的单元格？ [英] How to style specific cells in CellTable depending the value of that cell (GWT)?

问题描述

好的，我有一个 CellTable ，它有3列和2行。我希望表格中某些特定单元格（并非所有单元格）中的文本为BOLD。

请查看以下代码：

  ListDataProvider< List< String>> dataProvider = new ListDataProvider< List< String>>（）; 
 dataProvider.addDataDisplay（table）; 
列表< List< String>> list = dataProvider.getList（）; 
列表< String> sublist1 = Arrays.asList（223，546，698）; 
列表< String> sublist2 = Arrays.asList（123，876，898）; 
列表< String> sublist2 = Arrays.asList（123，896，438）; 
 IndexedColumn column1 = new IndexedColumn（0）; 
 table.addColumn（column1，Col1）; 
 IndexedColumn column2 = new IndexedColumn（1）; 
 table.addColumn（column2，Col2）; 
 IndexedColumn column3 = new IndexedColumn（2）; 
 table.addColumn（column3，Col3）; 
  

现在，我需要与row2& col3（即898）是大胆的，所以如果我喜欢这样的

  column3.setCellStyleNames（getView（）。getRes （）的CSS（）myBoldColor（））。 
  

然后它会让整个BOLD栏变大。

所以，我认为我们需要在第3列和第

 
 Col1  -  Col2  -  Col3 
 223  -  546  - 698 
 123  -  876  -   898  
 123  -  896  -  438 
 

解决方案

您可以尝试扩展 AbstractCell 。

请阅读实现render（）方法。

示例代码：

 静态类BoldCell extends AbstractCell< String> {
 
 / ** 
 *用于呈现单元格的HTML模板。 
 * / 
界面模板扩展为SafeHtmlTemplates {
 @ SafeHtmlTemplates.Template（< div style = \{0} \> {1}< / div> ）
 SafeHtml单元格（SafeStyles样式，SafeHtml值）; 
} 
 
 / ** 
 *创建用于渲染单元格的模板的单例实例。 
 * / 
 private static Templates templates = GWT.create（Templates.class）; 
 
 @Override 
 public void render（Context context，String value，SafeHtmlBuilder sb）{
 / * 
 *总是对值进行空值检查。如果
 *底层数据包含空值，或者数据到达顺序不正确，则单元格窗口小部件可以将空值传递给单元格。 
 * / 
 if（value == null）{
 return; 
} 
 
 //如果该值来自用户，我们将其转义以避免XSS攻击。 
 SafeHtml safeValue = SafeHtmlUtils.fromString（value）; 
 
 //使用模板创建单元格的html。 
 FontWeight weight = FontWeight.NORMAL; 
 if（safeValue.asString（）。equals（898））{
 weight = FontWeight.BOLD; 
} 
 SafeStyles styles = SafeStylesUtils.forFontWeight（weight）; 
 SafeHtml rendered = templates.cell（styles，safeValue）; 
 sb.append（rendered）; 
 
 
 $ / code $ / pre 
 
 $ hr 
 
 
在上面的代码中，你可以使用row no来尝试它（第3行第0列的粗体值）
 
 $ $ p $ $ $ $ $ $ $ $ $ $ b FontWeight weight = FontWeight.NORMAL; 
 if（context.getIndex（）== 2）{
 weight = FontWeight.BOLD; 
} 
 ... 
  

---

 单元格< String> cell = new BoldCell（）; 
 
栏<联系人，字符串> nameColumn = new Column< Contact，String>（cell）{
 @Override 
 public String getValue（Contact object）{
 return object.name; 
} 
}; 
 table.addColumn（nameColumn，Name）; 
  

Ok, i have a CellTable that has 3 columns and 2 rows. I want the text in SOME specific cells (not all cell) in the table to be BOLD.

Please look at this code:

ListDataProvider<List<String>> dataProvider = new ListDataProvider<List<String>>();
dataProvider.addDataDisplay(table);
List<List<String>> list = dataProvider.getList();
List<String> sublist1= Arrays.asList("223","546","698");
List<String> sublist2= Arrays.asList("123","876","898");
List<String> sublist2= Arrays.asList("123","896","438");
IndexedColumn column1=new IndexedColumn(0);
table.addColumn(column1, "Col1");
IndexedColumn column2=new IndexedColumn(1);
table.addColumn(column2, "Col2");
IndexedColumn column3=new IndexedColumn(2);
table.addColumn(column3, "Col3");

Now, I want the Cell that is the intersect of row2 & col3 (ie "898") to be BOLD, so if i do like this

column3.setCellStyleNames(getView().getRes().css().myBoldColor());

Then it will make the whole column BOLD.

So, i think properly we need to loop over each cell in column3 & set the style accordingly, so that we can have the result like this:

Col1 - Col2 - Col3
223 - 546 - 698
123 - 876 - 898
123 - 896 - 438

解决方案

You can try it be extending AbstractCell also.

Read here about Implementing the render() Method.

Sample code:

static class BoldCell extends AbstractCell<String> {

    /**
     * The HTML templates used to render the cell.
     */
    interface Templates extends SafeHtmlTemplates {
        @SafeHtmlTemplates.Template("<div style=\"{0}\">{1}</div>")
        SafeHtml cell(SafeStyles styles, SafeHtml value);
    }

    /**
     * Create a singleton instance of the templates used to render the cell.
     */
    private static Templates templates = GWT.create(Templates.class);

    @Override
    public void render(Context context, String value, SafeHtmlBuilder sb) {
        /*
         * Always do a null check on the value. Cell widgets can pass null to cells if the
         * underlying data contains a null, or if the data arrives out of order.
         */
        if (value == null) {
            return;
        }

        // If the value comes from the user, we escape it to avoid XSS attacks.
        SafeHtml safeValue = SafeHtmlUtils.fromString(value);

        // Use the template to create the Cell's html.
        FontWeight weight = FontWeight.NORMAL;
        if (safeValue.asString().equals("898")) {
            weight = FontWeight.BOLD;
        }
        SafeStyles styles = SafeStylesUtils.forFontWeight(weight);
        SafeHtml rendered = templates.cell(styles, safeValue);
        sb.append(rendered);
    }
}

---

In above code you can try it with row no also (Bold value for 0th column of 3rd row)

        ...
        FontWeight weight = FontWeight.NORMAL;
        if (context.getIndex()==2) {
            weight = FontWeight.BOLD;
        }
        ...

---

    Cell<String> cell = new BoldCell();

    Column<Contact, String> nameColumn = new Column<Contact, String>(cell) {
        @Override
        public String getValue(Contact object) {
            return object.name;
        }
    };
    table.addColumn(nameColumn, "Name");

这篇关于如何根据单元格的值（GWT）在CellTable中设置特定的单元格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！