layui中formSelects的使用

時間 2019-12-26

標籤 layui formselects 使用简体版

原文原文鏈接

1.下載

下載地址：https://github.com/hnzzmsf/layui-formSelectsjavascript

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>

初始效果：css

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>

頁面結果：html

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"
        });
});