SQLPage中如何为下拉菜单设置默认值并排序选项

在Web开发中，表单下拉菜单(select)是一个常见且实用的组件。SQLPage作为一个通过SQL直接生成网页的工具，提供了便捷的方式来实现这一功能。本文将详细介绍如何在SQLPage中创建下拉菜单，并实现默认值设置和选项排序这两个关键功能。

下拉菜单的基本实现

在SQLPage中，我们可以通过form组件轻松创建下拉菜单。基本语法是使用SELECT语句返回特定格式的数据，其中type字段设置为'select'，并通过options字段提供选项列表。

SELECT
    'Timezone' AS label,
    'timezone' AS name,
    'select' AS type,
    json_agg(json_build_object('label', name, 'value', name)) AS options
FROM timezone;

设置默认选中项

在实际应用中，我们经常需要为下拉菜单设置默认选中的值。SQLPage提供了两种方式来实现这一需求：

1. 使用selected属性：这是推荐的方式，可以直接在options数组中为特定选项标记为选中状态。

SELECT
    json_agg(json_build_object(
        'label', name,
        'value', name,
        'selected', name = 'Europe/Paris'  -- 当name等于'Europe/Paris'时设置为选中
    )) AS options
FROM timezone;

2. 使用placeholder属性：虽然placeholder通常用于显示提示文本，但在某些情况下也可以用来指定默认值。

选项排序控制

对于下拉菜单的选项排序，SQLPage支持两种排序方式：

1. 在json_agg函数内排序：这是最直接的方式，可以在聚合函数内部指定排序规则。

SELECT
    json_agg(
        json_build_object('label', name, 'value', name)
        ORDER BY name  -- 按名称字母顺序排序
    ) AS options
FROM timezone;

2. 通过子查询预先排序：对于更复杂的排序逻辑，可以先在子查询中完成排序。

SELECT
    json_agg(json_build_object('label', name, 'value', name)) AS options
FROM (
    SELECT name 
    FROM timezone
    ORDER BY 
        CASE WHEN name = 'Europe/Paris' THEN 0 ELSE 1 END,  -- 巴黎优先
        name  -- 然后按名称排序
) AS sorted_timezones;

高级排序技巧

当我们需要将特定选项(如默认值)置顶时，可以使用条件排序：

SELECT
    json_agg(
        json_build_object('label', name, 'value', name)
        ORDER BY 
            name != 'Europe/Paris',  -- 巴黎排在最前
            name  -- 其他按字母顺序
    ) AS options
FROM timezone;

这种排序方式首先会将不符合条件的记录(即name不是'Europe/Paris'的记录)排在后面，然后再按名称字母顺序排序。

完整示例

结合上述技巧，一个完整的带默认值和自定义排序的下拉菜单实现如下：

SELECT
    'Timezone' AS label,
    'timezone' AS name,
    'select' AS type,
    '请选择时区' AS description,
    TRUE AS required,
    json_agg(
        json_build_object(
            'label', name,
            'value', name,
            'selected', name = 'Europe/Paris'
        )
        ORDER BY name != 'Europe/Paris', name
    ) AS options
FROM timezone;

这个查询会创建一个必填的时区选择下拉菜单，其中'Europe/Paris'作为默认选中项，并显示在列表顶部，其余选项按字母顺序排列。

通过SQLPage的这些功能，开发者可以轻松实现复杂的表单交互，而无需编写前端代码，大大提高了开发效率。