ngx-ourpalm-table v2.1.10

ngx-ourpalm-table

基于angular5.x、bootstrap的表格控件，支持编程式和声明式列配置

Installation

npm install ngx-ourpalm-table --save

Demo(声明式配置) plnkr

<ourpalm-table [table]="table">
    <ourpalm-table-column [column]="{header: '全选', field: 'checkAll', checkbox: true}"></ourpalm-table-column>
    <ourpalm-table-column [column]="{header: '序号', field: 'number', rownumbers: true}"></ourpalm-table-column>
    <ourpalm-table-column [column]="{header: '姓名', field: 'name'}">
        <ng-template let-data="$row">
            {{data.name}}
        </ng-template>
    </ourpalm-table-column>
    <ourpalm-table-column [column]="{header: '年龄', field: 'age'}">
        <ng-template let-row="$row">
            {{row.age}}
        </ng-template>
    </ourpalm-table-column>
</ourpalm-table>

export class AppComponent {

    table: OurpalmTable;

    constructor() {
        this.table = new OurpalmTable({
            loadData: (table: OurpalmTable, callback: (page: Page) => {}) => {
                var start = (table.currentPage - 1) * table.pageSize + 1;
                var end = start + table.pageSize;
                end = end > 86 ? 86 : end;
                //构造服务器假数据
                var rows = [];
                for (; start < end; start++) {
                    rows.push({
                        name: `zhangsan${start}`,
                        age: start,
                        email: `zhangsan${start}@163.com`
                    });
                }

                setTimeout(function () {
                    callback({
                        total: 86,
                        rows: rows
                    });
                }, 300);
            }
        });
    }
}

Demo(编程式配置) plnkr

<ourpalm-table [table]="table"></ourpalm-table>

export class AppComponent {

    table: OurpalmTable;

    constructor() {
        this.table = new OurpalmTable({
            columns: [{
                header: '全选',
                checkbox: true
            }, {
                header: '序号',
                rownumbers: true
            }, {
                header: '姓名',
                field: 'name'
            }, {
                header: '年龄',
                field: 'age'
            }],
            loadData: (table: OurpalmTable, callback: (page: Page) => {}) => {
                var start = (table.currentPage - 1) * table.pageSize + 1;
                var end = start + table.pageSize;
                end = end > 86 ? 86 : end;
                //构造服务器假数据
                var rows = [];
                for (; start < end; start++) {
                    rows.push({
                        name: `zhangsan${start}`,
                        age: start,
                        email: `zhangsan${start}@163.com`
                    });
                }

                setTimeout(function () {
                    callback({
                        total: 86,
                        rows: rows
                    });
                }, 300);
            }
        });
    }
}

Demo(Card View)

<ourpalm-table [table]="table">
    <ourpalm-table-column
            [column]="{header: 'Select', field: 'checkAll', checkbox: true}"></ourpalm-table-column>
    <ourpalm-table-column
            [column]="{header: 'Number', field: 'number', rownumbers: true}"></ourpalm-table-column>
    <ourpalm-table-column [column]="{header: 'ID', field: 'ID'}">
        <ng-template let-row="$row">
            {{row.ID}}
        </ng-template>
    </ourpalm-table-column>
    <ourpalm-table-column [column]="{header: 'Price', field: 'Price', sort: true}">
        <ng-template let-row="$row">
            {{row.Price}}
        </ng-template>
    </ourpalm-table-column>
    <ourpalm-table-column [column]="{header: 'Cost', field: 'Cost'}">
        <ng-template let-row="$row">
            {{row.Cost}}
        </ng-template>
    </ourpalm-table-column>
    <ourpalm-table-column [column]="{header: 'Url', field: 'Url'}">
        <ng-template let-row="$row">
            {{row.Url}}
        </ng-template>
    </ourpalm-table-column>
    <ourpalm-table-column [column]="{header: 'Other', field: 'Other'}">
        <ng-template let-row="$row">
            {{row.Other}}
        </ng-template>
    </ourpalm-table-column>
    <ourpalm-table-rowview>
        <ng-template let-row="$row" let-index="$index">
            <div>
                <div style="display:inline-block;float:left;"><img [src]="row.Url"></div>
                <div style="text-align:left;padding-left:10px;display:inline-block;overflow:auto;">
                    <p>ID：{{row.ID}}</p>
                    <p>Price：{{row.Price}}</p>
                    <p>Cost：{{row.Cost}}</p>
                    <p style="overflow:auto">Other：{{row.Other}}</p>
                </div>
            </div>
        </ng-template>
    </ourpalm-table-rowview>
</ourpalm-table>

export class CardViewComponent {

    table: OurpalmTable;

    constructor(private http: Http) {
        this.table = new OurpalmTable({
            rowViewShowType: 'both',
            loadData: (table: OurpalmTable, callback: (page: Page) => {}) => {
                this.http
                    .get('http://rapapi.org/mockjsdata/3828/ngx-ourpalm-table/cardview.do')
                    .map((response) => response.json())
                    .subscribe((result) => {
                        console.log(result);
                        callback({
                            total: result.data.length,
                            rows: result.data
                        });
                    });
            }
        });
    }
}

表属性

列属性

右键菜单属性

方法

事件

全局配置

@NgModule({
    imports: [
        OurpalmTableModule.forRoot()
    ]
})
export class AppModule {

    constructor(private tableConfig: TableConfig) {
        this.tableConfig.config = {
            pageSize: 50,
            pageList: [50, 100, 200]
        }
    }
}

创建table

@Component({
    selector: 'dynamic-table',
    template: `
        <button (click)="log()">click event test</button>
        <button (click)="changeTable1()">table01</button>
        <button (click)="changeTable2()">table02</button>
        <ourpalm-table [table]="table"></ourpalm-table>
    `
})
export class DynamicTableComponent {

    table: OurpalmTable;

    constructor(private tableConfig: TableConfig) {

        //不继承全局配置
        this.table = new Table({
            cacheKey: 'table01',
            cachePageSize: true,
            cacheColumns: true,
            loadData: () => {
            }
        });

        //继承全局配置
        this.table = this.tableConfig.create({
            cacheKey: 'table01',
            cachePageSize: true,
            cacheColumns: true,
            pagePosition: 'both',
            loadData: () => {
            }
        });

    }
}