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

问题描述

好的，我有一个 CellTable，它有 3 列和 2 行.我希望表格中某些特定单元格(不是所有单元格)中的文本为粗体.

请看这段代码:

ListDataProvider>dataProvider = new ListDataProvider>();dataProvider.addDataDisplay(table);列表<列表<字符串>>list = dataProvider.getList();列表<字符串>sublist1= Arrays.asList("223","546","698");列表<字符串>sublist2= Arrays.asList("123","876","898");列表<字符串>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());

然后它会使整个列加粗.

所以，我认为我们需要循环遍历 column3 & 中的每个单元格.相应地设置样式，以便我们可以得到这样的结果:

<前>Col1 - Col2 - Col3223 - 546 - 698123 - 876 - 898123 - 896 - 438

解决方案

你也可以尝试扩展AbstractCell.

在此处阅读有关实现 render() 方法的信息.

示例代码:

static class BoldCell extends AbstractCell{/*** 用于呈现单元格的 HTML 模板.*/接口模板扩展了 SafeHtmlTemplates {@SafeHtmlTemplates.Template("<div style="{0}">{1}</div>")SafeHtml 单元格(SafeStyles 样式，SafeHtml 值)；}/*** 创建用于呈现单元格的模板的单例实例.*/私有静态模板模板 = GWT.create(Templates.class);@覆盖公共无效渲染(上下文上下文，字符串值，SafeHtmlBuilder sb){/** 始终对值进行空检查.单元格小部件可以将 null 传递给单元格，如果* 基础数据包含空值，或者数据无序到达.*/如果(值 == 空){返回;}//如果值来自用户，我们将其转义以避免 XSS 攻击.SafeHtml safeValue = SafeHtmlUtils.fromString(value);//使用模板创建 Cell 的 html.FontWeight 权重 = FontWeight.NORMAL;如果 (safeValue.asString().equals("898")) {重量 = FontWeight.BOLD;}SafeStyles 样式 = SafeStylesUtils.forFontWeight(weight);SafeHtml 渲染 = templates.cell(styles, safeValue);sb.append(rendered);}}

<小时>

在上面的代码中，您也可以尝试使用行号(第 3 行第 0 列的粗体值)

<代码> ...FontWeight 权重 = FontWeight.NORMAL;如果 (context.getIndex()==2) {重量 = FontWeight.BOLD;}...

<小时>

 Cell单元格 = 新的 BoldCell();列<联系人，字符串>nameColumn = new Column(cell) {@覆盖公共字符串getValue(联系人对象){返回对象名称；}};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屋！