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}
]
頁面結果：
7、其實在官網文檔裏這些東西都講的很清楚，大家可以去看看。
官方文檔：https://hnzzmsf.github.io/example/example_v4.html#methods-data
