layui中formSelects的使用
1.下载
下载地址:https://github.com/hnzzmsf/layui-formSelects
2. 引入
//引入formSelects.css <link rel="stylesheet" href="formSelects-v4.css" /> //模块化使用 <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. 前台代码
<label class="layui-form-label">文章标签</label> <div class="layui-input-inline" style="width: 56%;"> <select name="tags" id="tags" lay-verify="required" xm-select="tags" xm-select-skin="normal"> <option value="">请选择</option> </select> </div>
初始效果:
4. 本地搜索
<label class="layui-form-label">文章标签</label> <div class="layui-input-inline" style="width: 56%;"> <select name="tags" id="tags" lay-verify="required" xm-select="tags" xm-select-skin="normal"> <option value="">请选择</option> <option value="1">随笔</option> <option value="2">测试</option> <option value="3">博客日志</option> </select> </div>
页面结果:
5. 基础方法
5.1 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('tags', { 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);
5.2 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":""} ]
6. 远程搜索
6.1 local模式
//加载模块 layui.use(['jquery', 'formSelects'], function(){ var formSelects = layui.formSelects; //local模式 formSelects.data('tags', 'local', { arr: [ {"name": "随笔", "value": 1}, {"name": "测试", "value": 2}, {"name": "博客日志", "value": 3} ] }); });
页面结果:
![](https://img2018.cnblogs.com/i-beta/1747551/201912/1747551-20191211165017509-588099572.png)
6.2 server模式
//加载模块 layui.use(['jquery', 'formSelects'], function(){ var formSelects = layui.formSelects; //server模式 formSelects.config('tags', { keyName: 'name', keyVal: 'id' }).data('tags', 'server', { url: "/tag/findAll.do" }); });
从服务器中返回的数据如下:
[SysTag{id=1, name='随笔', count=null}, SysTag{id=2, name='测试', count=null}, SysTag{id=3, name='博客日志', count=null}]
页面结果:
其实在官网文档里这些东西都讲的很清楚,大家可以去看看。
官方文档:https://hnzzmsf.github.io/example/example_v4.html#methods-data