代码演示

基本形式

联动选择 select.group - 图1

  1. <select.group source={source} depth=3 />
  1. var component = new NEKUI.Component({
        template: template,
        data: {
            source: [
                {name: '理学', children: [
                    {name: '物理学', children: [
                        {name: '理论物理'},
                        {name: '凝聚态物理'},
                        {name: '材料物理'}
                    ]},
                    {name: '数学', children: [
                        {name: '基础数学'},
                        {name: '计算数学'},
                        {name: '应用数学'}
                    ]},
                    {name: '化学'}
                ]},
                {name: '工学', children: [
                    {name: '计算机科学与技术', children: [
                        {name: '计算机系统结构'},
                        {name: '计算机软件与理论'},
                        {name: '计算机应用技术'}
                    ]},
                    {name: '软件工程'},
                    {name: '机械工程', children: [
                        {name: '机械制造及其自动化'},
                        {name: '机械电子工程'},
                        {name: '机械设计及理论'},
                        {name: '车辆工程'}
                    ]}
                ]}
            ]
        }
    });

表单项

在表单中使用

联动选择 select.group - 图2

  1. <ui.form>
        <form.item cols="12" title="用户名" hint="用户名的用途">
            <select.group source={source} depth=3 />
        </form.item>
    </ui.form>
  1. var component = new NEKUI.Component({
        template: template,
        data: {
            source: [
                {name: '理学', children: [
                    {name: '物理学', children: [
                        {name: '理论物理'},
                        {name: '凝聚态物理'},
                        {name: '材料物理'}
                    ]},
                    {name: '数学', children: [
                        {name: '基础数学'},
                        {name: '计算数学'},
                        {name: '应用数学'}
                    ]},
                    {name: '化学'}
                ]},
                {name: '工学', children: [
                    {name: '计算机科学与技术', children: [
                        {name: '计算机系统结构'},
                        {name: '计算机软件与理论'},
                        {name: '计算机应用技术'}
                    ]},
                    {name: '软件工程'},
                    {name: '机械工程', children: [
                        {name: '机械制造及其自动化'},
                        {name: '机械电子工程'},
                        {name: '机械设计及理论'},
                        {name: '车辆工程'}
                    ]}
                ]}
            ]
        }
    });

禁用某一项，禁用组件

联动选择 select.group - 图3

  1. <p><select.group source={source} depth=3 /></p>
    <p><select.group source={source} depth=3 disabled /></p>
  1. var component = new NEKUI.Component({
        template: template,
        data: {
            source: [
                {name: '理学', disabled: true, children: [
                    {name: '物理学', children: [
                        {name: '理论物理'},
                        {name: '凝聚态物理'},
                        {name: '材料物理'}
                    ]},
                    {name: '数学', children: [
                        {name: '基础数学'},
                        {name: '计算数学'},
                        {name: '应用数学'}
                    ]},
                    {name: '化学'}
                ]},
                {name: '工学', children: [
                    {name: '计算机科学与技术', children: [
                        {name: '计算机系统结构'},
                        {name: '计算机软件与理论', disabled: true},
                        {name: '计算机应用技术'}
                    ]},
                    {name: '软件工程', disabled: true},
                    {name: '机械工程', children: [
                        {name: '机械制造及其自动化'},
                        {name: '机械电子工程'},
                        {name: '机械设计及理论', disabled: true},
                        {name: '车辆工程', disabled: true}
                    ]}
                ]}
            ]
        }
    });

设置默认项

联动选择 select.group - 图4

  1. <select.group source={source} depth=3 placeholders={['学科门类', '一级学科', '二级学科']} />
  1. var component = new NEKUI.Component({
        template: template,
        data: {
            source: [
                {name: '理学', children: [
                    {name: '物理学', children: [
                        {name: '理论物理'},
                        {name: '凝聚态物理'},
                        {name: '材料物理'}
                    ]},
                    {name: '数学', children: [
                        {name: '基础数学'},
                        {name: '计算数学'},
                        {name: '应用数学'}
                    ]},
                    {name: '化学'}
                ]},
                {name: '工学', children: [
                    {name: '计算机科学与技术', children: [
                        {name: '计算机系统结构'},
                        {name: '计算机软件与理论'},
                        {name: '计算机应用技术'}
                    ]},
                    {name: '软件工程'},
                    {name: '机械工程', children: [
                        {name: '机械制造及其自动化'},
                        {name: '机械电子工程'},
                        {name: '机械设计及理论'},
                        {name: '车辆工程'}
                    ]}
                ]}
            ]
        }
    });

远程数据

待完成……

数据绑定

联动选择 select.group - 图5

  1. <select.group source={source} depth=3 on-select={this._onSelect($event)} />
    <p>当前的选择项：{selectedTexts}</p>
    <p>当前的选择值：{selectedValues}</p>
  1. var component = new NEKUI.Component({
        template: template,
        data: {
            source: [
                {name: '理学', children: [
                    {name: '物理学', children: [
                        {name: '理论物理'},
                        {name: '凝聚态物理'},
                        {name: '材料物理'}
                    ]},
                    {name: '数学', children: [
                        {name: '基础数学'},
                        {name: '计算数学'},
                        {name: '应用数学'}
                    ]},
                    {name: '化学'}
                ]},
                {name: '工学', children: [
                    {name: '计算机科学与技术', children: [
                        {name: '计算机系统结构'},
                        {name: '计算机软件与理论'},
                        {name: '计算机应用技术'}
                    ]},
                    {name: '软件工程'},
                    {name: '机械工程', children: [
                        {name: '机械制造及其自动化'},
                        {name: '机械电子工程'},
                        {name: '机械设计及理论'},
                        {name: '车辆工程'}
                    ]}
                ]}
            ],
            selecteds: []
        },
        _onSelect: function($event) {
            setTimeout(function() {
                this.data.selectedTexts = $event.selecteds.map(function(item) {
                    return item && item.name;
                }).join(' > ');
                this.$update();
            }.bind(this), 0);
        }
    });

事件

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

联动选择 select.group - 图6

  1. <select.group source={source} depth=3
        on-select={console.log('on-select:', '$event:', $event)}
        on-change={console.log('on-change:', '$event:', $event)} />
  1. var component = new NEKUI.Component({
        template: template,
        data: {
            source: [
                {name: '理学', children: [
                    {name: '物理学', children: [
                        {name: '理论物理'},
                        {name: '凝聚态物理'},
                        {name: '材料物理'}
                    ]},
                    {name: '数学', children: [
                        {name: '基础数学'},
                        {name: '计算数学'},
                        {name: '应用数学'}
                    ]},
                    {name: '化学'}
                ]},
                {name: '工学', children: [
                    {name: '计算机科学与技术', children: [
                        {name: '计算机系统结构'},
                        {name: '计算机软件与理论'},
                        {name: '计算机应用技术'}
                    ]},
                    {name: '软件工程'},
                    {name: '机械工程', children: [
                        {name: '机械制造及其自动化'},
                        {name: '机械电子工程'},
                        {name: '机械设计及理论'},
                        {name: '车辆工程'}
                    ]}
                ]}
            ]
        }
    });

行政区（部分）示例

该示例可以进行省市区三级的选择，并且处理了直辖市少一级的问题。

联动选择 select.group - 图7

  1. <select.group source={source} depth=3 on-select={this._onSelect($event)} ref="select.group" />
  1. var component = new NEKUI.Component({
        template: template,
        data: {
            source: [
                {name: '北京', children: [
                    {name: '北京', children: [
                        {name: '东城区'},
                        {name: '西城区'},
                        {name: '海淀区'},
                        {name: '朝阳区'},
                        {name: '丰台区'}
                    ]}
                ]},
                {name: '上海', children: [
                    {name: '上海', children: [
                        {name: '黄浦区'},
                        {name: '浦东新区'},
                        {name: '徐汇区'},
                        {name: '长宁区'}
                    ]}
                ]},
                {name: '浙江', children: [
                    {name: '杭州', children: [
                        {name: '上城区'},
                        {name: '下城区'},
                        {name: '江干区'},
                        {name: '西湖区'},
                        {name: '滨江区'}
                    ]},
                    {name: '宁波', children: [
                        {name: '海曙区'},
                        {name: '江东区'},
                        {name: '江北区'},
                        {name: '北仑区'},
                        {name: '镇海区'},
                        {name: '鄞州区'}
                    ]},
                    {name: '绍兴', children: [
                        {name: '越城区'},
                        {name: '柯桥区'},
                        {name: '上虞区'}
                    ]}
                ]},
                {name: '江苏', children: [
                    {name: '南京'},
                    {name: '苏州'}
                ]}
            ]
        },
        _onSelect: function($event) {
            if($event.level === 0) {
                var selected = $event.selected;
                if(selected && (selected.name === '北京' || selected.name === '上海'))
                    $event.sender.data.placeholders[1] = '';
                else
                    $event.sender.data.placeholders[1] = '请选择';
            }
        }
    });

API

Classes

Functions

Events

SelectGroup

Kind: global classExtend: Component

new SelectGroup()

ParamTypeDefaultDescription
[options.data]object= 绑定属性
[options.data.source]Array.<object>[]<=> 数据源
[options.data.source[].name]string=> 每项的内容
[options.data.source[].disabled]booleanfalse=> 禁用此项
[options.data.source[].divider]booleanfalse=> 设置此项为分隔线
[options.data.depth]number1=> 层级数
[options.data.required]boolean=> 是否必填
[options.data.selected]object[]<= 最后的选择项
[options.data.selecteds]Array.<object>[]<=> 所有的选择项
[options.data.values]Array.<string> | Array.<number>[]<=> 所有的选择值
[options.data.key]string"id"=> 数据项的键
[options.data.placeholders]Array.<string>[]=> 默认项的文字
[options.data.hideTip]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

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

Kind: global functionReturns: object - result 结果Access: public

“change 最后的选择项改变时触发”

Kind: event emittedProperties

NameTypeDescription
senderobject事件发送对象
selectedobject最后的选择项
selectedsobject所有的选择项
keystring数据项的键
valuesArray.<string> | Array.<number>所有的选择值

“select 选择某一项时触发”

Kind: event emittedProperties

NameTypeDescription
senderobject事件发送对象
selectedobject当前选择项
levelobject当前选择的层级