JavaWeb混编版

# 多选下拉组件

# 概述

上一章节《单选下拉组件》中我们详细的介绍单选下拉组件的几种实现方式，本章节我们将进行扩展延伸，给大家介绍下多选下拉组件，在很多场景中我们都会使用到多选的情况，当然多选功能的实现多种多样，比如下面有一篇章节我们会开辟专门一个栏目进行《复选框组件》的介绍，这里我们不做过多的解读，言归正传，我们给大家剖析一下下拉多选组件，下面我们会重点给大家介绍下拉多选组件的形式、参数说明以及调用方式；

# 指定数据源

  • 组件：<widget:xmSelect name="productTags|1|商品标签|name|id" data="1=今日新品,2=今日推荐" th:value="${info['productTags']}"/>

  • 参数：name：productTags|1|商品标签|name|id

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

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

<form class="layui-form model-form" action="">
    <div class="layui-inline">
        <label class="layui-form-label">商品标签：</label>
        <div class="layui-input-inline">
            <widget:xmSelect name="productTags|1|商品标签|name|id" data="1=今日新品,2=今日推荐" th:value="${info['productTags']}"/>
        </div>
    </div>
</form>
1
2
3
4
5
6
7
8
  • 效果展示：

    mixureSecure

# 读取配置源

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

  • 组件：<widget:xmSelect name="productTags|1|商品标签|name|id" th:data="${PRODUCT_TAGS_LIST}" th:value="${info['productTags']}"/>

  • 参数：name：productTags|1|商品标签|name|id

`productTags`：组件标识名称，此字段对应实体对象中的字段名称`productTags`;
`1`：这里的参数有`0和1`的区分，0表示不必填，1表示必填；
`商品标签`：这个文字会在初始化组件是控件的默认提示语，会动态解析为`请选择商品标签`
`name`：这个参数表示当我们动态获取数据源时(数据源带有参数`name`),会默认读取动态数据源中参数为`name`的值(此处用不到)；
`id`：这个参数表示当我们动态获取数据源时(数据源带有参数`id`),会默认读取动态数据源中参数为`id`的值(此处用不到)；
1
2
3
4
5
  • 数据源：
/**
 * 商品标签
 */
public static Map<Integer, String> PRODUCT_TAGS_LIST = new HashMap<Integer, String>() {
    {
        put(1, "今日新品");
        put(2, "今日推荐");
    }
};
1
2
3
4
5
6
7
8
9
  • 组件使用

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

<form class="layui-form model-form" action="">
    <div class="layui-inline">
        <label class="layui-form-label">商品标签：</label>
        <div class="layui-input-inline">
            <widget:xmSelect name="productTags|1|商品标签|name|id" th:data="${PRODUCT_TAGS_LIST}" th:value="${info['productTags']}"/>
        </div>
    </div>
</form>
1
2
3
4
5
6
7
8

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

  • 效果展示：

    mixureSecure

# 读取SQL获取

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

  • 组件：<widget:xmSelect name="productTags|1|商品标签|name|id" sql="SELECT id,nameFROM pms_product_tags WHEREstatus=1 AND mark=1 ORDER BY sort ASC;" th:value="${info['productTags']}"/>

  • 参数：name：productTags|1|商品标签|name|id

`productTags`：组件名称，此字段对应实体对象中的字段名称`productTags`;
`1`：这里的参数有`0和1`的区分，0表示不必填，1表示必填；
`商品标签`：这个文字会在初始化组件是控件的默认提示语，会动态解析为`请选择商品标签`
`name`：这个参数表示当我们动态获取数据源时(数据源带有参数`name`),会默认读取动态数据源中参数为`name`的值；
`id`：这个参数表示当我们动态获取数据源时(数据源带有参数`id`),会默认读取动态数据源中参数为`id`的值；
1
2
3
4
5
  • SQL查询数据源形式如下：
编号(id) 名称(name)
1 今日新品
2 今日推荐
  • 组件使用

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

<form class="layui-form model-form" action="">
    <div class="layui-inline">
        <label class="layui-form-label">商品标签：</label>
        <div class="layui-input-inline">
            <widget:xmSelect name="productTags|1|商品标签|name|id" sql="SELECT id,`name` FROM pms_product_tags WHERE `status`=1 AND mark=1 ORDER BY sort ASC;" th:value="${info['productTags']}"/>
        </div>
    </div>
</form>
1
2
3
4
5
6
7
8
  • 效果展示：

    mixureSecure

# 下拉多选分组

在下拉多选模式中，上传我们阐述了普通的列表展示的形式，这种数据源的展示方式只适合同一级数据源的展示，如果数据源本身就是二级或者多级时，上述的展示形式就不太实用了，不然一二级的数据全部堆砌在一起，识别起来非常的吃力，而且用户的使用体验也特别的差，当前多层级数据源的下拉展示形式多种多样，后面有一个章节《下拉树组件》会重点详细的介绍多层级数据源的下拉呈现形式，这里我们不做太细的解读，我们重点来说下本章节中二级数据源如何进行分组展示同时又可以多选，即：分组下拉多选组件的实现与使用；

  • 组件：<widget:xmSelect name="productTags|1|菜单选择|name|id|pid" sql="SELECT id,name,pid FROM sys_menu WHERE type<=2 ANDstatus=1 AND mark=1 ORDER BY sort ASC;" th:value="${info['productTags']}"/>

  • 参数：name：productTags|1|菜单选择|name|id

`productTags`：组件名称，此字段对应实体对象中的字段名称`productTags`;
`1`：这里的参数有`0和1`的区分，0表示不必填，1表示必填；
`菜单选择`：这个文字会在初始化组件是控件的默认提示语，会动态解析为`请选择菜单选择`
`name`：这个参数表示当我们动态获取数据源时(数据源带有参数`name`),会默认读取动态数据源中参数为`name`的值；
`id`：这个参数表示当我们动态获取数据源时(数据源带有参数`id`),会默认读取动态数据源中参数为`id`的值；
`pid`：这个参数表示当我们动态获取数据源时(数据源带有参数`pid`),会默认读取动态数据源中参数为`pid`的值；
1
2
3
4
5
6
  • SQL查询数据源形式如下：
编号(id) 名称(name) 上级ID(pid)
2 权限管理 1
201 物流中心 111
168 订单管理 110
161 店铺管理 142
143 商品管理 109
1 系统管理 0
136 会员管理 112
142 店铺管理 0
37 站点管理 1
109 商品管理 0
38 广告管理 1
110 订单管理 0
111 物流管理 0
39 布局管理 1
112 用户中心 0
73 配置管理 1
85 字典管理 1
219 消息管理 1
97 应用中心 1
155 系统工具 1
  • 组件使用

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

<form class="layui-form model-form" action="">
    <div class="layui-inline">
        <label class="layui-form-label">商品标签：</label>
        <div class="layui-input-inline">
            <widget:xmSelect name="productTags|1|菜单选择|name|id|pid" sql="SELECT id,`name`,pid FROM sys_menu WHERE type<=2 AND `status`=1 AND mark=1 ORDER BY sort ASC;" th:value="${info['productTags']}"/>
        </div>
    </div>
</form>
1
2
3
4
5
6
7
8
  • 效果展示：

    mixureSecure

← 日期组件 →