GWT 细胞表。如何在 EditTextCell 中更改值后设置单元格 css 样式

Question

根据用户在可编辑单元格中的输入，我想显示具体的样式。我要做的是非常基础的验证。

我已经尝试在 Anonymous new Column() {} 中覆盖 getCellStyleNames，但这在开始时基于模型值起作用，但是在用户更改该单元格的值后什么会起作用？

请帮忙。

Answer 1

在render方法中使用setCellStyleNames：

Column<MyType, String> testColumn = new Column<MyType, String>(new EditTextCell()) {
    @Override
    public String getValue(MyType object) {
        return object.getValue();
    }

    @Override
    public void render(Context context, MyType object, SafeHtmlBuilder sb) {
        if(object.isValid())
            setCellStyleNames("validStyleNames");
        else
            setCellStyleNames("invalidStyleNames");

        super.render(context, object, sb);
    }
};

Answer 2

正确的方法是在匿名 class 中覆盖 getCellStyleNames 方法：

new Column<Model, String>(new EditTextCell())

你必须 return string name of css class.

Answer 3

你非常接近。

Override getCellStyleNames in the new Column() {} 是解决方案的前半部分。

下半场：

yourColumn.setFieldUpdater(new FieldUpdater<DataType, String>() {

            @Override
            public void update(int index, DataType object, String value) {
                // the following line will apply the correct css
                // based on the current cell value 
                cellTable.redrawRow(index);
            }
});

希望这对您有所帮助！

以下代码是一个琐碎但完整的示例。

定义了一个包含两列的单元格表。第一列中的每个单元格显示一个简单的问题。第二列中的每个单元格都是一个可编辑单元格，允许您输入您对第一列中显示的问题的答案。如果您的答案是正确的，那么答案的文本将被设置为粗体和黑色。否则，文本将以正常字体粗细设置为红色。

问答 GWT 应用源代码：

import com.google.gwt.cell.client.Cell;
import com.google.gwt.cell.client.EditTextCell;
import com.google.gwt.cell.client.FieldUpdater;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.cellview.client.CellTable;
import com.google.gwt.user.cellview.client.Column;
import com.google.gwt.user.cellview.client.TextColumn;
import com.google.gwt.user.client.ui.RootPanel;

import java.util.Arrays;
import java.util.List;

public class CellTableExample implements EntryPoint {

    private static class Question {

        private final String question;
        private final String correctAnswer;
        private String userProvidedAnswer;

        public Question(String question, String correctAnswer) {
            this.question = question;
            this.correctAnswer = correctAnswer;
            this.userProvidedAnswer = "";
        }

        public String getQuestion() {
            return question;
        }

        public String getCorrectAnswer() {
            return correctAnswer;
        }

        public String getUserProvidedAnswer() {
            return userProvidedAnswer;
        }

        public void setUserProvidedAnswer(String userProvidedAnswer) {
            this.userProvidedAnswer = userProvidedAnswer;
        }
    }

    private static final List<Question> questionList = Arrays.asList(
            new Question("Which city is capital of England?", "London"),
            new Question("Which city is capital of Japan?", "Tokyo"));

    @Override
    public void onModuleLoad() {

        final CellTable<Question> cellTable = new CellTable<>();

        TextColumn<Question> questionCol = new TextColumn<Question>() {
            @Override
            public String getValue(Question object) {
                return object.getQuestion();
            }
        };

        Column<Question, String> ansCol = new Column<Question, String>(new EditTextCell()) {

            @Override
            public String getValue(Question object) {
                return object.getUserProvidedAnswer();
            }

            @Override
            public String getCellStyleNames(Cell.Context context, Question object) {
                if (object.getUserProvidedAnswer().equalsIgnoreCase(object.getCorrectAnswer())) {
                    return "correct-answer";
                } else {
                    return "wrong-answer";
                }
            }

        };

        ansCol.setFieldUpdater(new FieldUpdater<Question, String>() {
            @Override
            public void update(int index, Question object, String value) {
                object.setUserProvidedAnswer(value);
                cellTable.redrawRow(index);
            }
        });

        cellTable.addColumn(questionCol, "Question");
        cellTable.addColumn(ansCol, "Your Answer");

        cellTable.setRowData(0, questionList);

        RootPanel.get().add(cellTable);

    }
}

同伴 css 文件：

.correct-answer {
    font-weight: bold;
    color: black;
}

.wrong-answer {
    font-weight: normal;
    color: red;
}

屏幕截图 1：应用程序启动后。答案栏是空的。

截图2：输入答案后。显然我答对了第一个，但第二个没答对。

GWT 细胞表。如何在 EditTextCell 中更改值后设置单元格 css 样式

GWT celltable. How to set cell css style after changing value in EditTextCell

gwt

gwt-celltable