Layui 中 formSelects 的使用

一、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">//全局定义一次, 加载formSelectslayui.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, 默认 namekeyVal: 'value',            //自定义返回数据中value的key, 默认 valuekeySel: 'selected',         //自定义返回数据中selected的key, 默认 selectedkeyDis: 'disabled',         //自定义返回数据中disabled的key, 默认 disabledkeyChildren: 'children',    //联动多选自定义childrendelay: 500,                 //搜索延迟时间, 默认停止输入500ms后开始搜索direction: 'auto',          //多选下拉方向, auto|up|downresponse: {statusCode: 0,          //成功状态码statusName: 'code',     //code keymsgName: 'msg',         //msg keydataName: 'data'        //data key},success: function(id, url, searchVal, result){      //使用远程方式的success回调console.log(id);        //组件ID xm-selectconsole.log(url);       //URLconsole.log(searchVal); //搜索的valueconsole.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-selectconsole.log(url);       //URLconsole.log(searchVal); //搜索的valueconsole.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}]});});

页面结果：

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}
]

页面结果：

7、其实在官网文档里这些东西都讲的很清楚，大家可以去看看。

官方文档：https://hnzzmsf.github.io/example/example_v4.html#methods-data

Layui 中 formSelects 的使用相关推荐

layui 自定义排序_浅谈layui中table的sort排序
table模块是layui框架最核心的组成之一,它用于对表格进行一些列功能和动态化数据操作,本文介绍了layui中table的sort排序,解决了在我们使用sort排序时可能遇到的一些问题. 今天来谈 ...
data layui table 排序_浅谈layui中table的sort排序
table模块是layui框架最核心的组成之一,它用于对表格进行一些列功能和动态化数据操作,本文介绍了layui中table的sort排序,解决了在我们使用sort排序时可能遇到的一些问题. 今天来谈 ...
在layui中使用 jquery 触发select 的 change事件无效
在layui中使用 jquery 触发select 的 change事件无效使用layui.use监听select事件 <select lay-filter="demo" ...
html中的异步请求数据格式,解决layui中table异步数据请求不支持自定义返回数据格式的问题...
使用版本 layui-v2.3.0 修改: 打开layui中table.js源码在 Class.prototype.pullData 这个方法定义内部 //获得数据 Class.prototype. ...
layui表头样式_js相关：layui中table表头样式修改方法
js相关:layui中table表头样式修改方法发布于 2020-7-25| 复制链接分享一篇关于layui中table表头样式修改方法,具有很好的参考价值,希望对大家有所帮助.一起跟随小妖过来看 ...
html表格td点击事件,监听layui中的table中的td点击事件
上图就是用layui生成的一个table表格; 在这里我们给td绑定class,再通过jq的方式去监听是不可行的; 会监听不到事件; 不过在layui中,给了监听方法,并且还可以获取到该行所有的数据 ...
快速了解layui中layer的使用
这两天写项目的时候用到layer,于是又把layui找出来看了看,layui确实是一个比较强大的前端框架,里面涵盖了很多的前端元素,而这对于前端的开发者来说是省了很大的麻烦,从一些页面元素到内置模块, ...
layui中去掉表格的hover变色
layui中移除表格的hover变色将样式设置为透明色即可解决 .layui-table tbody tr:hover, .layui-table tr, .layui-table-click, . ...
layui中导航元素的简单使用
整体效果图所需界面 main.html界面代码 <!DOCTYPE html> <html lang="en"> <head><meta ...
layui中select及submit提交
layui中,select组件需要注意的几个地方: select外需要嵌套form标签: 给select添加lay-filter="test": 要在layui.use函数内声明使 ...

Layui 中 formSelects 的使用

Layui 中 formSelects 的使用相关推荐

最新文章

热门文章