如何在Wicket中更改AjaxEditableLabelColumn單元格的顏色

Question

我有一個帶有onChange方法的AjaxEditableLabelColumn 。 我需要更改剛編輯過的單元格的backgroundcolor。 這是代碼：

private AjaxEditableLabelColumn<User, String> createMyEditableColumn(String propertyExpression, boolean sortable) {
    AjaxEditableLabelColumn<User, String> column = new AjaxEditableLabelColumn<User, String>(propertyExpression, sortable) {
        private static final long serialVersionUID = 1L;

        @Override
        protected void onChange(AjaxRequestTarget target, IModel<User> model) {

            User newRecord = model.getObject();

            if (newRecord.hasChanged()) {
                if (newRecord.isRight()) {
                    ((((TURN GREEN))))
                } else {
                    ((((TURN RED)))))
                }

            } else {
                ((((REMOVE COLOR))))
            }
        }

    };
    return column;
}

Answer 1

我建議您只添加一個屬性修飾符行為，並更改css類或樣式屬性的模型。

碼：

    private AjaxEditableLabelColumn<User, String> createMyEditableColumn(String propertyExpression, boolean sortable) {

        final IModel<String> cssModel = Model.of("bkg-default");
        AjaxEditableLabelColumn<User, String> column = new AjaxEditableLabelColumn<User, String>(propertyExpression, sortable) {

        private static final long serialVersionUID = 1L;

           @Override
           protected void onChange(AjaxRequestTarget target, IModel<User> model) {

                User newRecord = model.getObject();

                if (newRecord.hasChanged()) {
                    if (newRecord.isRight()) {
                        cssModel.setObject("bkg-green");
                    } else {
                        cssModel.setObject("bkg-red");
                    }
                } else {
                    cssModel.setObject("bkg-default");
                }
           }
           // The following line is unnccessary if you already add 
           // component for to be render in AjaxEditableLabelColumn
           target.add(this);

       };
       column.add(new AttributeModifier("css", cssModel));
       return column;
    }

CSS：

.bkg-default { background-color: transparent; }
.bkg-green { background-color: green; }
.bkg-red { background-color: red; }

Answer 2

最簡單的解決方案是將AttributeModifier添加到單元格並刷新它。 AjaxEditableLabelColumn看起來像一個自定義實現，所以我猜一點：

        @Override
        protected void onChange(AjaxRequestTarget target, IModel<User> model) {

            User newRecord = model.getObject();

            if (newRecord.hasChanged()) {
                if (newRecord.isRight()) {
                    item.add(new AttributeModifier("style", "background-color:green;"));
                } else {
                    item.add(new AttributeModifier("style", "background-color:red;"));
                }

            } else {
                    item.add(new AttributeModifier("style", ""));
            }
        target.add(item); //refreshing
        }

顯然，你可以通過使用Models和/或覆蓋AttributeModifier的newValue方法來使其更加健壯。