树型视图 - JR

基本形式

<jr-tree-view source={source} value={value}/>
<p>选择的是：{value}</p>

var component = new JRUI.Component({
    template: template,
    data: {
        source: [
            {name: '家居个护', children: [
                {name: '洗护日用'},
                {name: '居家用品', children: [
                    {name: '杯子'},
                    {name: '锅具刀具'}
                ]},
                {name: '家装家纺'},
                {name: '其他个护'},
            ]},
            {name: '母婴儿童'},
            {name: '美容彩妆', children: [
                {name: '护肤'},
                {name: '彩妆'}
            ]}
        ]
    }
});

selected, value和key

selected表示当前选择项，value表示当前选择值。key表示数据项的键，默认为'id'。

它们三者的关系如下：selected[key] == value。其中selected和value是联动的，当一项变化时会同时改变另一项。

*注意：暂时不支持value赋初始值。

<jr-form>
    <jr-col span=6>
        <jr-tree-view  source={source} selected={selected} />
    </jr-col>
    <jr-col span=6>
        <jr-tree-view  source={source} value={value} />
    </jr-col>
</jr-form>
<p>选择的分别是是: {selected.name} {value}</p>

var component = new JRUI.Component({
    template: template,
    data: {
        source: [
            {id: 1, name: '母婴儿童'},
            {id: 2, name: '美容彩妆'},
            {id: 3, name: '服饰鞋包'}
        ]
    },
    config: function() {
        this.data.selected = this.data.source[0];
    }
});

禁用某一项，禁用组件

<jr-row>
    <jr-col span=6>
        <jr-tree-view source={source} value={value} />
    </jr-col>
    <jr-col span=6>
        <jr-tree-view source={source} disabled />
    </jr-col>
</jr-row>
<p>选择的是：{value}</p>

var component = new JRUI.Component({
    template: template,
    data: {
        source: [{   
            name: '家居个护', 
            id: 1,
            children: [{
                name: '洗护日用',
                id: 11
            },{
                name: '居家用品',
                id:12,
                disabled: true,
                children: [
                {name: '杯子', id: 121},
                {name: '锅具刀具', id: 122}
            ]},{
                name: '家装家纺', 
                id: 13,
                disabled: true
            },{
                name: '其他个护',
                id: 14
            }]
        },{
            name: '母婴儿童', 
            id: 2,
            disabled: true
        },{
            name: '美容彩妆', 
            id: 3,
            children: [
                {name: '护肤', id: 31},
                {name: '彩妆', id: 32}
            ]
        }]
    }
});

分隔线

<jr-tree-view source={source} value={value} />
<p>选择的是：{value}</p>

var component = new JRUI.Component({
    template: template,
    data: {
        source: [
            {name: '家居个护', checked: true, children: [
                {name: '洗护日用'},
                {name: '居家用品', disabled: true, children: [
                    {name: '杯子'},
                    {name: '锅具刀具'}
                ]},
                {divider: true},
                {name: '家装家纺', disabled: true},
                {name: '其他个护'},
            ]},
            {name: '母婴儿童', disabled: true},
            {divider: true},
            {name: '美容彩妆', children: [
                {name: '护肤'},
                {name: '彩妆'}
            ]}
        ]
    }
});

API

TreeView

Kind: global class

TreeView

new TreeView()

Param	Type	Default	Description
[options.data]	`object`		= 绑定属性
[options.data.source]	`Array.<object>`	`[]`	<=> 数据源
[options.data.source[].name]	`string`		=> 每项的内容
[options.data.key]	`string`	`"id"`	=> 数据项的键
[options.data.childKey]	`string`	`"children"`	=> 数据子项的键
[options.data.source[].open]	`boolean`	`false`	=> 此项为展开/收起状态
[options.data.source[].checked]	`boolean`	`false`	=> 选中此项
[options.data.source[].disabled]	`boolean`	`false`	=> 禁用此项
[options.data.source[].divider]	`boolean`	`false`	=> 设置此项为分隔线
[options.data.value]	`string`	`null`	<=> 当前选择值
[options.data.selected]	`object`		<=> 当前选择项
[options.data.separator]	`string`	`","`	=> 多选时value分隔符
[options.data.multiple]	`boolean`	`false`	=> 是否多选
[options.data.readonly]	`boolean`	`false`	=> 是否只读
[options.data.disabled]	`boolean`	`false`	=> 是否禁用
[options.data.visible]	`boolean`	`true`	=> 是否显示
[options.data.class]	`string`		=> 补充class

“select 选择某一项时触发”

Kind: event emitted by TreeView
Properties

Name	Type	Description
sender	`object`	事件发送对象
selected	`object`	当前选择项

“toggle 展开或收起某一项时触发”