代码演示

基本形式

<jr-multi-select source={source} value={value} on-select={this.selected($event)} />
选择的是：{value}
var component = new JRUI.Component({
    template: template,
    data: {
        source: [
            {name: '节点1', id: 1, children: [
                {name: '节点1.1', id: 11},
                {name: '节点1.2', id: 12, children: [
                    {name: '节点1.2.1', id: 121, children: [
                        {name: '节点1.2.1.1', id: 1211, children: [
                            {name: '节点1.2.1.1.1', id: 12111},
                            {name: '节点1.2.1.1.2', id: 12112}
                            ]},
                        {name: '节点1.2.1.3', id: 1212},
                        {name: '节点1.2.1.3', id: 1213}
                        ]},
                    {name: '节点1.2.2', id: 122}
                ]},
                {name: '节点1.3', id: 13},
                {name: '节点1.4', id: 14},
            ]},
            {name: '节点2', id: 2},
            {name: '节点3', id: 3, children: [
                {name: '节点3.1', id: 31},
                {name: '节点3.2', id: 32}
            ]}
        ],
        value: '11'
    },
    selected: function(event) {
        console.log(event);
    }
});

允许勾选非末级（仅支持单选场景）

选择非末级时点击文本，如果只是想展开下一级请点击右侧箭头

<jr-multi-select source={source} value={value} on-select={this.selected($event)} onlyChild={onlyChild} />
选择的是：{value}
var component = new JRUI.Component({
    template: template,
    data: {
        source: [
            {name: '节点1', id: 1, children: [
                {name: '节点1.1', id: 11},
                {name: '节点1.2', id: 12, children: [
                    {name: '节点1.2.1', id: 121, children: [
                        {name: '节点1.2.1.1', id: 1211, children: [
                            {name: '节点1.2.1.1.1', id: 12111},
                            {name: '节点1.2.1.1.2', id: 12112}
                            ]},
                        {name: '节点1.2.1.3', id: 1212},
                        {name: '节点1.2.1.3', id: 1213}
                        ]},
                    {name: '节点1.2.2', id: 122}
                ]},
                {name: '节点1.3', id: 13},
                {name: '节点1.4', id: 14},
            ]},
            {name: '节点2', id: 2},
            {name: '节点3', id: 3, children: [
                {name: '节点3.1', id: 31},
                {name: '节点3.2', id: 32}
            ]}
        ],
        value: '',
        onlyChild: false
    },
    selected: function(event) {
        console.log(event);
    }
});

多选

<jr-multi-select source={source} multiple={multiple} value={value}  on-select={this.selected($event)} on-change={this.change($event)}/>
选择的是：{value}
var component = new JRUI.Component({
    template: template,
    data: {
        source: [
            {name: '节点1', id: 1, children: [
                {name: '节点1.1', id: 11},
                {name: '节点1.2', id: 12, children: [
                    {name: '节点1.2.1', id: 121, children: [
                        {name: '节点1.2.1.1', id: 1211, children: [
                            {name: '节点1.2.1.1.1', id: 12111},
                            {name: '节点1.2.1.1.2', id: 12112}
                            ]},
                        {name: '节点1.2.1.3', id: 1212},
                        {name: '节点1.2.1.3', id: 1213}
                        ]},
                    {name: '节点1.2.2', id: 122}
                ]},
                {name: '节点1.3', id: 13},
                {name: '节点1.4', id: 14},
            ]},
            {name: '节点2', id: 2},
            {name: '节点3', id: 3, children: [
                {name: '节点3.1', id: 31},
                {name: '节点3.2', id: 32}
            ]}
        ],
        value: '',
        multiple: true
    },
    selected: function(event) {
        console.log('selected',event);
    },
    change: function(event) {
        console.log('change',event);
    }
});

API

Classes

JRMultiSelect

Constants

Dropdown

JRMultiSelect 树型选择

Events

“value 改变时触发”
“select 选择某一项时触发”

JRMultiSelect

Kind: global class
Extend: Dropdown

new JRMultiSelect()

Param Type Default Description
[options.data] object = 绑定属性
[options.data.source] Array.<object> [] <=> 数据源
[options.data.source[].name] string => 每项的内容
[options.data.key] string "id" => 数据项的键
[options.data.nameKey] string "name" => 数据项的name键
[options.data.childKey] string "children" => 数据子项的键
[options.data.onlyChild] string true => 在单选模式下，是否只允许选中末级
[options.data.value] string null <=> 当前选择值
[options.data.selected] object <=> 当前选择项
[options.data.separator] string "," => 多选时value分隔符
[options.data.readonly] boolean false => 是否只读
[options.data.multiple] boolean false => 是否多选
[options.data.disabled] boolean false => 是否禁用
[options.data.visible] boolean true => 是否显示
[options.data.class] string => 补充class

JRMultiSelect 树型选择

Kind: global constant

Author: lilang

“value 改变时触发”

Kind: event emitted
Properties

Name Type Description
sender object 事件发送对象
value object 当前 value 的值

“select 选择某一项时触发”

Kind: event emitted
Properties

Name Type Description
sender object 事件发送对象
selected object 当前选择项
← 输入框 单选组 →