动态样式 25.00

在 ChatGPT 中打开

在 webforJ 25 及更高版本中，可以使用自定义部分名称对表中的单独行和单元格进行样式设置。这些名称可以根据您的应用逻辑动态分配，从而让您对表的外观进行精细控制。

行样式

setRowPartProvider() 方法根据所包含的数据项为整行分配部分名称。这使您可以突出显示满足特定条件的完整行，例如为偶数行交替设置背景颜色。

这些样式名称可以在您的 CSS 中使用 ::part() 选择器进行定位。

阴影部分

::part() 选择器是一个特殊的 CSS 特性，可以让您对组件的阴影 DOM 内部的元素进行样式设置，只要这些元素暴露 part 属性。这对于样式设置 webforJ 组件的内部部分（如表中的行或单元格）特别有用。

有关阴影部分的工作原理以及如何定义和定位它们，请参见 Styling 部分。

显示代码

TableRowStylingView.java

table-row-styling-view.css

单元格样式

setCellPartProvider() 方法根据数据项和它们所属的列来样式化单个单元格。这使其非常适合突出特定值，例如标出低于某一阈值的年龄或无效条目。

像行部分一样，单元格部分由名称定义，并使用 ::part() 选择器进行定位。

显示代码

TableColumnPinningView.java

table-cell-styling-view.css

响应数据更新

如果您的应用程序以编程方式修改数据，例如更新用户的年龄，则在更新项在存储库中提交后，表将自动重新评估并重新应用任何相关的行或单元格样式。

在此演示中，年龄列中的单元格的样式基于阈值：超过 30 岁的年龄显示为绿色，而 30 岁及以下的年龄显示为红色。点击按钮在 28 和 31 之间切换 Alice 的年龄，当数据提交时，会触发 setCellPartProvider 重新应用适当的样式。

显示代码

TableDynamicStylingView.java

table-dynamic-styling-view.css

斑马条纹行

启用行的交替背景颜色以提高可读性：

// 应用斑马条纹行样式
table.setStriped(true);

边框

配置 Table、列和行周围显示的边框：

// 启用所有边框
table.setBordersVisible(EnumSet.of(Table.Border.AROUND, Table.Border.COLUMNS, Table.Border.ROWS));

// 移除所有边框
table.setBordersVisible(EnumSet.noneOf(Table.Border.class));

下面的演示展示了一种简单的方法，用于使用 setStriped() 和 setBordersVisible() 将您的 Table 的视觉外观与应用的其余部分对齐。

显示代码

TableLayoutStylingView.java

管理和查询数据

有关如何使用 Repository 模式来管理和查询集合的信息，请参见 Repository articles。