单选下拉组件

概述

选择下拉组件是日常项目研发中心经常使用到的功能，比如商品分类、支付类型、订单状态等等，传统的项目研发中，我们都是后台获取数据源传输给UI前台然后解析渲染，也有的是直接写入界面，显得不够灵活，比如我们想选择商品分类(这里假如只有一级)，我们会先查询数据然后绑定或者Vue前后端分离中调用API接口获取数据后渲染，如传统的开发模式不容，为了数据的灵活性、兼容性、可扩展性，我们这里自定义研发了选择下拉动态组件，想获取某个数据源，我们可以指定传入值，也可以动态获取某个数据表的值或者直接传入配置参数作为数据源来传入，简化了代码的同时又给程序增添了优化，提高了项目的可读性、高效性、可维护性，下面我们详细的介绍组件的形式与调用方式；

指定数据源

• 组件：<widget:singleSelect name="gender|0|性别|name|id" data="1=男,2=女,3=保密" value="0"/>

• 参数：name：gender|0|性别|name|id" data="1=男,2=女,3=保密

`gender`：组件名称，此字段对应数据表中的字段名称`gender`;
`0`：这里的参数有`0和1`的区分，0表示不必填，1表示必填；
`性别`：这个文字会在初始化组件是控件的默认提示语，会动态解析为`请选择性别`
`name`：这个参数表示当我们动态获取数据源时(数据源带有参数`name`),会默认读取动态数据源中参数为`name`的值(此处用不到)；
`id`：这个参数表示当我们动态获取数据源时(数据源带有参数`id`),会默认读取动态数据源中参数为`id`的值(此处用不到)；

• 组件使用

那么我们如何在表单中使用下拉选择的组件呢，如下：

<form class="layui-form model-form" action="">
    <div class="layui-inline">
        <div class="layui-input-inline">
            <!-- 下拉单选 -->
            <widget:singleSelect name="gender|0|性别|name|id" data="1=男,2=女,3=保密" value="0"/>
        </div>
    </div>
</form>

• 效果展示：

  

读取配置源

上面我们介绍了直接给组件指定数据源的方式来实现选择下拉的功能，同时组件也提供了动态传入数据源的模式。

• 组件：<widget:singleSelect name="gender|1|性别|name|id" th:data="${ADMIN_GENDER_LIST}" th:value="${info['gender']}?:3"/>

• 参数：name：gender|1|性别|name|id"

`gender`：组件名称，此字段对应数据表中的字段名称`gender`;
`1`：这里的参数有`0和1`的区分，0表示不必填，1表示必填；
`性别`：这个文字会在初始化组件是控件的默认提示语，会动态解析为`请选择性别`
`name`：这个参数表示当我们动态获取数据源时(数据源带有参数`name`),会默认读取动态数据源中参数为`name`的值；
`id`：这个参数表示当我们动态获取数据源时(数据源带有参数`id`),会默认读取动态数据源中参数为`id`的值；

• 数据源：

/**
 * 性别
 */
public static Map<Integer, String> ADMIN_GENDER_LIST = new HashMap<Integer, String>() {
    {
        put(1, "男");
        put(2, "女");
        put(3, "保密");
    }
};

• 组件使用

那么我们如何在表单中使用下拉选择的组件呢，如下：

<form class="layui-form model-form" action="">
    <div class="layui-inline">
        <div class="layui-input-inline">
            <!-- 下拉单选 -->
            <widget:singleSelect name="gender|1|性别|name|id" th:data="${ADMIN_GENDER_LIST}" th:value="${info['gender']}?:3"/>
        </div>
    </div>
</form>

备注：动态绑定数据源时需要注意的是参数data需要改成th:data,这个是Thymeleaf模板引擎的也行，如有不太了解的朋友请自行补课《Thymeleaf官网》 (opens new window);

• 效果展示：

  

读取SQL获取

另外框架也提供了另外一种给组件提供数据源的方式，在很多场景中我们都是直接取的某张数据表中的数据列表作为下拉数据源来使用的，而且这是个非常普通的场景，避免了传统我们先后端查询再绑定前端渲染的弊端，这里我们单独集成了直接读取表数据的模式。

• 组件：<widget:singleSelect name="brandId|1|商品品牌|brand_name|id" sql="SELECT id,brand_name FROM pms_brand WHERE mark=1 ORDER BY sort ASC;" th:value="${info['brandId']}?:0"/>

• 参数：name：brandId|1|品牌|brand_name|id

`brandId`：组件名称，此字段对应实体对象中的字段名称`brandId`;
`1`：这里的参数有`0和1`的区分，0表示不必填，1表示必填；
`商品品牌`：这个文字会在初始化组件是控件的默认提示语，会动态解析为`请选择商品品牌`
`brand_name`：这个参数表示当我们动态获取数据源时(数据源带有参数`brand_name`),会默认读取动态数据源中参数为`brand_name`的值；
`id`：这个参数表示当我们动态获取数据源时(数据源带有参数`id`),会默认读取动态数据源中参数为`id`的值；

• SQL查询数据源形式如下：

编号(id)	名称(brand_name)
1	美特斯邦威
2	阿仕顿
3	海澜之家

• 组件使用

那么我们如何在表单中使用下拉选择的组件呢，如下：

<form class="layui-form model-form" action="">
    <div class="layui-inline">
        <label class="layui-form-label">商品品牌：</label>
        <div class="layui-input-inline">
            <widget:singleSelect name="brandId|1|商品品牌|brand_name|id" sql="SELECT id,brand_name FROM pms_brand WHERE mark=1 ORDER BY sort ASC;" th:value="${info['brandId']}?:0"/>
        </div>
    </div>
</form>

• 效果展示：