树型视图 TreeView

示例

基本形式

<treeView source={source} />

var component = new RGUI.Component({
    template: template,
    data: {
        source: [
            {name: '节点1', children: [
                {name: '节点1.1'},
                {name: '节点1.2', children: [
                    {name: '节点1.2.1'},
                    {name: '节点1.2.2'}
                ]},
                {name: '节点1.3'},
                {name: '节点1.4'},
            ]},
            {name: '节点2'},
            {name: '节点3', children: [
                {name: '节点3.1'},
                {name: '节点3.2'}
            ]}
        ]
    }
});

禁用某一项，禁用组件

<div class="g-row">
    <div class="g-col g-col-6">
        <treeView source={source} />
    </div>
    <div class="g-col g-col-6">
        <treeView source={source} disabled />
    </div>
</div>

var component = new RGUI.Component({
    template: template,
    data: {
        source: [
            {name: '节点1', children: [
                {name: '节点1.1'},
                {name: '节点1.2', disabled: true, children: [
                    {name: '节点1.2.1'},
                    {name: '节点1.2.2'}
                ]},
                {name: '节点1.3', disabled: true},
                {name: '节点1.4'},
            ]},
            {name: '节点2', disabled: true},
            {name: '节点3', children: [
                {name: '节点3.1'},
                {name: '节点3.2'}
            ]}
        ]
    }
});

分隔线

<treeView source={source} />

var component = new RGUI.Component({
    template: template,
    data: {
        source: [
            {name: '节点1', children: [
                {name: '节点1.1'},
                {name: '节点1.2', disabled: true, children: [
                    {name: '节点1.2.1'},
                    {name: '节点1.2.2'}
                ]},
                {divider: true},
                {name: '节点1.3', disabled: true},
                {name: '节点1.4'},
            ]},
            {name: '节点2', disabled: true},
            {divider: true},
            {name: '节点3', children: [
                {name: '节点3.1'},
                {name: '节点3.2'}
            ]}
        ]
    }
});

远程数据

<treeView service={@(this.service)} />

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

分级加载

待完成……

<treeView service={@(this.service)} hierarchical />

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

单项模板自定义

<treeView service={@(this.service)} hierarchical itemTemplate={@(this.itemTemplate)} />

var component = new RGUI.Component({
    template: template,
    itemTemplate: RGUI._.multiline(function(){/*
<i class="u-icon {item.type === 'directory' ? (item.open ? 'u-icon-folder-open' : 'u-icon-folder') : 'u-icon-file-text'}"></i> {item.name}
    */}),
    service: {
        getList: function(params, success) {
            RGUI.ajax.request({
                url: '../data/tree2.json',
                method: 'get',
                type: 'json',
                success: success
            });
        }
    }
});

API

Class

TreeView

继承自SourceComponent。

Options

new TreeView()

参数	类型	默认值	数据流向	描述
`data`	object			绑定属性
`data.source`	object[]	`[]`	outer <=> inner	数据源
`data.source[].name`	string		outer => inner	每项的内容
`data.source[].open`	boolean	`false`	outer => inner	此项为展开/收起状态
`data.source[].disabled`	boolean	`false`	outer => inner	禁用此项
`data.source[].divider`	boolean	`false`	outer => inner	设置此项为分隔线
`data.selected`	object	`null`	outer <=> inner	当前选择项。多选时无效。
`data.itemTemplate`	string	`null`	outer @=> inner	单项模板
`data.hierarchical`	boolean	`false`	outer @=> inner	是否分级动态加载，需要service
`data.readonly`	boolean	`false`	outer => inner	是否只读
`data.disabled`	boolean	`false`	outer => inner	是否禁用
`data.visible`	boolean	`true`	outer => inner	是否显示
`data.class`	string	`''`	outer => inner	补充class
`service`	object		outer @=> inner	数据服务

Methods

treeView.select(item)

选择某一项

参数	类型	默认值	描述
`item`	object		选择项
返回值	类型	描述
无返回值

treeView.toggle(item, open)

展开/收起某一项

参数	类型	默认值	描述
`item`	object		处理项
`open`	object		展开/收起状态。如果无此参数，则在两种状态之间切换。
返回值	类型	描述
无返回值

Inherited Methods

@deprecated treeView.$updateSource()

从service中更新数据源

参数	类型	默认值
无参数
返回值	类型	描述
`this`	SourceComponent

Events

treeView.$on('select')

选择某一项时触发

属性	类型	描述
`sender`	object	事件发送对象
`selected`	object	当前选择项

treeView.$on('toggle')

展开或收起某一项时触发

属性	类型	描述
`sender`	object	事件发送对象
`item`	object	处理项
`open`	boolean	展开/收起状态