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的使用以及参数配置有了一定的了解，可以在实际项目中使用该组件完成各种选择操作。