xmselect.render的多方位詳解

一、簡介

xm-select是一款基於jQuery開發的多功能選擇器。它可以用於各種web頁面上，包括但不限於表單、操作界面等。其中xmselect.render就是用來生成xm-select的組件的。

二、使用指南

xmselect.render方法需要傳入兩個參數：選擇器容器以及配置參數。其中選擇器容器指的是xm-select將要填充的容器，而配置參數則包括了:

• name屬性：表單提交時的name值
• lay-filter屬性：用於監聽xm-select變化
• lay-search屬性：是否可搜索
• data屬性：數據源，包括選項以及選項對應值等
• etc…

除此之外，在參數中還可以指定xm-select的寬度、高度、下拉列表的最大高度以及多選等功能

xmSelect.render({  
    el: '#demo1',  //確定xm-select將要填充的容器
    name: 'fruit1',  //設置表單提交數據時的name值
    radio: true,  //單選
    layVerify: 'required',  //驗證規則，此處設置為必須選擇
    clickClose: true,  //選項被選擇後是否自動關閉下拉框
    data: [{
        name: '蘋果',
        value: 'apple',
        selected: true,  //默認被選擇
        disabled: false  //可選
    },{
        name: '梨子',
        value: 'pear',
        disabled: true  //不可選
    }]
});

三、配置參數詳解

1. name屬性

name屬性用於設置表單提交數據的name值，可以設置非必須項或必須項。如果設置為必須項，用戶在未選擇任何選項的情況下提交表單時會觸發瀏覽器提示，防止數據漏填。

2. lay-filter屬性

lay-filter屬性用於監聽xm-select組件變化，如果需要對選項進行二次處理（例如顯示選項的數量），就可以在監聽函數中進行處理

lacQl.render({
    el: '#demo2',
    name: 'fruit2',
    data: [{
        name: '蘋果',
        value: 'apple',
        selected: true,
        disabled: false
    },{
        name: '梨子',
        value: 'pear',
        disabled: true
    }],
    layFilter: 'fruitSelectDemo2'
});

//監聽函數
lacQl.on('select(fruitSelectDemo2)', function(selectData, elem){
    console.log('選中的數據：', selectData);
    console.log('組件元素：', elem);
});

3. data屬性

data屬性用於指定xm-select的選項，其中包含選項名稱、選項值、選項是否被選中以及是否可選等設置。

xmSelect.render({
    el: '#demo3',
    name: 'fruit3',
    max: 2,
    data: [{
        name: '蘋果',
        value: '0',
        selected: true,
        disabled: false
    },{
        name: '梨子',
        value: '1',
        disabled: true
    },{
        name: '香蕉',
        value: '2'
    }]
});

4. lay-search屬性

lay-search屬性用於指定xm-select的搜索功能是否開啟。

xmSelect.render({
    el: '#demo4',
    name: 'fruit4',
    search: true,
    data: [{
        name: '蘋果',
        value: '0',
        selected: false,
        disabled: false
    },{
        name: '梨子',
        value: '1',
        disabled: true
    },{
        name: '香蕉',
        value: '2'
    }]
});

5. 相關功能設置

xm-select還支持多選功能、下拉列表最大高度設置等功能。具體功能如下：

xmSelect.render({
    el: '#demo5',
    name: 'fruit5',
    height: 'auto',  //xm-select的高度
    radio: false,  //是否開啟多選模式
    laySize: 'sm',  //xm-select組件的尺寸
    tips: '請選擇水果',  //當未選擇任何選項時的提示語
    layStrictSearch: true,  //是否開啟嚴格搜索模式
    prop: {  //數據映射設置
        name: 'text',
        value: 'value',
        selected: 'selected',
        disabled: 'disabled'
    },
    filterable: true,  //搜索時是否對選項進行篩選
    data: [{
        text: '蘋果',
        value: 'apple',
        selected: false,
        disabled: false
    },{
        text: '梨子',
        value: 'pear',
        disabled: true
    },{
        text: '香蕉',
        value: 'banana'
    }],
    maxHeight: 200  //下拉列表最大高度
});

四、總結

xm-select是一款強大的多功能選擇器，而xmselect.render作為其生成組件的方法，關乎到xm-select的使用。通過對xmselect.render的詳細介紹，相信大家已經對xm-select的使用以及參數配置有了一定的了解，可以在實際項目中使用該組件完成各種選擇操作。