代码演示

基本形式

复选组 check.group - 图1

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

表单项

在表单中使用

复选组 check.group - 图2

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

禁用组件

复选组 check.group - 图3

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

多行

复选组 check.group - 图4

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

远程数据

复选组 check.group - 图5

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

全选

复选组 check.group - 图6

  1. <check name="全选" checked={checkedAll} on-check={this._checkAll($event)} />
    <check.group source={source} />
  1. var component = new NEKUI.Component({
    template: template,
    data: {
    source: [
    {name: '选项1', id: 1},
    {name: '选项2', id: 2},
    {name: '选项3', id: 3},
    {name: '选项4', id: 4},
    {name: '选项5', id: 5},
    {name: '选项6', id: 6}
    ]
    },
    computed: {
    checkedAll: function() {
    var source = this.data.source;
    return source.filter(function(item) {
    return item.checked;
    }).length === source.length;
    }
    },
    _checkAll: function(event) {
    this.data.source.forEach(function(d) {
    d.checked = !!event.checked;
    })
    },
    });

API

Classes

Functions

CheckGroup

Kind: global classExtend: CheckGroup

new CheckGroup()

ParamTypeDefaultDescription
[options.data]object= 绑定属性
[options.data.source]Array.<object>[]<=> 数据源
[options.data.value]string"''"<=> 选择的值,separator间隔的id值
[options.data.source[].name]string"[]"=> 每项的内容
[options.data.key]string"id"=> 数据项的键
[options.data.separator]string"','"=> value的分割符号
[options.data.nameKey]string"name"=> 数据项的name键
[options.data.min]number=> 最少选几项
[options.data.max]number=> 最多选几项
[options.data.required]boolean=> 是否必选
[options.data.message]string=> 校验错误提示信息
[options.data.hideTip]booleanfalse=> 是否显示校验错误信息
[options.data.block]booleanfalse=> 多行显示
[options.data.readonly]booleanfalse=> 是否只读
[options.data.disabled]booleanfalse=> 是否禁用
[options.data.visible]booleantrue=> 是否显示
[options.data.class]string=> 补充class
[options.service]object@=> 数据服务

config()

Kind: global functionAccess: protected