formSelects v4的一些操作

惊云鸟

12879人浏览 · 2020-11-19 13:44:46

惊云鸟 · 2020-11-19 13:44:46 发布

1、下载与使用

下载地址: GitHub
使用文档: GitHub Pages
使用方式:

//1.下载formSelects-v4

//然后引入formSelects.css

<link rel="stylesheet" href="formSelects-v4.css" />

//2.模块化使用

<script src="layui.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

//全局定义一次, 加载formSelects

layui.config({

base: '../src/' //此处路径请自行处理, 可以使用绝对路径

}).extend({

formSelects: 'formSelects-v4'

});

//加载模块

layui.use(['jquery', 'formSelects'], function(){

var formSelects = layui.formSelects;

});

</script>

//3.非模块化使用

<script src="layui.all.js" type="text/javascript" charset="utf-8"></script>

<script src="formSelects-v4.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

var formSelects = layui.formSelects;

</script>

一个简单的小例子

2、基本参数

属性名	说明	示例
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", 超出后隐藏

3、基本方法

value

/**

* 1.获取选中数据

*

* formSelects.value(ID, TYPE);

*

* @param ID xm-select的值

* @param TYPE all | val | valStr | name | nameStr

*/

var formSelects = layui.formSelects;

formSelects.value('select1'); // [{"name":"上海","val":"2"},{"name":"深圳","val":"4"}]

formSelects.value('select1', 'all'); // [{"name":"上海","val":"2"},{"name":"深圳","val":"4"}]

formSelects.value('select1', 'val'); // ["2","4"]

formSelects.value('select1', 'valStr'); // 2,4

formSelects.value('select1', 'name'); // ["上海","深圳"]

formSelects.value('select1', 'nameStr'); // 上海,深圳

/**

* 2.设置select的选中值

*

* formSelects.value(ID, ARR);

*

* @param ID xm-select的值

* @param ARR value数组

*/

var formSelects = layui.formSelects;

formSelects.value('select1', [2, 4]); // 选中value为2和4的option → 上海,深圳

/**

* 3.追加或删除select的选中值

*

* formSelects.value(ID, ARR, isAppend);

*

* @param ID xm-select的值

* @param ARR value数组

*/

var formSelects = layui.formSelects;

formSelects.value('select1', [2, 4], true); // 追加value为2和4的option, 如果该值已选中则跳过, 该值未选中则选中

formSelects.value('select1', [2, 4], false);// 删除value为2和4的option, 如果该值没有选中则跳过, 该值被选中则取消选中

on

/**

* 1.监听select的选中与取消

*

* formSelects.on(ID, Function);

*

* @param ID xm-select的值

* @param Function 自定义处理方法

* @param isEnd 是否获取实时数据, true/false

*/

var formSelects = layui.formSelects;

formSelects.on('select1', function(id, vals, val, isAdd, isDisabled){

//id: 点击select的id

//vals: 当前select已选中的值

//val: 当前select点击的值

//isAdd: 当前操作选中or取消

//isDisabled: 当前选项是否是disabled

//如果return false, 那么将取消本次操作

return false;

});

//以下两种方式则配置所有的多选select

formSelects.on(function(id, vals, val, isAdd, isDisabled){

...

});

formSelects.on(null, function(id, vals, val, isAdd, isDisabled){

...

});

//4.0.0.0813版本之前, 受到了颇多的小伙伴吐槽, 此版本加上了获取实时数据的方法

formSelects.on('select1', function(id, vals, val, isAdd, isDisabled){

//id: 点击select的id

//vals: 当前select已选中的值

//val: 当前select点击的值

//isAdd: 当前操作选中or取消

//isDisabled: 当前选项是否是disabled

}, true);

maxTips

/**

* 1.多选select超出最大值的提示, 默认闪烁红色边框

*

* formSelects.maxTips(ID, Function);

*

* @param ID xm-select的值

* @param Function 自定义处理方法

*/

var formSelects = layui.formSelects;

formSelects.maxTips('select1', function(id, vals, val, max){

//id: 点击select的id

//vals: 当前select已选中的值

//val: 当前select点击的值

//max: 当天多选最大值

alert("选超了...");

});

//以下两种方式则配置所有的多选select

formSelects.maxTips(function(id, vals, val, max){

...

});

formSelects.maxTips(null, function(id, vals, val, max){

...

});

filter

/**

* 1.自定义本地搜索过滤方式, 默认匹配文本是否包含

*

* formSelects.filter(ID, Function);

*

* @param ID xm-select的值

* @param Function 自定义处理方法

*/

var formSelects = layui.formSelects;

formSelects.filter('select1', function(id, inputVal, val, isDisabled){

//id: 点击select的id

//inputVal: 当前input搜索框中的数值

//val: 格式: {"name":"上海","val":"2"}

//isDisabled: 当前options是否被禁用

//return true时该选项被过滤, 隐藏不显示

return true;

});

//以下两种方式则配置所有的多选select

formSelects.filter(function(id, inputVal, val, isDisabled){

...

});

formSelects.filter(null, function(id, inputVal, val, isDisabled){

...

});

config

/**

* 1.配置远程搜索, 请求头, 请求参数, 请求类型等

*

* formSelects.config(ID, Options, isJson);

*

* @param ID xm-select的值

* @param Options 配置项

* @param isJson 是否传输json数据, true将添加请求头 Content-Type: application/json; charset=UTF-8

*/

var formSelects = layui.formSelects;

formSelects.config('select1', {

type: 'get', //请求方式: post, get, put, delete...

header: {}, //自定义请求头

data: {}, //自定义除搜索内容外的其他数据

searchUrl: '', //搜索地址, 默认使用xm-select-search的值, 此参数优先级高

searchName: 'keyword', //自定义搜索内容的key值

searchVal: '', //自定义搜索内容, 搜素一次后失效, 优先级高于搜索框中的值

keyName: 'name', //自定义返回数据中name的key, 默认 name

keyVal: 'value', //自定义返回数据中value的key, 默认 value

keySel: 'selected', //自定义返回数据中selected的key, 默认 selected

keyDis: 'disabled', //自定义返回数据中disabled的key, 默认 disabled

keyChildren: 'children', //联动多选自定义children

delay: 500, //搜索延迟时间, 默认停止输入500ms后开始搜索

direction: 'auto', //多选下拉方向, auto|up|down

response: {

statusCode: 0, //成功状态码

statusName: 'code', //code key

msgName: 'msg', //msg key

dataName: 'data' //data key

},

success: function(id, url, searchVal, result){ //使用远程方式的success回调

console.log(id); //组件ID xm-select

console.log(url); //URL

console.log(searchVal); //搜索的value

console.log(result); //返回的结果

},

error: function(id, url, searchVal, err){ //使用远程方式的error回调

//同上

console.log(err); //err对象

},

beforeSuccess: function(id, url, searchVal, result){ //success之前的回调, 干嘛呢? 处理数据的, 如果后台不想修改数据, 你也不想修改源码, 那就用这种方式处理下数据结构吧

console.log(id); //组件ID xm-select

console.log(url); //URL

console.log(searchVal); //搜索的value

console.log(result); //返回的结果

return result; //必须return一个结果, 这个结果要符合对应的数据结构

},

beforeSearch: function(id, url, searchVal){ //搜索前调用此方法, return true将触发搜索, 否则不触发

if(!searchVal){//如果搜索内容为空,就不触发搜索

return false;

}

return true;

},

clearInput: false, //当有搜索内容时, 点击选项是否清空搜索内容, 默认不清空

}, true);

//以下两种方式则配置所有的多选select

formSelects.config('select1', {

...

}, false);

formSelects.config(null, {

...

}, false);

render

/**

* 1.重新渲染, 如果已经是多选则重置为初始值, 如果是初始select则渲染为多选

* 2.支持渲染时候改变多个参数

*

* formSelects.render(ID);

*

* @param ID xm-select的值

*/

var formSelects = layui.formSelects;

formSelects.render('select1', {

init: ["1", "2"], //默认值

skin: "danger", //多选皮肤

height: "auto", //是否固定高度, 38px | auto

radio: false, //是否设置为单选模式

direction: "auto",

create: function(id, name){

console.log(id); //多选id

console.log(name); //创建的标签名称

return Date.now(); //返回该标签对应的val

},

filter: fun..., //同formSelects.filter

max: 3, //多选最多选择量

maxTips: fun..., //同formSelects.maxTips

on: fun..., //同formSelects.on

searchType: "title", //搜索框的位置

template: function(name, value, selected, disabled){

console.log(name); //选项名

console.log(value); //选项值

console.log(selected); //是否被选中

console.log(disabled); //是否被禁用

//例如: 反转字符串

//return name.split('').reverse().join('');

return name; //返回一个html结构, 用于显示选项

},

showCount: 0, //多选的label数量, 0,负值,非数字则显示全部

});

//以下方式则重新渲染所有的已存在多选

formSelects.render();

disabled

/**

* 1.禁用多选

*

* formSelects.disabled(ID);

*

* @param ID xm-select的值

*/

var formSelects = layui.formSelects;

formSelects.disabled('select1');

//以下方式则禁用所有的已存在多选

formSelects.disabled();

undisabled

/**

* 1.启用多选, 启用被禁用的多选

*

* formSelects.undisabled(ID);

*

* @param ID xm-select的值

*/

var formSelects = layui.formSelects;

formSelects.undisabled('select1');

//以下方式则启用所有的已存在多选

formSelects.undisabled();

data

/**

* 1.多选数据赋值

*

* formSelects.data(ID, type, config);

*

* @param ID xm-select的值

* @param type 'local' | 'server', 本地数据或者远程数据

* @param config 配置项

* arr 本地数据数组

* url 远程数据链接

* keyword 远程数据搜索内容, 其他附加数据可以使用 formSelects.config设置

* linkage 是否为联动多选

* linkageWidth 联动多选没级宽度

*/

//以下代码可以在console中运行测试, 结果查看基础示例第一个

var formSelects = layui.formSelects;

//local模式

formSelects.data('select1', 'local', {

arr: [

{"name": "分组-1", "type": "optgroup"},

{"name": "北京", "value": 1},

{"name": "上海", "value": 2},

{"name": "分组-2", "type": "optgroup"},

{"name": "广州", "value": 3},

{"name": "深圳", "value": 4},

{"name": "天津", "value": 5}

]

});

//server模式

formSelects.data('select1', 'server', {

url: 'https://www.fastmock.site/mock/29487363107ab7d242c46305cadf4c52/formSelects/layui/data',

keyword: '水果'

});

//server返回数据与远程搜索数据结构一致

{

"code":0,

"msg":"success",

"data":[

{"name":"北京","value":1,"selected":"","disabled":""},

{"name":"上海","value":2,"selected":"","disabled":""},

{"name":"广州","value":3,"selected":"selected","disabled":""},

{"name":"深圳","value":4,"selected":"","disabled":"disabled"},

{"name":"天津","value":5,"selected":"","disabled":""}

]

}

//当然你也可以偷懒, 返回如下结构

[

{"name":"北京","value":1,"selected":"","disabled":""},

{"name":"上海","value":2,"selected":"","disabled":""},

{"name":"广州","value":3,"selected":"selected","disabled":""},

{"name":"深圳","value":4,"selected":"","disabled":"disabled"},

{"name":"天津","value":5,"selected":"","disabled":""}

]

/*************** 华丽的分割线 ***************/

//来一个树状结构的数据

formSelects.data('select15', 'local', {

arr: [

{name: '北京', value: 1, xslkdf: '123', children: [

{name: '朝阳', value: 11},

{name: '海淀', value: 12}

]},

{name: '深圳', value: 2, children: [{name: '龙岗', value: 21}]},

]

});

/*************** 华丽的分割线 ***************/

//联动多选数据格式

//local, 注意 value值请保证唯一

formSelects.data('select15', 'local', {

arr: [

{

"name": "北京",

"value": 1,

"children": [

{"name": "北京市1", "value": 12, "children": [

{"name": "朝阳区1", "value": 13, "children": []},

{"name": "朝阳区2", "value": 14, "children": []},

{"name": "朝阳区3", "value": 15, "children": []},

{"name": "朝阳区4", "value": 16, "children": []},

]},

{"name": "北京市2", "value": 17, "children": []},

{"name": "北京市3", "value": 18, "children": []},

{"name": "北京市4", "value": 19, "children": []},

]

},

{

"name": "天津",

"value": 2,

"children": [

{"name": "天津市1", "value": 51, "children": []},

]

},

],

linkage: true //开启联动模式

});

//server

formSelects.data('select15', 'server', {

url: 'http://yapi.demo.qunar.com/mock/9813/layui/citys',

linkage: true,

linkageWidth: 130 //代表每一级别的宽度, 默认是100

});

//server返回数据, 同上 value不能重复

{

"code":0,

"msg":"success",

"data":[

{

"name": "北京",

"value": 1,

"children": [

{"name": "北京市1", "value": 12, "children": [

{"name": "朝阳区1", "value": 13, "children": []},

{"name": "朝阳区2", "value": 14, "children": []},

{"name": "朝阳区3", "value": 15, "children": []},

{"name": "朝阳区4", "value": 16, "children": []},

]},

{"name": "北京市2", "value": 17, "children": []},

{"name": "北京市3", "value": 18, "children": []},

{"name": "北京市4", "value": 19, "children": []},

]

},

{

"name": "天津",

"value": 2,

"children": [

{"name": "天津市1", "value": 51, "children": []},

]

},

]

}

btns

/**

* 1.快捷操作

*

* formSelects.btns(ID, BTNS, config);

*

* @param ID xm-select的值

* @param BTNS 定义操作列表, 内置三种操作, select:全选, remove:清空, skin:换肤, 当然你可以自定义

* @param config 配置操作列表, config.show='name' 只显示名称, config.show='icon' 只显示图标, config.space='30px' 两个操作之间的间隔

*/

var formSelects = layui.formSelects;

//默认设置了全选, 清空, 反选

//如下设置内置操作

formSelects.btns('select1', ['select', 'remove', 'reverse']);

//如下设置自定义

formSelects.btns('select1', ['select', 'remove', 'skin', {

icon: 'layui-icon layui-icon-ok', //自定义图标, 可以使用layui内置图标

name: '提示名称',

click: function(id){

//点击后的操作

alert('点击了自定义快捷操作')

}

}]);

//配置只显示名称,紧凑型, 适合宽度较窄的情况

formSelects.btns('select1', ['select', 'remove'], {show: 'name', space: '10px'});

//如下写法定义所有的多选

formSelects.btns(['select', 'remove', 'skin']);

// !!友情提示: name不能重复

search

/**

* 1.触发搜索

*

* formSelects.search(ID, val);

*

* @param ID xm-select的值

* @param BTNS 搜索内容

*/

var formSelects = layui.formSelects;

//使用js主动触发搜索

formSelects.search('select1', '关键内容');

opened

/**

* 1.打开下拉框的回调事件

*

* formSelects.opened(ID);

*

* @param ID xm-select的值

*/

var formSelects = layui.formSelects;

//监听下拉框的打开

formSelects.opened('select1', function(id){

console.log('打开了');

});

//如下定义所有

formSelects.opened(null, function(id){

console.log('打开了');

});

formSelects.opened(function(id){

console.log('打开了');

});

closed

/**

* 1.关闭下拉框的回调事件

*

* formSelects.closed(ID);

*

* @param ID xm-select的值

*/

var formSelects = layui.formSelects;

//监听下拉框的关闭

formSelects.closed('select1', function(id){

console.log('合上了');

});

//如下定义所有

formSelects.closed(null, function(id){

console.log('合上了');

});

formSelects.closed(function(id){

console.log('合上了');

});

AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

1.8B 体积、33 种语言互译｜腾讯混元 HY-MT1.5-1.8B 多语言机器翻译模型上线

在跨语言交流日益频繁的今天，阅读外语菜单、处理多语言邮件、与不同语言背景的人沟通，已经成为很多人日常工作与生活的一部分。过去，这类需求往往依赖联网翻译工具，而如今，—— 一部设备即可支持的相互翻译。当 AI 不再只是“逐字直译”，而是开始理解语境、风格与语言之间的细微差异，机器翻译就真正具备了今天为大家介绍一款高质量、多语言、支持端侧部署的机器翻译模型 ——，现已上线 AtomGit AI 社区，