【问题标题】:Customize selection column header of Vaadin Flow Grid component自定义 Vaadin Flow Grid 组件的选择列标题
【发布时间】:2019-11-12 10:29:32
【问题描述】:
是否可以调整 Vaadin Flow Grid 中(自动创建的)选择列的列标题?
My use case: The "select all" button/checkbox should be visible (although no in-memory data provider) and it should display a warning when all item count is above 100 when selecting all items.此外,视觉效果应指示未选择/部分/全部选择。
就我浏览文档/代码而言,我没有看到任何可能性。任何想法表示赞赏。我正在使用 Vaadin 14。
【问题讨论】:
标签:
java
vaadin
vaadin-grid
vaadin-flow
【解决方案1】:
这不是一个真实/完整的答案,这最初是作为 cmets 编写的。但我不想堵塞 cmets,所以我将它们移到了这个“答案”中。我描述了我认为需要的方法,但我不确定这是否是最好的方法。请对我的建议持保留态度。不要给我这个赏金。
看到没有 Java 端 API 来控制有关选择列标题的任何内容,我想唯一的方法是更改底层聚合物模板 @vaadin/vaadin-grid/src/vaadin-grid-selection-column.js,其中包含一个 JavaScript 方法 _onSelectAllChanged。我绝不是聚合物专家,也无法指导您完成该修改。但我认为应该有可能触发一个自定义事件,您可以在 java 端收听该事件,即显示通知。这可能不是最好的方法,这只是我最好的猜测。
上述聚合物模板还定义了是否应显示 selection-column-header - 您可以从 defaultHeaderTemplate 中的复选框中删除 hidden$="[[_selectAllHidden]]" 属性以始终显示标题复选框。
@KasparScherrer 通过更改 vaadin-grid-selection-column.js?无论如何,我想自定义复选框的行为。我希望在没有 js 的情况下能以某种方式做到这一点。
- 史蒂芬哈比奇
如果不更改 (js) 聚合物模板,我相信这是无法实现的。如果您可以访问它,您可能想在 Vaadins 专家聊天中询问这个问题,或者希望他们不时在这里回答。我最近使用我描述的方法成功地修改了 LoginOverlay 模板。但我对整个话题还是不太满意。
您必须复制 @vaadin/vaadin-grid 的所有模板文件,并且为了使用您自己的(修改过的)模板,您必须创建自己的 Grid 类的副本(不是扩展,所以它会不再在 node_modules 中查找模板)并放置您自己的 @JsModule。在_onSelectAllChanged 中触发CustomEvent 后,可以在java 中自定义复选框的行为。查看 @DomEvent 以监听 java-component 中的自定义事件。
【解决方案2】:
部分解决方法是通过以下代码启用选择列标题中的内置复选框:
var model = (AbstractGridMultiSelectionModel<?>) grid.getSelectionModel();
model.setSelectAllCheckboxVisibility(GridMultiSelectionModel.SelectAllCheckboxVisibility.VISIBLE);
默认情况下,当数据提供者不在内存中时,复选框是隐藏的,但此解决方法将再次显示它。