布局 - 表格 ui.table - 《nek-ui v0.5 组件文档》

代码演示
API
Classes
Events
UITable
- new UITable()
TableCol
- new TableCol()
TableTemplate
- new TableTemplate()
“sort 排序事件”
“checkchange 多选事件”
“[type] 自定义的操作事件”
“paging 分页事件”

代码演示

基本

<ui.table source={table.source}>
    <table.col name="title" key="title" />
    <table.col name="value" key="value" tip="I am tip"/>
</ui.table>

var component = new NEKUI.Component({
    template: template,
    data: {
        table: {
            source: []
        }
    },
    init: function() {
        this.data.table.source = [];
        for(var i = 0; i < 3; ++i) {
            this.data.table.source.push({
                title: 'test' + i,
                col1: '' + i,
                value: 10 * i
            });
        }
    }
});

无条纹

<ui.table strip={false} source={table.source} >
    <table.col name="title" key="title" />
    <table.col name="value" key="value" />
</ui.table>

var component = new NEKUI.Component({
    template: template,
    data: {
        table: {
            source: []
        }
    },
    init: function() {
        setTimeout(function() {
            this.data.table.source = [];
            for(var i = 0; i < 3; ++i) {
                this.data.table.source.push({
                    title: 'test' + i,
                    col1: '' + i,
                    value: 10 * i
                });
            }
            this.$update();
        }.bind(this), 200);
    }
});

过滤器

<ui.table source={table.source} >
    <table.col name="title" key="title" filter={this.titleFilter}/>
    <table.col name="value" key="value" />
</ui.table>

var component = new NEKUI.Component({
    template: template,
    data: {
        table: {
            source: []
        }
    },
    init: function() {
        setTimeout(function() {
            this.data.table.source = [];
            for(var i = 0; i < 3; ++i) {
                this.data.table.source.push({
                    title: 'test' + i,
                    col1: '' + i,
                    value: 10 * i
                });
            }
            this.$update();
        }.bind(this), 200);
    },
    titleFilter: function(val) {
        return '* ' + val + ' *';
    }
});

多级表头

<ui.table source={table.source} >
    <table.col name="title" key="title" width="100" />
    <table.col name="col1">
        <table.col name="col1.1">
            <table.col name="col1.1.2" key="value" width="160" />
            <table.col name="col1.1.3" key="value2" width="160" />
        </table.col>
        <table.col name="col1.2" key="value" width="160" />
    </table.col>
    <table.col name="value" key="value" width="200" />
</ui.table>

var component = new NEKUI.Component({
    template: template,
    data: {
        table: {
            source: []
        }
    },
    init: function() {
        this.data.table.source = [];
        for(var i = 0; i < 3; ++i) {
            this.data.table.source.push({
                title: 'test' + i,
                col1: '' + i,
                value: 10 * i,
                value2: 'test'
            });
        }
    }
});

悬浮表头和底部

控制表头和底部的悬浮需要对 scroll 事件进行监听，在默认的情况下，监听对象是 window，即页面的滚动。

如果页面布局比较特殊，需要指定监听的对象，则可以通过 scrollParent 指定会发生滚动的容器，如 scrollParent="#example"。

<ui.table
    stickyHeader
    stickyFooter
    stickyHeaderOffset=64
    stickyFooterOffset=0
    source={table.source} >
    <table.col name="title" key="title" width=500 />
    <table.col name="value" key="value" width=500 />
</ui.table>

var component = new NEKUI.Component({
    template: template,
    data: {
        table: {
            source: []
        }
    },
    init: function() {
        this.data.table.source = [];
        for(var i = 0; i < 20; ++i) {
            this.data.table.source.push({
                title: 'test' + i,
                col1: '' + i,
                value: 10 * i
            });
        }
    }
});

表头固定在表格顶部

<ui.table fixedHeader height=200 source={table.source}>
    <table.col name="title" key="title" />
    <table.col name="value" key="value" />
</ui.table>

var component = new NEKUI.Component({
    template: template,
    data: {
        table: {
            source: []
        }
    },
    init: function() {
        this.data.table.source = [];
        for(var i = 0; i < 20; ++i) {
            this.data.table.source.push({
                title: 'test' + i,
                col1: '' + i,
                value: 10 * i
            });
        }
    }
});

固定列

<ui.table fixedHeader height=200 source={table.source}>
    <table.col name="title" key="title" fixed/>
    <table.col name="col1" key="col1" />
    <table.col name="value" key="value" fixed="right"/>
</ui.table>

var component = new NEKUI.Component({
    template: template,
    data: {
        table: {
            source: []
        }
    },
    init: function() {
        this.data.table.source = [];
        for(var i = 0; i < 20; ++i) {
            this.data.table.source.push({
                title: 'test' + i,
                col1: '' + i,
                value: 10 * i
            });
        }
    }
});

自定义模版

通过 table.template 组件定义单元格和表头的模版，可以将模版内嵌到组件中，也可以将模版注入到组件的 template 属性。自定义模版中可以通过 emitEvent 的方法向上抛出事件。注意：内嵌形式的模版需要在每行的两端加上 {'、'} ，否则模版字符串的插值会无法传递给模版组件。

<ui.table source={table.source} on-itemclick={this.onItemClick($event)} on-headerclick={this.onHeaderClick($event)}>
    <table.col name="title" key="title">
        <table.template type="header">
            {'<a href={header.name+">+~!!@#$%^&*()"} on-click={this.emitEvent("headerclick", header)}>I am && {header.name}</a>'}
            {'<anchor/>'}
        </table.template>
        <table.template template={tdTpl} />
    </table.col>
    <table.col name="value" key="value" />
</ui.table>

var anchor = NEKUI.Component.extend({
    name: 'anchor',
    template: '<a>&nbsp;anchor</a>',
});
NEKUI.UITable.filter('txtFilter', function(val) {
    return val + '*';
});
var component = new NEKUI.Component({
    template: template,
    data: {
        table: {
            source: []
        },
        tdTpl: '<a on-click={this.emitEvent("itemclick", item, this)}>I am {item.title | txtFilter}</a>'
    },
    init: function() {
        this.data.table.source = [];
        for(var i = 0; i < 3; ++i) {
            this.data.table.source.push({
                title: 'test' + i,
                col1: '' + i,
                value: 10 * i
            });
        }
    },
    onItemClick: function(e) {
        console.log(e);
    },
    onHeaderClick: function(e) {
        console.log(e);
    }
});

自定义行样式

通过设置 item.trClass 或 item.trStyle 修改每一行的样式。

<ui.table stickyHeader source={table.source}>
    <table.col name="title" key="title" />
    <table.col name="value" key="value" />
</ui.table>

var component = new NEKUI.Component({
    template: template,
    data: {
        table: {
            source: []
        }
    },
    init: function() {
        var colors = ['#FFBC07', '#E89406', '#FF8306', '#E85706', '#FF3B07'];
        this.data.table.source = [];
        for(var i = 0; i < 5; ++i) {
            this.data.table.source.push({
                title: 'test' + i,
                col1: '' + i,
                value: 10 * i,
                trStyle: 'background-color:' + colors[i]
            });
        }
    }
});

排序

没有实际的排序效果，请查看 console 打印的事件对象。

<ui.table source={table.source} sorting={table.sorting} on-sort={this.onSort($event)}>
    <table.col name="title" key="title" sortable/>
    <table.col name="value" key="value" sortable/>
</ui.table>

var component = new NEKUI.Component({
    template: template,
    data: {
        table: {
            source: [],
            sorting: {
                key: 'title',
                isAsc: 0
            }
        }
    },
    init: function() {
        this.data.table.source = [];
        for(var i = 0; i < 3; ++i) {
            this.data.table.source.push({
                title: 'test' + i,
                col1: '' + i,
                value: 10 * i
            });
        }
    },
    onSort: function(e) {
        console.log(e);
    }
});

分页

分页的配置参考分页 Pager 。

<ui.table stickyFooter source={table.source} paging={table.paging} on-paging={this.onPaging($event)}>
    <table.col name="title" key="title" />
    <table.col name="value" key="value" />
</ui.table>

var component = new NEKUI.Component({
    template: template,
    data: {
        table: {
            source: [],
            paging: {
                pageSize: 10,
                sumTotal: 100,
                current: 1
            }
        }
    },
    init: function() {
        this.data.table.source = [];
        for(var i = 0; i < 20; ++i) {
            this.data.table.source.push({
                title: 'test' + i,
                col1: '' + i,
                value: 10 * i
            });
        }
    },
    onPaging: function(e) {
        console.log(e);
    }
});

多选

<check
    name="全选"
    checked={checkAllStatus}
/>
<ui.table source={table.source} on-checkchange={this.onCheck($event)}>
    <table.col name="title" key="title" type="check" />
    <table.col name="value" key="value" />
</ui.table>

var component = new NEKUI.Component({
    template: template,
    computed: {
        checkAllStatus: {
            get: function() {
                var checkedList = this.data.table.source.filter(function(item) {
                    return item._checked;
                });
                return checkedList.length === this.data.table.source.length ? true :
                                                    checkedList.length > 0 ? null :
                                                                            false;
            },
            set: function(val) {
                if(val !== null) {
                    this.data.table.source.forEach(function(item) {
                        item._checked = !!val;
                    });
                }
            }
        }
    },
    data: {
        table: {
            source: []
        }
    },
    init: function() {
        this.data.table.source = [];
        for(var i = 0; i < 3; ++i) {
            this.data.table.source.push({
                title: 'test' + i,
                col1: '' + i,
                value: 10 * i
            });
        }
    },
    onCheck: function(e) {
        console.log(e);
    }
});

数据配置

在进行数据配置时，模版的配置方式更为灵活。

template，模版字符串；
format，纯粹的字符串格式化，不对html进行渲染，保留插值语法；
formatter，通过函数返回模版字符串，适用于当模版需要动态运算生成的情景。加上前缀 header 成为 headerTemplate，headerFormat，headerFormatter，可作为表头的模版。

<ui.table
    fixedHeader
    columns={table.columns}
    sorting={table.sorting}
    paging={table.paging}
    source={table.source}
    loading={loading}
/>

var component = new NEKUI.Component({
    template: template,
    data: {
        table: {
            columns: [
                {
                    name: 'title',
                    key: 'title',
                    tip: 'tippppppp',
                    width: 120,
                    formatter: function(column, item) {
                        return '<a>I\'m ' + item.title + '</a>';
                    },
                },
                {
                    name: 'col1',
                    key: 'col1',
                    children: [
                        {
                            name: 'col1.2',
                            key: 'value',
                            format: '{item.value} %',
                            sortable: true
                        },
                        {
                            name: 'col1.3',
                            key: 'col1',
                            sortable: true
                        }
                    ]
                }
            ],
            sorting: {
                key: 'col1',
                isAsc: 0
            },
            paging: {
                pageSize: 10,
                sumTotal: 100,
                current: 1
            },
            source: []
        }
    },
    init: function() {
        this.data.table.source = [];
        for(var i = 0; i < 5; ++i) {
            this.data.table.source.push({
                title: 'test' + i,
                col1: '' + i,
                value: 10 * i
            });
        }
    }
});

空数据

<ui.table width=700>
    <table.col name="title" key="title" />
    <table.col name="value" key="value" />
</ui.table>

var component = new NEKUI.Component({
    template: template,
    data: {
        table: {
        }
    }
});

加载中

<ui.table width=700 loading={true}>
    <table.col name="title" key="title" />
    <table.col name="value" key="value" />
</ui.table>

var component = new NEKUI.Component({
    template: template,
    data: {
        table: {
        }
    }
});

特殊

由于组件内部有部分模版是使用字符串形式存储，只有在使用时才是进行解析，因此当页面对 Regular 的插值符号进行修改时，需要进行特殊处理。

为了向组件内部传递新修改的插值，需要在 Regular 下挂载两个新的属性 BEGIN， END。

Regular._BEGIN_ = '{{';
Regular._END_ = '}}';
Regular.config({
    BEGIN: Regular._BEGIN_,
    END: Regular._END_
});

API

Events

“sort 排序事件”
“checkchange 多选事件”
“[type] 自定义的操作事件”
“paging 分页事件”

UITable

Kind: global classExtend: Component

new UITable()

Param	Type	Description
[options.data]	`object`	= 绑定属性
[options.data.source]	`array`	=> 数据源
[options.data.paging]	`object`	=> 分页
[options.data.sorting]	`object`	=> 排序
[options.data.stickyHeader]	`boolean`	=> 将表头固定到页面顶部
[options.data.stickyFooter]	`boolean`	=> 将表格底部操作固定到页面底部
[options.data.fixedHeader]	`boolean`	=> 将表头固定到表格顶部
[options.data.lineClamp]	`number`	=> 单元格行数限制
[options.data.columns]	`array`	=> 列配置

TableCol

Kind: global classExtend: Component

new TableCol()

Param	Type	Description
[options.data]	`object`	= 绑定属性
[options.data.name]	`string`	=> 表头名称
[options.data.key]	`string`	=> 列属性字段
[options.data.tip]	`string`	=> 提示信息
[options.data.type]	`string`	=> 列内容的预设类型
[options.data.width]	`string`	=> 列宽
[options.data.tdClass]	`string`	=> 列内容样式
[options.data.thClass]	`string`	=> 表头样式
[options.data.sortable]	`boolean`	=> 可排序
[options.data.children]	`string`	=> 子表头
[options.data.fixed]	`boolean` \| `string`	=> 列固定开关，默认left为做固定，right为右固定
[options.data.template]	`string`	=> 列内容模版

TableTemplate

Kind: global classExtend: Component

new TableTemplate()

Param	Type	Default	Description
[options.data]	`object`		= 绑定属性
[options.data.type]	`string`	`"\"content\""`	=> 模版类型, header, content

“sort 排序事件”

Kind: event emittedProperties

Name	Type	Description
sender	`object`	事件来源
asc	`boolean`	是否升序
column	`object`	目标列
columnIndex	`number`	目标列序号
key	`string`	排序字段
sorting	`object`	排序设置对象

“checkchange 多选事件”

Kind: event emittedProperties

Name	Type	Description
sender	`object`	事件来源
checked	`boolean`	是否选中
item	`object`	操作对象
checkedEvent	`object`	多选事件对象源

“[type] 自定义的操作事件”

Kind: event emittedProperties

Name	Type	Description
sender	`object`	事件来源
custom	`boolean`	自定义事件标识
param	`array`	自定义事件所带的参数

“paging 分页事件”

Kind: event emittedProperties

Name	Type	Description
sender	`object`	事件来源
current	`number`	事件来源
paging	`object`	分页对象