formSelects v4的一些操作1、使用使用方式://1.下载formSelects-v4//然后引入formSelects.css//2.模块化使用 //全局定义一次, 加载f
formSelects v4的一些操作
一个简单的小例子
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、基本方法**
1. value
/** - 1.获取选中数据 - 3. formSelects.value(ID, TYPE); - 5. @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的选中值 - 9. formSelects.value(ID, ARR); - 11. @param ID xm-select的值 - @param ARR value数组 */ var formSelects = layui.formSelects; formSelects.value('select1', [2, 4]); // 选中value为2和4的option → 深圳,深圳 /** - 3.追加或删除select的选中值 - 15. formSelects.value(ID, ARR, isAppend); - 17. @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, 如果该值没有选中则跳过, 该值被选中则取消选中
/** * 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);
/** * 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){ ... });
/** * 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){ ... });
/** * 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);
/** * 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();
/** * 1.禁用多选 * * formSelects.disabled(ID); * * @param ID xm-select的值 */ var formSelects = layui.formSelects; formSelects.disabled('select1'); //以下方式则禁用所有的已存在多选 formSelects.disabled();
/** * 1.启用多选, 启用被禁用的多选 * * formSelects.undisabled(ID); * * @param ID xm-select的值 */ var formSelects = layui.formSelects; formSelects.undisabled('select1'); //以下方式则启用所有的已存在多选 formSelects.undisabled();
/** * 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": []}, ] }, ] }
/** * 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不能重复
/** * 1.触发搜索 * * formSelects.search(ID, val); * * @param ID xm-select的值 * @param BTNS 搜索内容 */ var formSelects = layui.formSelects; //使用js主动触发搜索 formSelects.search('select1', '关键内容');
/** * 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('打开了'); });
/** * 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('合上了'); });
版权:【注明为本站原创的文章,转载请注明出处与原文地址!
本站部分转载文章能找到原作者的我们都会注明,若文章涉及版权,有侵犯到您的权利,请及时联系我们删除。请发至邮箱:253849310@qq.com 。
标题:layui-form表单中的select监听不起作用formSelects v4的一些操作及解决办法
本文链接:http://www.aiws.cc/kaifa/c425.html
描述:formSelects v4的一些操作1、使用使用方式://1.下载formSelects-v4//然后引入formSelects.css//2.模块化使用 //全局定义一次, 加载f
更多信息请关注微信:13534259410