Question

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

我已尝试在匿名getCellStyleNames中覆盖new Column() {}，但这项工作在启动时，基于模型值，但在用户更改该单元格的值后会起作用吗？

请帮忙。

Answer 1

你非常接近。

在新列（）{}中覆盖getCellStyleNames是解决方案的前半部分。

下半场：

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);
            }
});

希望这会有所帮助！

以下代码是一个琐事，但完整的例子。

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

琐事GWT app的源代码：

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);

    }
}

Companion css文件：

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

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

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

屏幕截图2：我输入答案后。显然我正确地回答了第一个，但没有回答第二个。

Answer 2

在setCellStyleNames方法中使用render：

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 3

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

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

你必须返回{css class string name。

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

3 个答案: