选择扩展 Select2

示例

基本形式

<select2 source={['简单选项1', '简单选项2', '简单选项3']} />
<select2 source={source} />

var component = new RGUI.Component({
    template: template,
    data: {
        source: [
            {name: '选项1'},
            {name: '选项2'},
            {name: '选项3'}
        ]
    }
});

selected, value和key

selected表示当前选择项，value表示当前选择值。key表示数据项的键，默认为'id'。

它们三者的关系如下：selected[key] == value。其中selected和value是联动的，当一项变化时会同时改变另一项。

<select2 source={source} selected={selected} />
<select2 source={source} value=2 />
<select2 source={source} key="name" value="选项3" />

var component = new RGUI.Component({
    template: template,
    data: {
        source: [
            {id: 1, name: '选项1'},
            {id: 2, name: '选项2'},
            {id: 3, name: '选项3'}
        ]
    },
    config: function() {
        this.data.selected = this.data.source[0];
    }
});

禁用某一项，禁用组件

<select2 source={source} />
<select2 source={source} disabled />

var component = new RGUI.Component({
    template: template,
    data: {
        source: [
            {name: '选项1'},
            {name: '选项2'},
            {name: '选项3（禁用）', disabled: true}
        ]
    }
});

分隔线

<select2 source={source} />

var component = new RGUI.Component({
    template: template,
    data: {
        source: [
            {name: '选项1'},
            {name: '选项2'},
            {divider: true},
            {name: '选项3（禁用）', disabled: true}
        ]
    }
});

设置或取消默认项

如果placeholder为空，刚开始将会自动选中第一项。

<select2 source={source} placeholder="全部" />
<select2 source={source} placeholder="" />

var component = new RGUI.Component({
    template: template,
    data: {
        source: [
            {name: '选项1'},
            {name: '选项2'},
            {name: '选项3'}
        ]
    }
});

远程数据

<select2 service={@(this.service)} value="2" />

var component = new RGUI.Component({
    template: template,
    service: {
        getList: function(params, success) {
            RGUI.ajax.request({
                url: '../data/list.json',
                method: 'get',
                type: 'json',
                data: params,
                success: success
            });
        }
    }
});

数据绑定

<select2 source={source} selected={selected} value={value} /> 当前选择项：{selected ? selected.name : 'undefined'}，当前选择值：{value || 'undefined'}

var component = new RGUI.Component({
    template: template,
    data: {
        source: [
            {id: 1, name: '选项1'},
            {id: 2, name: '选项2'},
            {id: 3, name: '选项3'}
        ]
    }
});

事件

请打开浏览器的控制台查看结果。

<select2 source={source}
    on-toggle={console.log('on-toggle:', '$event.open:', $event.open)}
    on-select={console.log('on-select:', '$event.selected:', $event.selected)}
    on-change={console.log('on-change:', '$event:', $event)} />

var component = new RGUI.Component({
    template: template,
    data: {
        source: [
            {name: '选项1'},
            {name: '选项2'},
            {name: '选项3'}
        ]
    }
});

API

Class

Select2

继承自Dropdown。

Options

new Select2()

Methods

select2.select(item)

选择某一项

Inherited Methods

select2.toggle(open)

展开/收起

@override select2.select(item)

@deprecated select2.$updateSource()

从service中更新数据源

Events

select2.$on('change')

选择项改变时触发

select2.$on('select')

选择某一项时触发

Inherited Events

select2.$on('toggle')

展开/收起时触发

@override select2.$on('select')