Table 用来显示一个二维表,Table算是Vaadin提供的功能最强大的组件,每个单元格既可以显示字符串也可以显示其它的UI组件。你可以实现可编辑的表格,比如点击某个单元格后将其变为可编辑的文本框。
Table关联的数据采用Vaadin 的Container数据模型。从而使得Table可以直接绑定数据库的表或查询。Table只载入当前需要显示的数据,当数据载入时,Table会给出提示正在显示的数据表的范围和全部记录的数目。
Table中每行数据对应Vaadin数据模型的Item接口 ,每个字段对应到Property接口,每行数据由Item标识符(IID)唯一指定,而字段由Property标识符(PID)指定。
创建一个Table,首先使用addContainerProperty 定义表的字段。这个方法有两种调用方式。简单方式是使用Property ID 做为字段的标题。而复杂方式可以分别制定Property ID和字段的标题,这种方式使得应用本地化成为可能。
复杂方式也支持使用图标资源显示字段标题。在定义表的字段时,可以提供一个“缺省值”用在该字段没有赋值的情况下。Table基本用法如下:
// Create the table with a caption.
Table table = new Table("This is my Table");
// Define the names and data types of columns.
// The "default value" parameter is meaningless here.
table.addContainerProperty("First Name", String.class, null);
table.addContainerProperty("Last Name", String.class, null);
table.addContainerProperty("Year", Integer.class, null);
// Add a few items in the table.
table.addItem(new Object[] {
"Nicolaus","Copernicus",new Integer(1473)}, new Integer(1));
table.addItem(new Object[] {
"Tycho", "Brahe", new Integer(1546)}, new Integer(2));
table.addItem(new Object[] {
"Giordano","Bruno", new Integer(1548)}, new Integer(3));
table.addItem(new Object[] {
"Galileo", "Galilei", new Integer(1564)}, new Integer(4));
table.addItem(new Object[] {
"Johannes","Kepler", new Integer(1571)}, new Integer(5));
table.addItem(new Object[] {
"Isaac", "Newton", new Integer(1643)}, new Integer(6));
在这个例子中,使用了整数值作为Item的IID,作为第二个参数传给addItem, 每行实际的数据为一个Object数组,采用和表字段定义同样的顺序,并且必须采用和由addContainerProperty定义的同样的数据类型。
Table 支持的数据规模取决于Container的实现,缺省的Container在更新数据时可能会由于数据规模过大而造成问题。因此推荐使用优化过的Container类型。Table本身不限制记录的数目,但当前滚动实现有一个50万条记录的限制。
选择Table中的项 ,Table允许用户选择表格中的某个或多个数据项,当用户选取某个Item时,Item的IID会作为ValueChangeEvent 的Property传入。要使Table支持选取,必须通过方法setSelectable 将Table设为支持选取。同时需将setImmediate 设为True。
例如:
// Allow selecting items from the table.
table.setSelectable(true);
// Send changes in selection immediately to server.
table.setImmediate(true);
// Shows feedback from selection.
final Label current = new Label("Selected: -");
// Handle selection change.
table.addListener(new Property.ValueChangeListener() {
public void valueChange(ValueChangeEvent event) {
current.setValue("Selected: " + table.getValue());
}
});
通常用户再次点击已选取的数据行时会取消该行的选取,如果你想修改这种行为,可以将setNullSelectionAllowed 设为False.
如果需要Table支持多行选取,可以将setMultiSelect 设为True, 此时可以通过按下Ctrl/Shift来实现多选。
Table缺省支持滚动条,当所显示记录数大于Table可见行数时在Table右边显示滚动条。可以通过setPageLength 修改Table可以区域。将PageLength设为0,取消分页,显示所有记录数。
表个字段宽度可以通过setColumnWidth 来修改,用户也可以通过拖动字段边界更改字段宽度,并会触发ColumnResizeEvent 事件。
如果设置setColumnReorderingAllowed(true) ,则允许用户重新排列字段的顺序。
setColumnCollapsingAllowed (true) 允许用户展开或隐藏某些字段。
以上Table单元格中都显示的是简单的字符串,Table单元格也可以显示UI组件。此时如果Table缺省风格的行高不够的话,你需要使用自定义的风格定义合适的行高。
如果需要响应Table单元格中某个UI组件的事件,需要知道其对应的Item标识IID。简单的方法是使用setData 方法将某个对象附加到该UI组件上。
如下例使用了Label,TextField, CheckBox, Button 作为Table单元格元素显示。
// Create a table and add a style to allow setting the row height in theme.
final Table table = new Table();
table.addStyleName("components-inside");
//Define the names and data types of columns.
// The "default value" parameter is meaningless here.
table.addContainerProperty("Sum", Label.class, null);
table.addContainerProperty("Is Transferred", CheckBox.class, null);
table.addContainerProperty("Comments", TextField.class, null);
table.addContainerProperty("Details", Button.class, null);
// Add a few items in the table.
for (int i=0; i<100; i++) {
// Create the fields for the current table row
Label sumField = new Label(String.format(
"Sum is <b>$%04.2f</b><br/><i>(VAT incl.)</i>",
new Object[] {new Double(Math.random()*1000)}),
Label.CONTENT_XHTML);
CheckBox transferredField = new CheckBox("is transferred");
// Multiline text field. This required modifying the
// height of the table row.
TextField commentsField = new TextField();
commentsField.setRows(3);
// The Table item identifier for the row.
Integer itemId = new Integer(i);
// Create a button and handle its click. A Button does not
// know the item it is contained in, so we have to store the
// item ID as user-defined data.
Button detailsField = new Button("show details");
detailsField.setData(itemId);
detailsField.addListener(new Button.ClickListener() {
public void buttonClick(ClickEvent event) {
// Get the item identifier from the user-defined data.
Integer itemId = (Integer)event.getButton().getData();
getWindow().showNotification("Link "+
itemId.intValue()+" clicked.");
}
});
detailsField.addStyleName("link");
// Create the table row.
table.addItem(new Object[] {sumField, transferredField,
commentsField, detailsField},
itemId);
}
// Show just three rows because they are so high.
table.setPageLength(3);
通常情况下Table以文本形式显示单元格,如果想让Table支持编辑功能,一是使用上面UI组件的方式,或者简单的调用setEditable(true)自动将表格变为可编辑。
setColumnHeader 为表格定义表头,setColumnFooter 定义表尾。Table的表头和表尾也接受点击事件。
下例显示了一个自定义的表尾显示平均值。
// Have a table with a numeric column
Table table = new Table("Custom Table Footer");
table.addContainerProperty("Name", String.class, null);
table.addContainerProperty("Died At Age", Integer.class, null);
// Insert some data
Object people[][] = {{"Galileo", 77},
{"Monnier", 83},
{"Vaisala", 79},
{"Oterma", 86}};
for (int i=0; i<people.length; i++)
table.addItem(people[i], new Integer(i));
// Calculate the average of the numeric column
double avgAge = 0;
for (int i=0; i<people.length; i++)
avgAge += (Integer) people[i][1];
avgAge /= people.length;
// Set the footers
table.setFooterVisible(true);
table.setColumnFooter("Name", "Average");
table.setColumnFooter("Died At Age", String.valueOf(avgAge));
// Adjust the table height a bit
table.setPageLength(table.size());
以上介绍了Table的基本用法,表格的用法远不止这些,比如可以通过ColumnGenerator 通过计算从其它字段生成某个字段或者希望格式化字段等等这里就不在一一介绍,具体可以参考Vaadin开发文档。
分享到:
相关推荐
赠送jar包:android-json-0.0.20131108.vaadin1.jar; 赠送原API文档:android-json-0.0.20131108.vaadin1-javadoc.jar; 赠送源代码:android-json-0.0.20131108.vaadin1-sources.jar; 赠送Maven依赖信息文件:...
org.vaadin.addons.dcharts-widget-0.10.0-dcharts-widget-0.10.0.jar
是一个Web组件,提供应用程序菜单功能,是一部分。 < vaadin> </ vaadin> 安装 安装vaadin-menu-bar : npm i @vaadin/vaadin-menu-bar --save 安装后,将其导入您的应用程序: import '@vaadin/vaadin-menu-...
赠送jar包:android-json-0.0.20131108.vaadin1.jar; 赠送原API文档:android-json-0.0.20131108.vaadin1-javadoc.jar; 赠送源代码:android-json-0.0.20131108.vaadin1-sources.jar; 赠送Maven依赖信息文件:...
vaadin-edit-table-example 使用 commons-vaadin 库类 EditableTableDecorator 的 VAADIN 可编辑表示例。 这个助手类在 commons-vaadin 1.0.17 或更高版本中可用。 下载 通过 Maven 抓取: < groupId>topgroup....
Vaadin来自北欧的__Web__应用开发利器
| < vaadin> </ vaadin>安装安装vaadin-date-time-picker : npm i @vaadin/vaadin-date-time-picker --save 安装后,将其导入您的应用程序: import '@vaadin/vaadin-date-time-picker/vaadin-date-time-picker.js...
Vaadin的UI组件CSS样式规则,Vaadin的UI组件CSS样式规则
< vaadin> </ vaadin>安装安装vaadin-rich-text-editor : npm i @vaadin/vaadin-rich-text-editor --save 安装后,将其导入您的应用程序: import '@vaadin/vaadin-rich-text-editor/vaadin-rich-text-editor.js' ...
cd vaadin-microservices-demo mvn package 运行演示 使用多个(七个)终端执行以下步骤: 1)启动discovery-server应用程序(Eureka应用程序): cd vaadin-microservices-demo/discovery-server java -jar ...
vaadin-list-mixin vaadin-list-mixin是nav元素的混合,有助于导航和选择childNodes。 在浏览器中运行测试 分叉vaadin-list-mixin存储库并在本地克隆。 确保已安装和 。 在vaadin-list-mixin目录中时,运行npm ...
<vaadin> | 是一个Web组件,为item元素( 一部分)提供了一个容器。 < vaadin> Simple Item </ vaadin> ... import '@vaadin/vaadin-item/vaadin-item.js' ; 入门 Vaadin组件默认使用Lumo主题。 要使用M
使用Web组件,redux和lit-html构建Web应用程序该存储库托管“事件”应用程序,该应用程序是在研讨会的期间开发的。 Web标准的新手? 结帐: : Web组件的新手? 结帐: : 从未构建过应用程序? 结帐: : 迁移到...
import '@vaadin/vaadin-crud/vaadin-crud.js' ; 入门 Vaadin组件默认使用Lumo主题。 要使用Material主题,请从theme/material文件夹导入对应的文件。 入口点 具有Lumo主题的组件: theme/lumo/vaadin-crud.js ...
vaadin-material-styles是可自定义主题。 在浏览器中运行演示和测试 分叉vaadin-material-styles存储库并在本地克隆。 确保已安装和 。 在vaadin-material-styles目录中时,运行npm install ,然后运行bower ...
是用于业务Web应用程序的不断发展的高质量Web组件集。 安装 从npm安装所需的组件: npm install @vaadin/vaadin-grid 用法 导入组件JavaScript模块,在HTML中使用该组件,然后使用JavaScript对其进行控制: <!...
<vaadin> | 包含两个组件: <vaadin>是Web组件,可提供无痛的登录体验,是一部分。 组件在覆盖内显示<vaadin>。 < vaadin> </ vaadin> <vaadin>... < vaadin> </ vaadin>安装安装vaadin-login : npm i @vaadin/vaadin-
vaadin-charts元素的演示应用程序 设置 先决条件 首先,使用安装 (我们假设您已经预安装了 )。 npm install -g polymer-cli 安装依赖项 bower install 启动开发服务器 此命令在http://localhost:8080为应用...
通过这款插件,你可以利用标准WP条件标签来决定是否在某个页面显示你的widgets。
Vaadin 是一种 Java Web 应用程序的开发框架, 其设计目标是便利地创建和维护高质量的 Web UI 应用程序. Vaadin 支持两种不同的开发模式: 服务器端开发和客户端开发. 服务器端开发方式是 这二者中更为强大的一种. 它...