formSelects-v4.js 基于Layui的多选解决方案
1、闲谈杂趣
v3传送门 v3文档
其实思考了很久, 还是放弃了v3, 因为开发v3的时候很粗暴, 按照编程角度来看就是硬撸, 也怪自己实力有限, 所以反思了一下, 尝试着继续前行...
2、交流学习
QQ号: 707200833 QQ群: 769620939
重要的事情说三遍, 看文档, 看文档, 看文档, 文档中很多都已经标注了, 文档不清楚的话, 可以加群@群主
群主会在第一时间把代码更新至GitHub, 你可以前往GitHub下载formSelects完整代码, 以便于二次开发
3、下载与使用
下载地址: GitHub
使用文档: GitHub Pages
使用方式:
|
一个简单的小例子
4、基本参数
属性名 | 说明 | 示例 |
---|---|---|
xm-select | 多选核心, 标记不同的多选, 多选ID | xm-select="id" |
xm-select-max | 多选最多选择数量 | xm-select-max="3" |
xm-select-skin | 皮肤 | xm-select-skin=" default | primary | normal | warm | danger " |
xm-select-search | 本地搜索 & 远程搜索 | xm-select-search, xm-select-search="/search", 值为空时已有条目过滤搜索, 有值时开启远程搜索 |
xm-select-create | 条目不存在时创建, 标记性属性 | xm-select-create |
xm-select-direction | 下拉方向 | xm-select-direction="auto|up|down", 自动, 上, 下, 默认自动模式 |
xm-select-radio | 单选模式 | xm-select-radio, 最多只能选择一个 |
xm-select-search-type | 搜索框的显示位置 | xm-select-search-type="title" 在下拉选title部分显示, xm-select-search-type="dl" 在选项的第二条显示 |
xm-select-show-count | 多选显示的label数量 | xm-select-show-count="2", 超出后隐藏 |
5、基本方法
value
|
on
|
maxTips
|
filter
|
config
|
render
|
disabled
|
undisabled
|
data
|
btns
|
search
|
opened
|
closed
|
6、基础示例
基础多选
适用性较广的基础多选,用 Tag 展示已选项
北京 上海 广州 深圳 天津
上海深圳
查看代码
pane模式
layui pane模式
多选框 北京 上海 广州 深圳 天津
上海深圳
查看代码
分组多选
基于layui的分组多选
北京 上海 广州 深圳 天津
上海深圳
查看代码
自定义tips
写一个空的option放在第一个
啦啦, 我是自定义的 北京 上海 广州 深圳 天津
上海深圳
查看代码
多选上限
xm-select-max="3", 超过3个后, 默认闪烁红框提示
啦啦, 我是自定义的 北京 上海 广州 深圳 天津
上海深圳
查看代码
当然, 如果你初始化值就多于max值, 那是可以设置成功滴, 取消了就选不回来了
啦啦, 我是自定义的 北京 上海 广州 深圳 天津
北京上海广州深圳
查看代码
多选皮肤
xm-select-skin="default"
北京 上海 广州 深圳 天津
上海深圳
查看代码
xm-select-skin="primary", 这个墨绿style已经被内置成为了经典皮肤, 只因他诞生于layui的经典颜色
北京 上海 广州 深圳 天津
上海深圳
查看代码
xm-select-skin="normal"
北京 上海 广州 深圳 天津
上海深圳
查看代码
xm-select-skin="warm"
北京 上海 广州 深圳 天津
上海深圳
查看代码
xm-select-skin="danger"
北京 上海 广州 深圳 天津
上海深圳
查看代码
本地搜索
xm-select-search, 搜索已存在的option
北京 上海 广州 深圳 天津
上海深圳
查看代码
分组中的搜索
北京 上海 广州 深圳 天津
上海深圳
查看代码
远程搜索
xm-select-search="/search", 指定一个url, 将开启远程搜索模式
北京 上海 广州 深圳 天津
上海深圳临沂市邢台市天津市
查看代码
远程搜索response结构, 其中name, value可以自定义, 请查看method config
code为0时, 表示正常, 不为0时则提示msg信息
|
当然, 远程搜索也是可以分组的
北京 上海 广州 深圳 天津
上海深圳
查看代码
|
创建条目
xm-select-create, 不存在时会创建, 选中后长久保留, value为Date.now()生成
北京 上海 广州 深圳 天津
上海深圳
查看代码
下拉方向
方式一: xm-select-direction="auto|up|down", 自动, 上, 下, 默认自动模式
方式二: 使用formSelects.config配置
|
我是朝上的
北京 上海 广州 深圳 天津
上海深圳
查看代码
我是朝下的
北京 上海 广州 深圳 天津
上海深圳
查看代码
其他的都是自动处理的哈, 当然没有朝左朝右的
我是一个动态的
北京 上海 广州 深圳 天津
上海深圳
点我朝上 点我朝下
固定高度
xm-select-height="36px", 多选的高度是随便选项的变化而变化的, 当然你也可以固定一个高度, 从此高度将不再变化
北京 上海 广州 深圳 天津 杭州
北京上海广州深圳天津杭州
查看代码
禁用select
disabled="disabled", 多选的高度是随便选项的变化而变化的, 当然你也可以固定一个高度, 从此高度将不再变化
北京 上海 广州 深圳 天津 杭州
广州深圳天津杭州
查看代码
动态操作select的启用与禁用
北京 上海 广州 深圳 天津 杭州
广州深圳天津杭州
查看代码 点我启用 点我禁用 全部启用 全部禁用
单选模式
xm-select-radio, 单选模式
北京 上海 广州 深圳 天津 杭州
杭州
查看代码
表单操作
支持layui原生表单验证, lay-verify="xxx"
选择3项以上通过验证 北京 上海 广州 深圳 天津 杭州
验证提交 隐藏代码
|
tips模式, lay-verify="required", lay-verType="tips"
选择3项以上通过验证 北京 上海 广州 深圳 天津 杭州
验证提交 隐藏代码
|
支持表单提交自动赋值, 只需要在select加上name属性即可, 点击提交可查看url的变化
北京 上海 广州 深圳 天津 杭州
北京上海
提交表单 查看代码
支持reset操作, 选择几项数据, 然后点击重置
默认提示 北京 上海 广州 深圳 天津 杭州
北京
重置表单 查看代码
多选联动
多选联动, 联动需要使用data来赋值, 先给一个空select标记多选, 记得value不能重复哦
请选择, 此处是联动多选
查看代码
多选联动, 使用远程数据实现省市区三级联动
宽度是可以自定义的, linkageWidth: 130, 默认100
请选择, 此处是联动多选
查看代码
快捷操作
设置内置的快捷操作
北京 上海 广州 深圳 天津 杭州
广州深圳天津杭州
查看代码
自定义快捷操作
北京 上海 广州 深圳 天津 杭州
广州深圳天津杭州
查看代码
你是可以换数组位置, 更换显示位置滴
如果内置操作不满意, 完全可以自定义
北京 上海 广州 深圳 天津 杭州
广州深圳天津杭州
查看代码
如果不需要快捷操作, 设置一个空数组就可以了, 它会变回以前的模样
北京 上海 广州 深圳 天津 杭州
广州深圳天津杭州
查看代码
只显示图标
北京 上海 广州 深圳 天津 杭州
查看代码
只显示名称
北京 上海 广州 深圳 天津 杭州
查看代码
显示图标+名称, 但是是紧凑型的
北京 上海 广州 深圳 天津 杭州
查看代码
7、进阶示例
监听select选择
适用于动态操作
选择[北京]时, 会发现选不上哦
北京 上海 广州 深圳 天津
查看代码
获取实时数据
北京 上海 广州 深圳 天津
查看代码
赋值与取值
多选取值
北京 上海 广州 深圳 天津
北京
默认数组 val数组 val字符串 name数组 name字符串 查看代码
多选赋值
北京 上海 广州 深圳 天津
北京
清空所有 赋值 北京,上海 追加赋值 天津 删除 已选择 [北京] 查看代码
超选后的提示
如果设置了xm-select-max="3", 当你选择第四个的时候会默认闪烁红框提示, 当然这个提示你可以自定义
北京 上海 广州 深圳 天津
深圳天津
查看代码
自定义搜索
如果设置了xm-select-search="", 当你搜索的时候是默认判断选项文本是否包含搜索的值
如下是检测 全拼,简拼,文本是否包含, 其中汉字转拼音摘录于网络
可以尝试使用拼音进行搜索
北京 上海 广州 深圳 天津
查看代码
友情提示: 远程搜索是不会经过此方法滴
配置
说起来这是个又爱又恨的方法, 设计之初是准备专门配置远程搜索用的, 无奈后面增加了很多东西, 结果变成了专门的配置方法了
好像没啥好说的, 都是点儿配置的东西, 说点儿场景吧
- 默认本地数据, js动态配置成远程搜索, 首先开启搜索模式 xm-select-search="", 然后config中定义url, 适用于url为可变参数的情况下
哈哈, 默认是没有的, 显示的是远程数据
新界张家口市运城市海东市
查看代码
- 点击加载
哈哈, 默认是没有的
点我加载 查看代码
- beforeSuccess的用法
哈哈, 默认是没有的
市州衢市阳南市田莆市林榆市贡自区地曲那市中晋
查看代码
当然上面的处理方法是用于演示beforeSuccess的用法的, 正确的姿势应该是转换数据结构滴
success, error可以直接打开控制台, 查看console的打印记录
远程数据的赋值
远程数据是使用ajax异步的模式来获取的, 所以赋值不能直接在config之后
方式一: 在返回数据中包含selected属性
方式二: 在success回调中使用value进行赋值
哈哈, 我没赋值成功
龙岩市重庆市
查看代码
上面好像不太对
哈哈, 默认是没有的
钦州市黔西南布依族苗族自治州
查看代码
动态数据
本地数据
来自星星的你
查看代码
远程数据, 也许你只希望加载一次, 而不是搜索一次变一次, 这个更适合你
来自星星的你
市庆重市义遵市德宁市州永
查看代码
不知道你们为什么吐槽我的设计, 也许真的是不好, 新增如下写法
来自星星的你
市海北市同大市南渭市安淮
查看代码
来一发树状结构压压惊
此树是我栽
查看代码
搜索控制
当输入内容为空时不触发搜索
查看代码
主动触发搜索
宝鸡市龙岩市香港岛
点我搜索查看选项变化 查看代码
显示数量
默认显示全部, 如果设置了高度的话就是显示指定范围内的label, 当然你也可以控制显示的数量
xm-select-show-count="2", 最多显示2个, 多余的隐藏
北京 上海 广州 深圳 天津 郑州 合肥 邯郸 舟山 海南 南京 哈尔滨
查看代码
自定义模板
选项默认是显示的孤零零的name值, 你也可以自定义格式
比如来一个左边name, 右边拼音的
北京 上海 广州 深圳 天津 郑州 合肥 邯郸 舟山 海南 南京 哈尔滨
查看代码
搜索位置
默认是在title上的, 可以设置到选项中, 前提是你打开了搜索
xm-select-search-type="dl"
北京 上海 广州 深圳 天津
查看代码
树状结构
惊喜有没有, 树状结构来一发
栽树乘凉
查看代码
监听打开关闭
监听下拉选框的打开与关闭
北京 上海 广州 深圳 天津
查看代码
结尾
↓↓↓ 捐赠作者 ↓↓↓
你们的支持, 是我们坚持的动力
转载至详细文档:https://hnzzmsf.github.io/example/example_v4.htmlhttps://hnzzmsf.github.io/layui-formSelects/docs/index.html#/module3/method-value
|