代码演示

基本形式

<jr-radio-group source={source} />
var component = new JRUI.Component({
    template: template,
    data: {
        source: [
            {name: '选项1'},
            {name: '选项2'},
            {name: '选项3'},
            {name: '选项4'},
            {name: '选项5'},
            {name: '选项6'}
        ]
    }
});

数据绑定

<jr-radio-group source={source} value={value} selected={selected} />
<div>value: {value}</div>
<div>selected: {selected ? JSON.stringify(selected) : ''}</div>
var component = new JRUI.Component({
    template: template,
    data: {
        source: [
            {id: 11, name: '选项1'},
            {id: 22, name: '选项2'},
            {id: 33, name: '选项3'},
        ]
    }
});

表单项

在表单中使用

<jr-form>
    <jr-form-item cols="12" title="用户名" hint="用户名的用途">
        <jr-radio-group source={source} />
    </jr-form-item>
</jr-form>
var component = new JRUI.Component({
    template: template,
    data: {
        source: [
            {name: '选项1'},
            {name: '选项2'},
            {name: '选项3'},
            {name: '选项4'},
            {name: '选项5'},
            {name: '选项6'}
        ]
    }
});

禁用组件

<jr-radio-group source={source} disabled />
var component = new JRUI.Component({
    template: template,
    data: {
        source: [
            {name: '选项1'},
            {name: '选项2'},
            {name: '选项3'},
            {name: '选项4'},
            {name: '选项5'},
            {name: '选项6'}
        ]
    }
});

远程数据

<jr-radio-group service={@(this.service)} />
var component = new JRUI.Component({
    template: template,
    service: {
        getList: function(params, success) {
            JRUI.ajax.request({
                url: '../data/list.json',
                method: 'get',
                type: 'json',
                data: params,
                success: success
            });
        }
    }
});

多行

<jr-radio-group source={source} block />
var component = new JRUI.Component({
    template: template,
    data: {
        source: [
            {name: '选项1'},
            {name: '选项2'},
            {name: '选项3'},
            {name: '选项4'},
            {name: '选项5'},
            {name: '选项6'}
        ]
    }
});

API

Classes

JRRadioGroup

Constants

SourceComponent

JRRadioGroup 输入扩展

Functions

config()
select(item) 选择某一(item) ⇒ void
validate() 根据required验证组件的值是否正确() ⇒ object

Events

“select 选择某一项时触发”

JRRadioGroup

Kind: global class
Extend: SourceComponent

new JRRadioGroup()

Param Type Default Description
[options.data] object = 绑定属性
[options.data.source] Array.<object> [] <=> 数据源
[options.data.nameKey] string "name" => 数据项的name键
[options.data.key] string "id" => 数据项的key键
[options.data.source[].name] string => 每项的内容
[options.data.selected] object <=> 当前选择的对象
[options.data.value] number | string <=> 当前选择的值
[options.data.block] boolean false => 多行显
[options.data.required] boolean false => 是否必选
[options.data.message] string => 验证错误提示
[options.data.hideTip] boolean false => 是否显示校验错误信息
[options.data.readonly] boolean false => 是否只读
[options.data.disabled] boolean false => 是否禁用
[options.data.visible] boolean true => 是否显
[options.data.class] string => 补充class
[options.service] object @=> 数据服务

SourceComponent

JRRadioGroup 输入扩展

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 选择

validate() 根据required验证组件的值是否正确() ⇒ object

Kind: global function
Returns: object - result 结果
Access: public

“select 选择某一项时触发”

Kind: event emitted
Properties

Name Type Description
sender object 事件发送对象
selected object 当前选择
← 多级选择 下拉选择 →