代码演示

基本形式

<jr-select source={source} lang="en-US" />
var component = new JRUI.Component({
    template: template,
    data: {
        source: [
            {name: '选项1'},
            {name: '选项2'},
            {name: '选项3'}
        ]
    }
});

表单项

在表单中使用

<jr-form>
    <jr-form-item cols="12" title="用户名" hint="用户名的用途">
        <jr-select source={['简单选项1', '简单选项2', '简单选项3']} />
    </jr-form-item>
</jr-form>

selected, value和key

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

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

<jr-form>
    <jr-form-item cols=4>
        <jr-select source={source} selected={selected} />
    </jr-form-item>
    <jr-form-item cols=4>
        <jr-select source={source} value=2 />
    </jr-form-item>
    <jr-form-item cols=4>
        <jr-select source={source} key="name" value="选项3" />
    </jr-form-item>
</jr-form>
var component = new JRUI.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];
    }
});

禁用某一项，禁用组件

tip表示禁用某一项时给出的提示，不给则无提示，placement表示给出提示的方向，具体参考文字提示组件Tooltip

<jr-form>
    <jr-form-item cols=6>
        <jr-select source={source} />
    </jr-form-item>
    <jr-form-item cols=6>
        <jr-select source={source} disabled />
    </jr-form-item>
</jr-form>
var component = new JRUI.Component({
    template: template,
    data: {
        source: [
            {name: '选项1'},
            {name: '选项2'},
            {name: '选项3（禁用）', disabled: true},
            {name: '选项4（禁用）', disabled: true, tip: 'tip'},
            {name: '选项5（禁用）', disabled: true, tip: 'tip', placement: 'bottom'}
        ]
    }
});

分隔线

<jr-form>
    <jr-form-item cols=12>
        <jr-select source={source} />
    </jr-form-item>
</jr-form>
var component = new JRUI.Component({
    template: template,
    data: {
        source: [
            {name: '选项1'},
            {name: '选项2'},
            {divider: true},
            {name: '选项3（禁用）', disabled: true}
        ]
    }
});

设置或取消默认项

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

<jr-form>
    <jr-form-item cols=6>
        <jr-select source={source} placeholder="全部" />
    </jr-form-item>
    <jr-form-item cols=6>
        <jr-select source={source} placeholder="" />
    </jr-form-item>
</jr-form>
var component = new JRUI.Component({
    template: template,
    data: {
        source: [
            {name: '选项1'},
            {name: '选项2'},
            {name: '选项3'}
        ]
    }
});

远程数据

<jr-select service={@(this.service)} value="2" />
var component = new JRUI.Component({
    template: template,
    service: {
        key:'searchValue',
        getList: function(params, success) {
            this.request({
                url: '../../data/list.json',
                method: 'get',
                type: 'json',
                data: params,
                success: function(json) {
                     this.$update('source', json.result);
                 }.bind(this)
            });
        }
    }
});

数据绑定

<jr-select source={source} selected={selected} value={value} /> 当前选择项：{selected ? selected.name : 'undefined'}，当前选择值：{value || 'undefined'}
var component = new JRUI.Component({
    template: template,
    data: {
        source: [
            {id: 1, name: '选项1'},
            {id: 2, name: '选项2'},
            {id: 3, name: '选项3'}
        ]
    }
});

事件

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

<jr-select 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 JRUI.Component({
    template: template,
    data: {
        source: [
            {name: '选项1'},
            {name: '选项2'},
            {name: '选项3'}
        ]
    }
});

综合示例

<div class=g-row>
    <jr-button title="是否多选" on-click={this.toggleMultiple(multiple)}/>
    {multiple?'true:可多选':'false:不可多选'}
</div>
<div class=g-row>
    <jr-button title="是否有全选" on-click={this.toggleCanSelectAll(canSelectAll)}/>
    {canSelectAll?'true:有':'false:无'}
</div>
<div class=g-row>
    <jr-button title="是否选中关闭" on-click={this.toggleSelectedClose(selectedClose)}/>
    {canSelectAll?'true:有':'false:无'}
</div>
<div class=g-row>
    展示字段分隔符：
    <jr-input value={showSeparator}/>
    value分隔符：
    <jr-input value={separator}/>
</div>
<div class=g-row>
    最多展示多少个选项：
    <jr-input value={limit}/>
</div>
<div class=g-row>
    <jr-button title="是否可搜索" on-click={this.toggleCanSearch(canSearch)}/>
    {canSearch?'true:可搜索':'false:不可搜索'}
</div>
<div class=g-row>
    <jr-button title="区分大小写" on-click={this.toggleSensitive(isCaseSensitive)}/>
    {isCaseSensitive?'true:区分大小写':'false:不区分大小写'}
</div>
<jr-select source={source} multiple={multiple} canSearch={canSearch}
            showSeparator={showSeparator} separator={separator}
            selectedClose={selectedClose} canSelectAll={canSelectAll}
            isCaseSensitive={isCaseSensitive} searchInputPlaceholder="请输入"
            value={value} limit={limit}/>
<div class=g-row>
    选中值：{value}
</div>
var component = new JRUI.Component({
    template: template,
    data: {
        multiple: true,
        separator: ',',
        showSeparator: '、',
        selectedClose: false,
        canSelectAll: true,
        canSearch: true,
        isCaseSensitive: false,
        value: '',
        limit: null,
        source: [
            {name: '选项A'},{name: '选项a'},{name: '选项B'},{name: '选项b'},{name: '选项C'},{name: '选项c'},
            {name: '选项D'},{name: '选项d'},{name: '选项E'},{name: '选项e'},{name: '选项F'},{name: '选项f'},
            {name: '选项G'},{name: '选项g'},{name: '选项H'},{name: '选项h'},{name: '选项I'},{name: '选项i'},
            {name: '选项J'},{name: '选项j'},{name: '选项K'},{name: '选项k'},{name: '选项L'},{name: '选项l'},
            {name: '选项M'},{name: '选项m'},{name: '选项N'},{name: '选项n'},{name: '选项O'},{name: '选项o'},
            {name: '选项P'},{name: '选项p'},{name: '选项Q'},{name: '选项q'},{name: '选项R'},{name: '选项r'},
            {name: '选项S'},{name: '选项s'},{name: '选项T'},{name: '选项t'},{name: '选项U'},{name: '选项u'},
            {name: '选项V'},{name: '选项v'},{name: '选项W'},{name: '选项w'},{name: '选项X'},{name: '选项x'},
            {name: '选项Y'},{name: '选项y'},{name: '选项Z'}
        ]
    },
    toggleSelectedClose: function(selectedClose){
        this.data.selectedClose = !selectedClose;
    },
    toggleCanSelectAll: function(canSelectAll){
        this.data.canSelectAll = !canSelectAll;
    },
    toggleMultiple: function(multiple){
        this.data.multiple = !multiple;
    },
    toggleCanSearch: function(CanSearch){
        this.data.canSearch = !CanSearch;
    },
    toggleSensitive: function(isCaseSensitive){
        this.data.isCaseSensitive = !isCaseSensitive;
    }
});

API

Classes

JRSelect

Constants

Dropdown

Select2 选择扩展

Functions

config()
select(item) 选择某一项(item) ⇒ void
getParams()

远程调用的时候需要传递的参数

Events

“change 选择项改变时触发”
“select 选择某一项时触发”

JRSelect

Kind: global class
Extend: Dropdown

new JRSelect()

Param Type Default Description
[options.data] object = 绑定属性
[options.data.source] Array.<object> [] <=> 数据源
[options.data.source[].name] string => 每项的内容
[options.data.source[].disabled] boolean false => 禁用此项
[options.data.source[].tip] string => 禁用此项显示的提示，如果没有则不显示
[options.data.source[].placement] string => 禁用此项显示提示的方向，默认下方
[options.data.filter] function => 如果传了该参数会对 source 数组的每一项 item 进行 filter(item) 返回 true 则显示，否则不显示
[options.data.source[].divider] boolean false => 设置此项为分隔线
[options.data.selected] object <=> 当前选择项
[options.data.value] string | number <=> 当前选择值
[options.data.key] string "id" => 数据项的键
[options.data.nameKey] string "name" => 数据项的name键
[options.data.placeholder] string "请选择" => 默认项的文字，如果placeholder为空并且没有选择项时，将会自动选中第一项。
[options.data.hideTip] boolean false => 是否显示校验错误信息
[options.data.required] boolean false => 是否必填
[options.data.readonly] boolean false => 是否只读
[options.data.disabled] boolean false => 是否禁用
[options.data.visible] boolean true => 是否显示
[options.data.class] string => 补充class
[options.data.service] object @=> 数据服务
[options.data.service.key] object => 下发的参数名称
[options.data.canSearch] boolean false => 是否可搜索
[options.data.isCaseSensitive] boolean false => 是否区分大小写
[options.data.noMatchText] boolean 无匹配项 => 搜索无结果文案
[options.data.delaySearch] Number 300 => 异步搜索的延迟
[options.data.maxShowCount] Number 1000 => 最大展示条数
[options.data.multiple] boolean false => 是否多选
[options.data.separator] string "," => 多选value分隔符
[options.data.selectedClose] boolean true => 多选时选中非全部和请选择项时 是否关闭
[options.data.canSelectAll] boolean false => 是否有全选
[options.data.size] string => 组件大小, sm/md/lg
[options.data.width] number => 组件宽度
[options.data.limit] number => 在选项过多的时候可能会有性能问题，limit 用来限制显示的数量

Select2 选择扩展

Kind: global constant

Author: sensen(rainforest92@126.com)

config()

Kind: global function
Access: protected

select(item) 选择某一项(item) ⇒ void

Kind: global function
Access: public

Param Type Description
item object 选择项

getParams()

远程调用的时候需要传递的参数

Kind: global function

“change 选择项改变时触发”

Kind: event emitted
Properties

Name Type Description
sender object 事件发送对象
selected object 改变后的选择项
key string 数据项的键
value string | number 改变后的选择值

“select 选择某一项时触发”

Kind: event emitted
Properties

Name Type Description
sender object 事件发送对象
selected object 当前选择项
← 单选组 开关 →