表格 - nek-ui

代码演示

基本

<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 class
Extend: 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 class
Extend: 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 class
Extend: Component

new TableTemplate()

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

“sort 排序事件”

Kind: event emitted
Properties

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

“checkchange 多选事件”

Kind: event emitted
Properties

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

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

Kind: event emitted
Properties

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

“paging 分页事件”

Kind: event emitted
Properties

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

← 卡片

布局

表单

通知

导航

其它

代码演示

基本

无条纹

过滤器

多级表头

悬浮表头和底部

表头固定在表格顶部

固定列

自定义模版

自定义行样式

排序

分页

多选

数据配置

空数据

加载中

特殊

API

Classes

Events

UITable

new UITable()

TableCol

new TableCol()

TableTemplate

new TableTemplate()

“sort 排序事件”

“checkchange 多选事件”

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

“paging 分页事件”