【问题标题】:How to get at Apache Wicket PropertyColumn data to dynamically change CSS class based on content?如何获取 Apache Wicket PropertyColumn 数据以根据内容动态更改 CSS 类?
【发布时间】:2013-11-09 02:01:26
【问题描述】:

我有一个 Apache Wicket 页面,该页面有一个 DataTable,其中有一列需要显示状态,Red、Yellow、Green。如果列的内容是红色,我想将 CSS 类更改为红色状态,如果是黄色则为黄色状态,否则为绿色状态。我似乎无法从可点击的属性列中获取数据。您如何获取 PropertyColumn 中的数据,或者是否有另一种方法可以在 DataTable 中执行此操作?谢谢!

更新

谢谢你,马丁。这是我想出的:

@Override
public void populateItem(Item<ICellPopulator<T>> cellItem, String componentId, final IModel<T> rowModel) {
    Label label = new Label(componentId, getDataModel(rowModel));
    cellItem.add(label);
    LOGGER.debug("populateItem: label DefaultModelObject: {}", (String) label.getDefaultModelObject());

    label.add(new AttributeModifier("class", new AbstractReadOnlyModel<String>() {
        private static final long serialVersionUID = 1L;

        ProcessingTime  processingTime = (ProcessingTime) rowModel.getObject();
        @Override
        public String getObject() {
            String cssClass = null;
            if (StringUtils.equals("Red", processingTime.getStatus())) {
                cssClass = "red-status";
            } else if (StringUtils.equals("Yellow", processingTime.getStatus())) {
                cssClass = "yellow-status";
            } else if (StringUtils.equals("Green", processingTime.getStatus())) {
                cssClass = "green-status";
            } else {
                cssClass = "process-status";
            }
            return cssClass;
        }
    }));
}

【问题讨论】:

    标签: css apache properties conditional wicket


    【解决方案1】:

    首先,看一下PropertyColumn的populateItem,它的实现是怎样的,在Wicket 6中(和其他版本类似)是这样的:

    public class PropertyColumn<T, S> extends AbstractColumn<T, S> implements IExportableColumn<T, S, Object>
    ...
        @Override
        public void populateItem(final Item<ICellPopulator<T>> item, final String componentId,
            final IModel<T> rowModel)
        {
            item.add(new Label(componentId, createLabelModel(rowModel)));
        }
    ...
    }
    

    您必须修改创建为列标签的内部组件。

    第一种方法:创建自己的组件(您的组件也可以包含自己的创建css类或样式的机制,而不是在此处添加AttributeModifier):

    @Override
    public void populateItem(final Item<ICellPopulator<T>> item, final String componentId,
        final IModel<T> rowModel)
        {
        super.populateItem(item, componentId, rowModel);
        MarkupContainer c = item.get(componentId);
        c.add(new AttributeModifier("class", new AbstractReadonlyModel<String>() {
    
        private static final long serialVersionUID = 1L;
    
        @Override
        public String getObject() {
            // some logic how to which css you want to apply
            return "MY-CSS-CLASS";
        }
    
    
    
    }));
    

    }

    或者您可以让 Wicket 自己创建标签组件,您只需添加一个 AttributeModifier:

    @Override
    public void populateItem(final Item<ICellPopulator<T>> item, final String componentId, final IModel<T> rowModel) 
        {
        super.populateItem(item, componentId, rowModel);
        Label l = new Label(componentId, createLabelModel(rowModel));
        item.add(l);
        l.add(new AttributeModifier("class", new AbstractReadonlyModel<String>() {
    
        private static final long serialVersionUID = 1L;
    
        @Override
        public String getObject() {
            // some logic how to which css you want to apply
            return "MY-CSS-CLASS";
        }
    
    
    
    }));
    

    }

    注意:方法 'createLabelModel' 在 Wicket 6 中已弃用,而改为使用 'getDataModel'。

    【讨论】:

    • 马丁,谢谢您的建议。我尝试了这些,并且为列设置了 CSS,但不是为单元格设置了 CSS。我尝试了不同的方法,但 CSS 中的字体颜色始终应用于整个列。
    • 如果你添加一些条件到 AttributeModifier 你得到它。你有要渲染的行的模型,所以你可以实现类似'return rowModel.getObject.isMyRow()? "my-red-css-class" : "default-css-class"';
    猜你喜欢
    • 2019-01-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-05-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-10-30
    相关资源
    最近更新 更多