你好,参考以下代码:
- import 'bootstrap.css';
- import '@grapecity/wijmo.styles/wijmo.css';
- import './styles.css';
- import * as wjGrid from '@grapecity/wijmo.grid';
- //
- document.readyState === 'complete' ? init() : window.onload = init;
- //
- function init() {
- //
- // generate some random data
- var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), products = 'Phones,Computers,Cameras,Stereos'.split(','), data = [];
- for (var i = 0; i < 200; i++) {
- data.push({
- id: i,
- country: countries[i % countries.length],
- product: products[i % products.length],
- sales: Math.random() * 10000 + "",
- expenses: Math.random() * 5000,
- });
- }
- //
- // show aggregates below the data
- var theGrid = new wjGrid.FlexGrid('#theGrid', {
- autoGenerateColumns: false,
- columns: [
- { binding: 'id', header: 'ID', width: 60, isReadOnly: true },
- { binding: 'country', header: 'Country' },
- { binding: 'product', header: 'Product' },
- { binding: 'sales', header: 'Sales'},
- { binding: 'expenses', header: 'Expenses', aggregate: 'Sum' }
- ],
- itemsSource: data,
- cellEditEnded: function(s,e){
- console.log(e);
- var col = e.col;
- if(s.columns[e.col].binding === 'sales'){
- for(let i=0; i<s.rows.length; i++){
- console.log(s.getCellData(i, col));
- }
- }
- // 计算结果放到这里:
- s.columnFooters.setCellData(0,col,"计算结果")
- }
- });
- theGrid.columnFooters.rows.push(new wjGrid.GroupRow());
- theGrid.bottomLeftCells.setCellData(0, 0, 'Σ');
- }
复制代码
示例地址:https://demo.grapecity.com.cn/wi ... Belowthedata/purejs
以上代码完整替换app.js即可看到效果。 |