多级选择2 Select2Group

示例

基本形式

<select2Group source={source} depth=3 />

var component = new RGUI.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: '车辆工程'}
                ]}
            ]}
        ]
    }
});

禁用某一项，禁用组件

<p><select2Group source={source} depth=3 /></p>
<p><select2Group source={source} depth=3 disabled /></p>

var component = new RGUI.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}
                ]}
            ]}
        ]
    }
});

设置默认项

<select2Group source={source} depth=3 placeholders={['学科门类', '一级学科', '二级学科']} />

var component = new RGUI.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: '车辆工程'}
                ]}
            ]}
        ]
    }
});

远程数据

待完成……

<select2Group service={@(this.service)} depth=3 />

var component = new RGUI.Component({
    template: template,
    service: {
        getList: function(params, success) {
            RGUI.ajax.request({
                url: '../data/tree3.json',
                method: 'get',
                type: 'json',
                data: params,
                success: success
            });
        }
    }
});

数据绑定

<select2Group source={source} depth=3 on-select={this._onSelect($event)} />
<p>当前的选择项：{selectedTexts}</p>

var component = new RGUI.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);
    }
});

事件

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

<select2Group source={source} depth=3
    on-select={console.log('on-select:', '$event:', $event)}
    on-change={console.log('on-change:', '$event:', $event)} />

var component = new RGUI.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: '车辆工程'}
                ]}
            ]}
        ]
    }
});

行政区（部分）示例

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

<select2Group source={source} depth=3 key="name" on-select={this._onSelect($event)} ref="select2Group" />

var component = new RGUI.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

Class

Select2Group

继承自Component。

Options

new Select2Group()

参数类型默认值数据流向描述
dataobject绑定属性
data.sourceobject[][]outer <=> inner数据源
data.source[].namestringouter => inner每项的内容
data.source[].disabledbooleanfalseouter => inner禁用此项
data.source[].dividerbooleanfalseouter => inner设置此项为分隔线
data.depthnumber1outer => inner层级数
data.selectedobjectouter <= inner最后的选择项
data.selectedsobject[][]outer <=> inner所有的选择项
data.valuesstring[]
number[]		[]outer <=> inner所有的选择值
data.keystring'id'outer => inner数据项的键
data.placeholdersstring[][]outer => inner默认项的文字
data.readonlybooleanfalseouter => inner是否只读
data.disabledbooleanfalseouter => inner是否禁用
data.visiblebooleantrueouter => inner是否显示
data.classstring''outer => inner补充class
serviceobjectouter @=> inner数据服务

Events

select2Group.$on('change')

最后的选择项改变时触发

属性类型描述
senderobject事件发送对象
selectedobject最后的选择项
selectedsobject所有的选择项
keystring数据项的键
valuesstring[]
number[]		所有的选择值

select2Group.$on('select')

选择某一项时触发

属性类型描述
senderobject事件发送对象
selectedobject当前选择项
levelobject当前选择的层级