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的使用的更多相关文章

  1. layui中使用autocomplete.js

    前言 在网站找了一大圈都是问题没有答案,记录记录谨防踩坑 layui版本:layui-v1.0.9_rls a(https://github.com/devbridge/jQuery-Autocomp ...

  2. layer过去的时间不能选择,只能选择未来的时间 LayUI中的时间日期控件,设置时间范围,

    默认Layui中的时间控件显示如下: 我当时系统时间是2018-06-07, 我需要做的是2018-06-07之后过去的时间不能选择 <p><span>时间范围:</sp ...

  3. 扩展layui中的自带字体图标

    项目中,虽然layui的字体图标库中已经有了1000多个图标了,但是也有时候不能满足我们自定义图标的需求,所以需要进行自定义,具体步骤如下: 1.在iconfont上找到自己喜欢的图标,也可以上传ui ...

  4. 在layui中,新的页面怎么获取另一个页面传过来的数据,并可以对数据进行判断,layui中的后台分页(table)。

    例如:打开一个新页面的同时,传数据. layer.open({ type: 2, title: '新增项目', shadeClose: false, shade: [0.3], maxmin: tru ...

  5. layui中的tab切换

    tab切换是常见的效果,为了方便经常使用插架中自带的,下面是layui中自带的tab切换效果, 主要代码如下: <!DOCTYPE html> <html lang="en ...

  6. django对layui中csrf_token处理方式及其它一些处理

    第一:由于layui官方是没有csrf_token处理机制,所以,在使用layui中post请求,请不要按layui官方提供的两种方法进行设置 官方设置如下: table.render({ elem: ...

  7. layui中进行form表单一些问题

    最近一段时间一直在用layui来写一些前段页面,发现有几个问题,不知道是我的编译器的问题还是什么,总之目前是自己改成功了,在这里分享下. 第一个是用layui去写单选按钮,网页上不会显示出来.解决方法 ...

  8. 在layui中使用ajax不起作用

    又是一个坑,坑了我一个下午.在layui插件中使用jquery的ajax请求,一点反应都没有,不管是改成get还是post请求,后台毫无反应,前端谷歌调试也没有报半点错. js代码如下: layui. ...

  9. layui中的submit提交本地数据在控制在输出为空数组(解决)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Android开发中常用的设计模式

    首先需要说明的是,这篇博文灵感来自于 http://www.cnblogs.com/qianxudetianxia/archive/2011/07/29/2121547.html ,在这里,博主已经很 ...

  2. vue+element UI以组件递归方式实现多级导航菜单

    介绍 这是一个是基于element-UI的导航菜单组件基础上,进行了二次封装的菜单组件,该组件以组件递归的方式,实现了可根据从后端接收到的json菜单数据,动态渲染多级菜单的功能. 使用方法 由于该组 ...

  3. Mac中的Python安装selenium,结合chrom及chromdriver使用

    一.安装selenium 1.在终端通过命令安装 pip3 install -U selenium 二.准备环境 1.在电脑中安装谷歌浏览器chrom,和下载估计浏览器驱动chromdriver,以下 ...

  4. 03-MyBatis拦截器机制

    目录 MyBatis拦截器介绍 拦截器的使用 拦截器介绍及配置 源码分析 总结 本文转载自MyBatis拦截器原理探究 MyBatis拦截器介绍 MyBatis提供了一种插件(plugin)的功能,虽 ...

  5. 2019CSP day1t1 格雷码

    题目描述 通常,人们习惯将所有 \(n\) 位二进制串按照字典序排列,例如所有 \(2\) 位二进制串按字典序从小到大排列为:\(00,01,11,10\). 格雷码(\(Gray Code\))是一 ...

  6. WeTest明星工具-移动端性能测试PerfDog初探

    在十一月初,腾讯就官宣了一则消息,腾讯WeTest明星工具-PerfDog面向全球发布.官宣介绍如下:https://wetest.qq.com/lab/view/475.html.我在看到该新闻时, ...

  7. React-基础总结

    使用1. // js文件,第一部引入React(大写,不然保错) import React from 'react' // 创建数组 const arrList = Array.from({lengt ...

  8. add jar and proxy repo

    1. 添加代理仓库 2. 添加host 仓库 3. 添加私有jar 4. 添加仓库到public 仓库

  9. MySQL常用的查询语句回顾

    让你快速复习语句的笔记宝典. create table users(    username varchar(20) primary key,    userpwd varchar(20) ) alt ...

  10. 20191017-7 alpha week 2/2 Scrum立会报告+燃尽图 06

    此作业要求参见https://edu.cnblogs.com/campus/nenu/2019fall/homework/9803 一.小组情况 队名:扛把子 组长:迟俊文 组员:宋晓丽 梁梦瑶 韩昊 ...