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}
]
});
});
页面结果:
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
layui中formSelects的使用的更多相关文章
- layui中使用autocomplete.js
前言 在网站找了一大圈都是问题没有答案,记录记录谨防踩坑 layui版本:layui-v1.0.9_rls a(https://github.com/devbridge/jQuery-Autocomp ...
- layer过去的时间不能选择,只能选择未来的时间 LayUI中的时间日期控件,设置时间范围,
默认Layui中的时间控件显示如下: 我当时系统时间是2018-06-07, 我需要做的是2018-06-07之后过去的时间不能选择 <p><span>时间范围:</sp ...
- 扩展layui中的自带字体图标
项目中,虽然layui的字体图标库中已经有了1000多个图标了,但是也有时候不能满足我们自定义图标的需求,所以需要进行自定义,具体步骤如下: 1.在iconfont上找到自己喜欢的图标,也可以上传ui ...
- 在layui中,新的页面怎么获取另一个页面传过来的数据,并可以对数据进行判断,layui中的后台分页(table)。
例如:打开一个新页面的同时,传数据. layer.open({ type: 2, title: '新增项目', shadeClose: false, shade: [0.3], maxmin: tru ...
- layui中的tab切换
tab切换是常见的效果,为了方便经常使用插架中自带的,下面是layui中自带的tab切换效果, 主要代码如下: <!DOCTYPE html> <html lang="en ...
- django对layui中csrf_token处理方式及其它一些处理
第一:由于layui官方是没有csrf_token处理机制,所以,在使用layui中post请求,请不要按layui官方提供的两种方法进行设置 官方设置如下: table.render({ elem: ...
- layui中进行form表单一些问题
最近一段时间一直在用layui来写一些前段页面,发现有几个问题,不知道是我的编译器的问题还是什么,总之目前是自己改成功了,在这里分享下. 第一个是用layui去写单选按钮,网页上不会显示出来.解决方法 ...
- 在layui中使用ajax不起作用
又是一个坑,坑了我一个下午.在layui插件中使用jquery的ajax请求,一点反应都没有,不管是改成get还是post请求,后台毫无反应,前端谷歌调试也没有报半点错. js代码如下: layui. ...
- layui中的submit提交本地数据在控制在输出为空数组(解决)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- python爬虫-携程-eleven参数
携程-eleven分析 一.eleven的位置 通过对旁边栈的分析,它是在另一个js文件中调用的.那个js文件是一个自调用的函数,所以我们可以直接copy下来,用浏览器执行看看 执行运行是会报错的,u ...
- 识别手写数字增强版100% - pytorch从入门到入道(一)
手写数字识别,神经网络领域的“hello world”例子,通过pytorch一步步构建,通过训练与调整,达到“100%”准确率 1.快速开始 1.1 定义神经网络类,继承torch.nn.Modul ...
- 基于typedef的用法详解【转】
也许新手用这个关键字不多,但它却是一个很有用的关键字,可以使代码模块化程度更好(即与其它代码的关联较少),在C++中还是实现Traits技术的基础,也是模板编程的基本语法之一. 若说变量定义是为变量命 ...
- Redis实战--Jedis实现分布式锁
echo编辑整理,欢迎转载,转载请声明文章来源.欢迎添加echo微信(微信号:t2421499075)交流学习. 百战不败,依不自称常胜,百败不颓,依能奋力前行.--这才是真正的堪称强大!!! 分布式 ...
- 怎样用JS给,option添加“选中”属性
<html> <head> <script> window.onload = function(){ var opts = document.getElementB ...
- django_4数据库2——表外键
表关系: many to one many to many one to one many to one 记录是如何创建出来的? 先创建one,在在创建many,创建时加入ForeignKe ...
- 阿里云ECS服务器部署HADOOP集群(一):Hadoop完全分布式集群环境搭建
准备: 两台配置CentOS 7.3的阿里云ECS服务器: hadoop-2.7.3.tar.gz安装包: jdk-8u77-linux-x64.tar.gz安装包: hostname及IP的配置: ...
- Java每日一面(Part1:计算机网络)[19/11/25]
作者:晨钟暮鼓c个人微信公众号:程序猿的月光宝盒 1. HTTP相关[2] 1.1Get请求和Post请求的区别 从三个层面来回答: 1.1.1 从HTTP报文层面: Get请求将请求信息放在UR ...
- mybatis精讲(三)--标签及TypeHandler使用
目录 话引 XML配置标签 概览 properties 子标签property resource 程序注入 settings 别名 TypeHandler 自定义TypeHandler EnumTyp ...
- HTML、CSS基础知识
前端基础 1. CSS 8 1.1. CSS叫做层叠样式表,用来设置页面中元素的样式.背景颜色.字体颜色.字体大小... 8 1.2. CSS负责结构.表现.行为中的表现 8 1.3. 编写的位置 8 ...