GWT CellTable 保持对选定行的关注答案

【问题标题】：GWT CellTable keep focus on selected rowGWT CellTable 保持对选定行的关注
【发布时间】：2013-03-03 07:41:13
【问题描述】：

当我在包含多列的 CellTable 中选择一行时，整行将变为黄色。它不取决于我点击的行的哪个区域（行的哪一列）。

只要没有选择此表的其他行，我就会尝试将所选行保持为黄色。目前，只要我在浏览器中单击其他位置，该行就会恢复其原始颜色。

我尝试使用选择模型，但这并没有改变。您有什么建议吗，或者这根本不可能，因为焦点是由浏览器管理的？ CellTable 的 Google 展示中的行为是相同的...

【问题讨论】：

标签： gwt focus celltable

【解决方案1】：

选择模型实际上做了您想做的事情：它将一行绘制为蓝色，并且如果您单击页面中的其他位置，该行不会改变颜色。（仅在选择另一排时）

有 2 种选择模型：一种只允许您选择一行，另一种允许您选择多行。

MultiSelectionModel<Row> selectionModel = new MultiSelectionModel<Row>();
table.setSelectionModel(selectionModel);

SingleSelectionModel<Row> selectionModel = new SingleSelectionModel<Row>();
table.setSelectionModel(selectionModel);

【讨论】：

【解决方案2】：

user905374 的解决方案确实有效。我在第一篇文章中提到，我已经用selectionModel 尝试了解决方案，但它不起作用。这是部分正确的。它确实有效，但前提是表不包含CheckboxCell。

遵循一个工作和不工作的例子。我认为这可能是一个错误，但我不确定我是否遗漏了什么。

    final CellTable<LicenceDto> licenseTable = new CellTable<LicenceDto>();
    final SingleSelectionModel<LicenceDto> selectionModel = new SingleSelectionModel<LicenceDto>();
    licenseTable.setSelectionModel(selectionModel);

    //--- If I add this column, the selection does work.
    Column<LicenceDto, String> workingColumn = new Column<LicenceDto, String>(new TextCell()) {

        @Override
        public String getValue(LicenceDto object) {
            return "Works";
        }
    };
    workingColumn.setFieldUpdater(new FieldUpdater<LicenceDto, String>() {

        @Override
        public void update(int index, LicenceDto object, String value) {
            ;
        }
    });
    licenseTable.addColumn(workingColumn);


    //--- If I add this column, the selection does NOT work anymore.
    Column<LicenceDto, Boolean> notWorkingColumn = new Column<LicenceDto, Boolean>(new CheckboxCell(true, true)) {

        @Override
        public Boolean getValue(LicenceDto object) {
            return object.getEnabled();
        }
    };
    notWorkingColumn.setFieldUpdater(new FieldUpdater<LicenceDto, Boolean>() {

        @Override
        public void update(int index, LicenceDto object, Boolean value) {
            presenter.enableLicense(object, value);
        }
    });
    licenseTable.addColumn(notWorkingColumn);

您甚至可以组合多个单元格并将它们添加到表格中（例如LinkActionCell 等）。只要没有CheckboxCell，带有SingleSelectionModel 的蓝色选项就可以发挥作用。有没有人看到我对这个CheckboxCell 做错了什么或者有错误？

更新

这只是我的一个使用错误。问题是我将handlesSelection 设置为true（CheckboxCell 构造函数的第二个参数），甚至认为我什么都不处理。将其设置为false 即可解决问题。

底线：使用选择模型（例如SingleSelectionModel）并且不要将CheckboxCell构造函数的true的true参数设置为true，如果您不自己处理选择。

【讨论】：

我在我的应用程序中检查了这一点，看来您是对的。 Checkbox 还有 Dropdown 阻碍行选择。我认为您应该将此作为一个单独的问题发布。
感谢您的肯定。我在link 下发布了一个新问题
我想在上面的 CheckboxCell“错误”上发布答案。这只是我的一个使用错误：问题是我设置了 handlesSelection = true （CheckboxCell 构造函数的第二个参数），即使我认为我什么都不处理。将其设置为 false 即可解决问题。

【解决方案3】：

您应该再次观看 Showcase 演示。这次使用最左边一列的复选框，即第一列。 On selection the row turns blue 表示进行了行选择。这是您设置 SelectionModel 的时候。在CellTable/DataGrid之外的任何地方点击页面selection is not changed。

现在，您无需通过复选框从第一列中选择行，而是单击任何其他列中的一行。该行变为黄色。点击页面任意位置以外的CellTable/DataGridfocus/yellow is lost。

“黄色”表示行处于焦点并正在编辑而不是选中。

注意 - 您可以通过使用每个单元格的点击事件来强制选择行。

【讨论】：

【解决方案4】：

试试这样的：

CellTable table;
YourDataObject object = new YourDataObject(...);
SingleSelectionModel<YourDataObject> selectionModel = 
                                     new SingleSelectionModel<YourDataObject>();
table.setSelectionModel(selectionModel);
...
table.setSelected(object, true);

如果您希望突出显示多行，请使用MultiSelectionModel。

【讨论】：

【解决方案5】：

存储选定行的索引。当用户选择行时，将行的样式更改为适合您的案例的“选定样式”（在您的 css 文件中定义）并从先前选择的行中删除选定的样式。也不要忘记更新所选行的索引。

如果您提供原始版本的一些代码，我很乐意帮助您提供一些代码。

【讨论】：