初识 wijmo-grid

Wijmo JS 的简单介绍

• Wijmo代表了新一代的JavaScript控件。它充分利用了最新的HTML5技术，支持旧版浏览器。wijmo是一组比以前更快速，更小且更易于使用的控件。
• Wijmo除了EcmaScript5外没有其他依赖项。我们可以在没有jQuery，jQueryUI或任何其他框架的情况下使用它。
• 更详细的介绍请参考wijmo官方文档。

wijmo-grid 行集合（以下示例均以angular语言为主）

• 基础表格示例

•  示例代码如下：

• app.component.html

<div class="container-fluid">

    <wj-flex-grid #flex
        (initialized)="initializeGrid(flex)"
        [headersVisibility]="'Column'"
        [allowMerging]="'Cells'" 
        [(itemsSource)]="data">
        <wj-flex-grid-column [header]="'NO'" [binding]="'id'" [width]=60 format="g" [allowMerging]=true></wj-flex-grid-column>
        <wj-flex-grid-column [header]="'Country'" [binding]="'country'" format="n2"></wj-flex-grid-column>
        <wj-flex-grid-column [header]="'Downloads'" [binding]="'downloads'" format="n2"></wj-flex-grid-column>
        <wj-flex-grid-column [header]="'Sales'" [binding]="'sales'" format="n2"></wj-flex-grid-column>
        <wj-flex-grid-column [header]="'Expenses'" [binding]="'expenses'" format="n2" [aggregate]="'Sum'"></wj-flex-grid-column>
    </wj-flex-grid>
</div>

• app.component.ts

import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './styles.css';
//
import { Component, enableProdMode, NgModule } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserModule } from '@angular/platform-browser';
import * as wjcGrid from '@grapecity/wijmo.grid';
import { WjGridModule } from '@grapecity/wijmo.angular2.grid';
import * as wjCore from '@grapecity/wijmo';


@Component({
  selector: 'app-component',
  templateUrl: 'src/app.component.html'
})
export class AppComponent {
    // @ViewChild('flex') flex: wjcGrid.FlexGrid;  //定义全局flex
    data: any[];

    // DataSvc will be passed by derived classes
    constructor() {
        this.data = this._getData();
    }

    //居中样式
    async centerCell(s: wjCore.EventArgs, e: wjcGrid.FormatItemEventArgs) {
        if (e.cell.children.length == 0) {
            e.cell.innerHTML = '<div>' + e.cell.innerHTML + '</div>';
            wjCore.setCss(e.cell, {
                display: 'table',
                tableLayout: 'fixed'
            });
            wjCore.setCss(e.cell.children[0], {
                display: 'table-cell',
                textAlign: 'center',
                verticalAlign: 'middle',
            });
        }
        // for (let i = 1; i <= 1000000; i++) {
        //   if (e.row === 5 * i - 1) {
        //     const cell = e.cell;
        //     const styleAttr = cell.getAttribute('style'); // 获取原有的style
        //     cell.setAttribute(
        //       'style',
        //       styleAttr +
        //       'border-right: none; background: #F5F6F7 !important; color: #333'
        //     );
        //   }
        // }

    }

    initializeGrid(flex: wjcGrid.FlexGrid) {

        // flex.columnHeaders.rows.push(new wjcGrid.Row()); // add a header row
        // flex.columnFooters.rows.push(new wjcGrid.Row()); // add a footer row
        // flex.bottomLeftCells.setCellData(0, 0, 'x'); // show some data on the first cell

        //添加额外行
        //行头 【columnHeaders】【push】
        var extraRow1 = new wjcGrid.Row();
        // extraRow1.allowMerging = true;  //允许额外添加行中相同属性的值合并
        var panel_header = flex.columnHeaders; 
        panel_header.rows.splice(0, 0, extraRow1);
        panel_header.setCellData(0, 1, '行头')

        //行尾 【columnFooters】【push】
        var extraRow2 = new wjcGrid.GroupRow();
        // extraRow2.allowMerging = true;
        var panel_footer = flex.columnFooters;    
        panel_footer.rows.splice(0, 0, extraRow2);
        panel_footer.setCellData(0, 0, '行尾')

        //任意行 【insert】
        var extraRow3 = new wjcGrid.Row();
        // extraRow3.allowMerging = true;
        flex.rows.insert(2, extraRow3);   
        flex.setCellData(2, 0, '任意行');
        flex.setCellData(2, 2, '888')

        // flex.allowMerging = wjcGrid.AllowMerging.All;    //允许所有相同项合并
        // flex.allowSorting = wjcGrid.AllowSorting.None;   //禁止wijmo表头自带的排序功能
        // flex.headersVisibility = 1; //隐藏列头。   与HTML中的 [headersVisibility]="'Column'"  属性相同
        flex.formatItem.addHandler(this.centerCell);  //居中
    }

    private _getData() {
        // generate some random data
        let countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
            data = [];
        for (let i = 0; i < 200; i++) {
            data.push({
                country: countries[i % countries.length],
                downloads: Math.round(Math.random() * 20000),
                sales: Math.random() * 10000,
                expenses: Math.random() * 5000
            });
        }
        return data;
    }
}
//
@NgModule({
  imports: [WjGridModule, BrowserModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {
}
//
enableProdMode();
// Bootstrap application with hash style navigation and global services.
platformBrowserDynamic().bootstrapModule(AppModule);

• styles.css

.wj-flexgrid {
    height: 200px; 
    margin: 10px 0;
  }
  body {
    margin-bottom: 20pt;
  }

• 额外添加行头【columnHeaders】

//行头 【columnHeaders】【push】
var extraRow1 = new wjcGrid.Row();
var panel_header = flex.columnHeaders;
panel_header.rows.splice(0, 0, extraRow1);
panel_header.setCellData(0, 1, '行头')

• 额外添加行尾【columnFooters】

//行尾 【columnFooters】【push】
var extraRow2 = new wjcGrid.GroupRow();
var panel_footer = flex.columnFooters;    
panel_footer.rows.splice(0, 0, extraRow2);
panel_footer.setCellData(0, 0, '行尾')

• 任意位置添加行

//任意行 【insert】
var extraRow3 = new wjcGrid.Row();
flex.rows.insert(2, extraRow3);   
flex.setCellData(2, 0, '任意行');
flex.setCellData(2, 2, '888')；

注意：

• 在wijmo-grid中添加【行头】和【行尾】是有内置方法的，即【columnHeaders】和【columnFooters】。
• 不管是添加【行头】还是【行尾】，在wijmo中都是通过 push 方法添加进去的。
• 但是在其他位置添加行的时候，push并不管用，此时只能借用 insert 方法进行添加。

动态添加wijmo-grid列

• 示例图如下：

• 关键代码如下：

flex.columns.clear();  //整个清除wijmo表格（可用于重置表格数值）

//动态添加表格
let column1 = new wjcGrid.Column({ binding: 'no', header: 'no', allowMerging: true } as wjcGrid.Column);
flex.columns.push(column1);
let column2 = new wjcGrid.Column({ binding: 'salesName', header: 'salesName'} as wjcGrid.Column);
flex.columns.push(column2);
let column3 = new wjcGrid.Column({ binding: 'type', header: 'type'} as wjcGrid.Column);
flex.columns.push(column3);

//等价于上面的代码
//动态创建列表
var showTitle = ['no', 'salesName', 'type'];
showTitle.forEach(key => {
let column = new wjcGrid.Column({ binding: key, header: key } as wjcGrid.Column);
flex.columns.push(column);
});

• allowMerging：合并相同项，在直观上实现图中类似 NO 列的样式

//ts文件
//允许所有相同项合并
flex.allowMerging = wjcGrid.AllowMerging.All;    

//HTML文件
[allowMerging]=true
//<wj-flex-grid-column [header]="'NO'" [binding]="'id'" [width]=60 format="g" [allowMerging]=true></wj-flex-grid-column>

• allowSorting ：禁止wijmo-grid中自带的排序功能

flex.allowSorting = wjcGrid.AllowSorting.None;   //禁止wijmo表头自带的排序功能

• headersVisibility：隐藏列头

//ts文件
flex.headersVisibility = 1; 
//隐藏列头。   与HTML中的 [headersVisibility]="'Column'"  属性相同

//HTML文件
//<wj-flex-grid #flex [headersVisibility]="'Column'"></wj-flex-grid>

• [aggregate]="'Sum'"  + GroupRow()     求和（一般应用在行尾）

//ts文件
var extraRow2 = new wjcGrid.GroupRow();
// extraRow2.allowMerging = true;
var panel_footer = flex.columnFooters;    
panel_footer.rows.splice(0, 0, extraRow2);
panel_footer.setCellData(0, 0, '行尾')

//HTML文件
//<wj-flex-grid-column [header]="'Expenses'" [binding]="'expenses'" format="n2" [aggregate]="'Sum'"></wj-flex-grid-column>

• .columns.clear()：清除wijmo表格

flex.columns.clear();  //整个清除wijmo表格（可用于重置表格数值）