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

时间:2012-05-17 08:49:57

标签: css gxt treegrid

我使用GXT创建了一个treegrid 3.now我想改变所选行的背景颜色,我也想改变根节点的背景(叶子行,即父行)。

iam使用GXT 3.0和eclipse 3.7

提前致谢

3 个答案:

答案 0 :(得分:6)

我也有同样的问题,我想根据某些条件为一行的背景着色。最后,我找到了一个解决方案:

您需要创建一个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文件。

答案 1 :(得分:0)

我认为与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;
    }

答案 2 :(得分:0)

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

magrittr

我觉得它有点容易:)特别是当你想要风格时,f.e。它内部的图标对齐。在我的情况下,我需要在垂直行中显示图标。所以我需要将单元格显示更改为&#39; block&#39;;