如何将css添加到treegrid GXT 3中的选定行答案

【问题标题】：how to add css to selected row in treegrid GXT 3如何将css添加到treegrid GXT 3中的选定行
【发布时间】：2012-05-24 20:05:44
【问题描述】：

我使用 GXT 3 创建了一个树形网格。现在我想更改所选行的背景颜色，并且我想更改根节点的背景（叶行，即父行）。

我使用 GXT 3.0 和 eclipse 3.7

提前致谢

【问题讨论】：

标签： css gxt treegrid

【解决方案1】：

我也遇到了同样的问题，我想根据某些条件为一行的背景着色。最后，我找到了解决办法：

你需要创建一个GridViewConfig 并覆盖getColumnStyle 方法来返回想要的颜色，我花了一段时间才发现，但是覆盖getRowStyle 方法并不能解决问题，至少不是对我来说。

grid.getView().setViewConfig(new GridViewConfig<Model>() {

    @Override
    public String getColStyle(  Model model, 
                                ValueProvider<? super Model, ?> valueProvider,
                                int rowIndex, int colIndex)
    {
        if ("Other2".equals(model.getName())){
            return "bold";
        }else if ("Other".equals(model.getName())){
            return "red-row";
        }
        return null;
    }

    @Override
    public String getRowStyle(Model model, int rowIndex) {
        return null;
    }
});

注意：相应修改 CSS 文件。

【讨论】：

我遇到了同样的问题并尝试了这种方法。没用。我可以看到指定的 CSS 类（在此示例中为红色行）应用于 TR 元素，但渲染网格的各个 td 元素应用了它们自己的类，这些类的设置覆盖了指定类中的设置。不知道如何处理。

【解决方案2】：

我认为与 GXT 2.x 相同

只需在 ColumnConfig 上添加您自己的 CellRenderer ：

List<ColumnConfig> columns = new ArrayList<ColumnConfig>();
ColumnConfig levelColumnConfig = new ColumnConfig("level", "Level", 50);
levelColumnConfig.setRenderer(getGridCellRenderer());
columns.add(levelColumnConfig);
ColumnModel cm = new ColumnModel(columns);



private GridCellRenderer<BeanModel> getGridCellRenderer() {
        if (gridCellRenderer == null) {
            gridCellRenderer = new GridCellRenderer<BeanModel>() {
                @Override
                public Object render(BeanModel model, String property, ColumnData config, int rowIndex, int colIndex,
                    ListStore<BeanModel> store, Grid<BeanModel> grid) {

                    //add some logic for example

                    String color = "#000000";
                    MyBean mybean = (MyBean) model.getBean();
                    switch (mybean.getLevel()) {
                    case TRACE:
                        color = "#f0f0f0";
                        break;
                    default:
                        color = "#000000";
                    }

                    // add some background-color

                    config.style = config.style + ";background-color:" + color + ";";
                    Object value = model.get(property);
                    return value;
                }
            };
        }
        return gridCellRenderer;
    }

【讨论】：

GridCellRenderer 从 3.x 中消失了，而是使用 GWT Cell 和 AbstractCell 类 - 这不仅允许您渲染元素，还可以接受事件。

【解决方案3】：

我发现你也可以像这样调整 CSS：

grid.getCellFormatter().addStyleName(0, colNo - 1, MC_GWT.MC_STYLE_VERTICAL_ICON_HOLDER);

我认为这更容易一些 :) 尤其是当您想要设置 , f.e. 的样式时。里面的图标对齐。就我而言，我需要在垂直行中显示图标。所以我需要将单元格显示更改为“阻止”；

【讨论】：