多选组 CheckGroup

示例

基本形式

<checkGroup source={source} />

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

禁用组件

<checkGroup source={source} disabled />

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

多行

<checkGroup source={source} block />

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

远程数据

<checkGroup service={@(this.service)} />

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
            });
        }
    }
});

使用Check2

<check2Group source={source} />

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

全选

<label><input type="checkbox" class="u-check" r-model={checkedAll}> 全选</label>
<checkGroup source={source} />

var component = new RGUI.Component({
    template: template,
    data: {
        source: [
            {name: '选项1'},
            {name: '选项2'},
            {name: '选项3'},
            {name: '选项4'},
            {name: '选项5'},
            {name: '选项6'}
        ]
    },
    computed: {
        checkedAll: {
            get: function() {
                var source = this.data.source;
                return source.filter(function(item) {
                    return item.checked;
                }).length === source.length;
            },
            set: function(value) {
                this.data.source.forEach(function(item) {
                    item.checked = !!value;
                })
            }
        }
    }
});

API

Class

CheckGroup

继承自SourceComponent。

Options

new CheckGroup()

Inherited Methods

@deprecated checkGroup.$updateSource()

从service中更新数据源