列表页

Serene 为 Northwind 数据库生成了列表页和编辑数据的UI。下图是 Northwind 模块的产品页面。

这里我们看到以产品名称排序的产品列表（默认排序）。

表格组件用的是 SlickGrid，主题已修改。 https://github.com/mleibman/SlickGrid

你可以通过点击表格头对数据进行排序。点击同一个表头两次可以倒序排列。

可以通过 Shift + 单击多个表头进行多字段排序。

下图同时使用 Category 和 Supplier 两个字段进行排序。

当你修改排序时表格会使用AJAX请求从服务器上获取数据。

当你第一次打开页面时，表格会通过 AJAX 请求从服务器上获取数据。

在表格的左上角，你可以输入一些文字进行简单的搜索。

例如输入 coffee 查找名称中包含 coffee 的产品。

这里搜索的是产品名称字段。也可以使用其他字段或者多个字段进行快速搜索。在后续章节我们会看到怎么做。

在表格的右上角有快速过滤 Supplier 和 Category 字段的下拉选择框。

所有排序、分页和过滤都是在服务器端通过 Serenity框架的服务处理器动态构造 SQL 查询完成的。

还可以通过点击表格右下角的 edit filter 连接来过滤任何字段。

这里你可以通过点击 add criteria 为任意字段添加条件，然后选择字段名，接下来选择比较方式，最后设置一个值。

有些值编辑器是简单的文本输入框，有些可能是下拉框或其他自定义的编辑器，这取决于字段的类型。

通过点击 and 可以把 and 改成 or 。

还可以通过点击圆括号将条件分组。与其他常规的行相比，分组之间会有更多的空格。