示例
限制合并
默认情况下，无论相邻单元格的内容如何，FlexGrid都将合并具有相同内容的单元格。
在此示例中，我们使用自定义合并管理器，仅在前一列中的单元格包含相同值时才垂直合并单元格。
import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './styles.css';
import * as wjGrid from '@grapecity/wijmo.grid';
import * as wjCore from '@grapecity/wijmo';
export class RestrictedMergeManager extends wjGrid.MergeManager {
constructor(flexGrid) {
super(flexGrid);
}
getMergedRange(p, r, c, clip = true) {
// create basic cell range
var rng = null;
// start with single cell
rng = new wjGrid.CellRange(r, c);
var pcol = c > 0 ? c - 1 : c;
// get reference values to use for merging
var val = p.getCellData(r, c, false);
var pval = p.getCellData(r, pcol, false);
// expand up
while (rng.row > 0 &&
p.getCellData(rng.row - 1, c, false) == val &&
p.getCellData(rng.row - 1, pcol, false) == pval) {
rng.row--;
}
// expand down
while (rng.row2 < p.rows.length - 1 &&
p.getCellData(rng.row2 + 1, c, false) == val &&
p.getCellData(rng.row2 + 1, pcol, false) == pval) {
rng.row2++;
}
// don't bother with single-cell ranges
if (rng.isSingleCell) {
rng = null;
}
// done
return rng;
}
}
//
document.readyState === 'complete' ? init() : window.onload = init;
//
function init() {
// create some random data
var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), customers = 'Paul Smith,Susan Johnson'.split(',');
let data = [];
for (var i = 0; i < 12; i++) {
data.push({
customer: customers[i % customers.length],
country: countries[i % countries.length],
downloads: Math.round(Math.random() * 20000),
sales: Math.random() * 5000,
expenses: Math.random() * 5000
});
}
// show the data in a grid
var theGrid = new wjGrid.FlexGrid('#theGrid', {
allowMerging: 'Cells',
autoGenerateColumns: false,
alternatingRowStep: 0,
columns: [
{ binding: 'country', header: 'Country', allowMerging: true },
{ binding: 'customer', header: 'Customer', allowMerging: true },
{ binding: 'downloads', header: 'Downloads' },
{ binding: 'sales', header: 'Sales' },
{ binding: 'expenses', header: 'Expenses' }
]
});
// apply the custom merge manager
theGrid.mergeManager = new RestrictedMergeManager(theGrid);
theGrid.itemsSource = new wjCore.CollectionView(data, {
sortDescriptions: ['customer', 'country']
});
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>GrapeCity WijmoFlexGrid Restricted Merging</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('./src/app');
</script>
</head>
<body>
<div class="container-fluid">
<div id="theGrid">
</div>
</div>
</body>
</html>
.wj-flexgrid {
max-height: 300px;
}
body {
margin-bottom: 24px;
}
import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './styles.css';
//
import * as wjCore from '@grapecity/wijmo';
import * as wjGrid from '@grapecity/wijmo.grid';
import { Component, enableProdMode, NgModule } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserModule } from '@angular/platform-browser';
import { WjGridModule } from '@grapecity/wijmo.angular2.grid';
class RestrictedMergeManager extends wjGrid.MergeManager {
constructor(flexGrid: wjGrid.FlexGrid) {
super(flexGrid);
}
getMergedRange(p: wjGrid.GridPanel, r: number, c: number, clip: boolean = true) {
// create basic cell range
var rng = null;
// start with single cell
rng = new wjGrid.CellRange(r, c);
var pcol = c > 0 ? c - 1 : c;
// get reference values to use for merging
var val = p.getCellData(r, c, false);
var pval = p.getCellData(r, pcol, false);
// expand up
while (rng.row > 0 &&
p.getCellData(rng.row - 1, c, false) == val &&
p.getCellData(rng.row - 1, pcol, false) == pval) {
rng.row--;
}
// expand down
while (rng.row2 < p.rows.length - 1 &&
p.getCellData(rng.row2 + 1, c, false) == val &&
p.getCellData(rng.row2 + 1, pcol, false) == pval) {
rng.row2++;
}
// don't bother with single-cell ranges
if (rng.isSingleCell) {
rng = null;
}
// done
return rng;
}
}
class DataItem {
customer: string;
country: string;
downloads: number;
sales: number;
expenses: number;
}
//
@Component({
selector: 'app-component',
templateUrl: 'src/app.component.html'
})
export class AppComponent {
data: wjCore.CollectionView;
constructor() {
this.data = new wjCore.CollectionView(this._getData(), {
sortDescriptions: ['customer', 'country']
});
}
onInitialized(flexGrid: wjGrid.FlexGrid) {
flexGrid.mergeManager = new RestrictedMergeManager(flexGrid);
}
private _getData(): DataItem[] {
// create some random data
var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
customers = 'Paul Smith,Susan Johnson'.split(',');
let data = [];
for (var i = 0; i < 12; i++) {
data.push({
customer: customers[i % customers.length],
country: countries[i % countries.length],
downloads: Math.round(Math.random() * 20000),
sales: Math.random() * 5000,
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);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>GrapeCity Wijmo FlexGrid Restricted Merging</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Polyfills -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.min.js"></script>
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.js"></script>
<script src="systemjs.config.js"></script>
<script>
// workaround to load 'rxjs/operators' from the rxjs bundle
System.import('rxjs').then(function (m) {
System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators));
System.import('./src/app.component');
});
</script>
</head>
<body>
<app-component></app-component>
</body>
</html>
<div class="container-fluid">
<wj-flex-grid #theGird [itemsSource]="data" [autoGenerateColumns]=false [alternatingRowStep]="0"
(initialized)="onInitialized(theGird)">
<wj-flex-grid-column [binding]="'country'" [header]="'Country'" [allowMerging]=true></wj-flex-grid-column>
<wj-flex-grid-column [binding]="'customer'" [header]="'Customer'" [allowMerging]=true></wj-flex-grid-column>
<wj-flex-grid-column [binding]="'downloads'" [header]="'Downloads'"></wj-flex-grid-column>
<wj-flex-grid-column [binding]="'sales'" [header]="'Sales'"></wj-flex-grid-column>
<wj-flex-grid-column [binding]="'expenses'" [header]="'Expenses'"></wj-flex-grid-column>
</wj-flex-grid>
</div>
.wj-flexgrid {
max-height: 300px;
}
body {
margin-bottom: 24px;
}
<template>
<div class="container-fluid">
<wj-flex-grid
:itemsSource="data"
:autoGenerateColumns="false"
:alternatingRowStep="0"
:initialized="onInitialized"
>
<wj-flex-grid-column :binding="'country'" :header="'Country'" :allowMerging="true"></wj-flex-grid-column>
<wj-flex-grid-column :binding="'customer'" :header="'Customer'" :allowMerging="true"></wj-flex-grid-column>
<wj-flex-grid-column :binding="'downloads'" :header="'Downloads'"></wj-flex-grid-column>
<wj-flex-grid-column :binding="'sales'" :header="'Sales'"></wj-flex-grid-column>
<wj-flex-grid-column :binding="'expenses'" :header="'Expenses'"></wj-flex-grid-column>
</wj-flex-grid>
</div>
</template>
<script>
import "@grapecity/wijmo.styles/wijmo.css";
import "bootstrap.css";
import Vue from "vue";
import * as wjCore from "@grapecity/wijmo";
import * as wjGrid from "@grapecity/wijmo.grid";
import "@grapecity/wijmo.vue2.grid";
var __extends =
(this && this.__extends) ||
(function() {
var extendStatics = function(d, b) {
extendStatics =
Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array &&
function(d, b) {
d.__proto__ = b;
}) ||
function(d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
};
return extendStatics(d, b);
};
return function(d, b) {
extendStatics(d, b);
function __() {
this.constructor = d;
}
d.prototype =
b === null
? Object.create(b)
: ((__.prototype = b.prototype), new __());
};
})();
var RestrictedMergeManager = (function(_super) {
__extends(RestrictedMergeManager, _super);
function RestrictedMergeManager(flexGrid) {
return _super.call(this, flexGrid) || this;
}
RestrictedMergeManager.prototype.getMergedRange = function(p, r, c, clip) {
if (clip === void 0) {
clip = true;
}
var rng = null;
rng = new wjGrid.CellRange(r, c);
var pcol = c > 0 ? c - 1 : c;
var val = p.getCellData(r, c, false);
var pval = p.getCellData(r, pcol, false);
while (
rng.row > 0 &&
p.getCellData(rng.row - 1, c, false) == val &&
p.getCellData(rng.row - 1, pcol, false) == pval
) {
rng.row--;
}
while (
rng.row2 < p.rows.length - 1 &&
p.getCellData(rng.row2 + 1, c, false) == val &&
p.getCellData(rng.row2 + 1, pcol, false) == pval
) {
rng.row2++;
}
if (rng.isSingleCell) {
rng = null;
}
return rng;
};
return RestrictedMergeManager;
})(wjGrid.MergeManager);
let App = Vue.extend({
name: "app",
data: function() {
return {
data: new wjCore.CollectionView(this.getData(), {
sortDescriptions: ["customer", "country"]
})
};
},
methods: {
getData: function() {
// create some random data
var countries = "US,Germany,UK,Japan,Italy,Greece".split(","),
customers = "Paul Smith,Susan Johnson".split(",");
let data = [];
for (var i = 0; i < 12; i++) {
data.push({
customer: customers[i % customers.length],
country: countries[i % countries.length],
downloads: Math.round(Math.random() * 20000),
sales: Math.random() * 5000,
expenses: Math.random() * 5000
});
}
return data;
},
onInitialized: function(flexGrid) {
flexGrid.mergeManager = new RestrictedMergeManager(flexGrid);
}
}
});
new Vue({ render: h => h(App) }).$mount("#app");
</script>
<style>
.wj-flexgrid {
max-height: 300px;
}
body {
margin-bottom: 24px;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AutoComplete</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('./src/app.vue');
</script>
</head>
<body>
<div id="app">
</div>
</body>
</html>
import "@grapecity/wijmo.styles/wijmo.css";
import "bootstrap.css";
import "./app.css";
//
import * as React from 'react';
import * as ReactDOM from 'react-dom';
//
import * as wjCore from "@grapecity/wijmo";
import * as wjcGrid from "@grapecity/wijmo.react.grid";
import * as wjGrid from '@grapecity/wijmo.grid';
class RestrictedMergeManager extends wjGrid.MergeManager {
constructor(flexGrid) {
super(flexGrid);
}
getMergedRange(p, r, c, clip = true) {
// create basic cell range
var rng = null;
// start with single cell
rng = new wjGrid.CellRange(r, c);
var pcol = c > 0 ? c - 1 : c;
// get reference values to use for merging
var val = p.getCellData(r, c, false);
var pval = p.getCellData(r, pcol, false);
// expand up
while (rng.row > 0 &&
p.getCellData(rng.row - 1, c, false) == val &&
p.getCellData(rng.row - 1, pcol, false) == pval) {
rng.row--;
}
// expand down
while (rng.row2 < p.rows.length - 1 &&
p.getCellData(rng.row2 + 1, c, false) == val &&
p.getCellData(rng.row2 + 1, pcol, false) == pval) {
rng.row2++;
}
// don't bother with single-cell ranges
if (rng.isSingleCell) {
rng = null;
}
// done
return rng;
}
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: null
};
}
componentDidMount() {
this.setState({
data: new wjCore.CollectionView(this.getData(), {
sortDescriptions: ["customer", "country"]
})
});
}
render() {
return <div className="container-fluid">
<wjcGrid.FlexGrid itemsSource={this.state.data} autoGenerateColumns={false} alternatingRowStep={0} initialized={this.onInitialized.bind(this)}>
<wjcGrid.FlexGridColumn binding="country" header="Country" allowMerging={true}></wjcGrid.FlexGridColumn>
<wjcGrid.FlexGridColumn binding="customer" header="Customer" allowMerging={true}></wjcGrid.FlexGridColumn>
<wjcGrid.FlexGridColumn binding="downloads" header="Downloads"></wjcGrid.FlexGridColumn>
<wjcGrid.FlexGridColumn binding="sales" header="Sales"></wjcGrid.FlexGridColumn>
<wjcGrid.FlexGridColumn binding="expenses" header="Expenses"></wjcGrid.FlexGridColumn>
</wjcGrid.FlexGrid>
</div>;
}
onInitialized(flexGrid) {
flexGrid.mergeManager = new RestrictedMergeManager(flexGrid);
}
getData() {
// create some random data
var countries = "US,Germany,UK,Japan,Italy,Greece".split(","), customers = "Paul Smith,Susan Johnson".split(",");
let data = [];
for (var i = 0; i < 12; i++) {
data.push({
customer: customers[i % customers.length],
country: countries[i % countries.length],
downloads: Math.round(Math.random() * 20000),
sales: Math.random() * 5000,
expenses: Math.random() * 5000
});
}
return data;
}
}
ReactDOM.render(<App />, document.getElementById('app'));
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Grapecity Wijmo OLAP Pivot Chart Overview</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('./src/app');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
.wj-flexgrid {
max-height: 300px;
}
body {
margin-bottom: 24px;
}
USA - International
Japan
South
Korea