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表格(可用于重置表格数值)