FlexSheet - exporting header rows
HTML
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.filter.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.sheet.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/interop/angular/wijmo.angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.xlsx.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.xlsx.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.xlsx.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<div ng-app="app" ng-controller="appCtrl" class="container">
<h1>FlexSheet</h1>
<h4>with mulitple column header rows</h4>
<div class="form-inline">
<input type="file"
id="importFile"
class="form-control"
accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />
<button class="btn btn-default" ng-click="loadFile()">Load</button>
<button class="btn btn-default" id="saveBtn" ng-click="save()">Save</button>
</div>
<br>
<wj-flex-sheet id="flex" control="ctx.flex" initialized="initialized(s)" allow-merging="AllHeaders" class="flexSheet">
<wj-sheet name="Bound 1" items-source="ctx.data"></wj-sheet>
<wj-sheet name="Bound 2" items-source="ctx.data2"></wj-sheet>
<wj-sheet name="Unbound"></wj-sheet>
</wj-flex-sheet>
</div>
CSS
.flexSheet {
height: 600px;
border: 2px solid #e0e0e0;
margin: 6px;
}
JavaScript
// define app, include Wijmo 5 directives
var app = angular.module('app', ['wj']);
// controller
app.controller('appCtrl', function($scope) {
$scope.ctx = {
flex: null,
data: getData(),
data2: getData2()
};
$scope.initialized = function(flexSheet) {
flexSheet.columnHeaders.rows[0].allowMerging = true;
flexSheet.columnHeaders.rows.push(new wijmo.grid.Row());
flexSheet.beginUpdate();
for (var i = 0; i < flexSheet.sheets.length; i++) {
flexSheet.sheets.selectedIndex = i;
if (i === 0){
flexSheet.columnHeaders.setCellData(0, 0, 'Column Header1');
flexSheet.columnHeaders.setCellData(0, 1, 'Column Header1');
flexSheet.columnHeaders.setCellData(0, 2, 'Column Header2');
flexSheet.columnHeaders.setCellData(0, 3, 'Column Header2');
flexSheet.columnHeaders.setCellData(0, 4, 'Column Header2');
}
if (i === 1){
flexSheet.columnHeaders.setCellData(0, 0, 'Sheet2 Column Header1');
flexSheet.columnHeaders.setCellData(0, 1, 'Sheet2 Column Header1');
flexSheet.columnHeaders.setCellData(0, 2, 'Sheet2 Column Header2');
flexSheet.columnHeaders.setCellData(0, 3, 'Sheet2 Column Header2');
flexSheet.columnHeaders.setCellData(0, 4, 'Sheet2 Column Header3');
flexSheet.columnHeaders.setCellData(0, 5, 'Sheet2 Column Header3');
}
}
// creating a 3rd Unbound sheet and manually populating cells
flexSheet.sheets.selectedIndex = 1;
var sel2 = [];
//var sel = new wijmo.grid.CellRange(1,0,4,1);
sel2[0] = new wijmo.grid.CellRange(1,0,4,1);
sel2[1] = new wijmo.grid.CellRange(5,0,8,1);
for(var i = 0; i < 2; i ++){
flexSheet.selection = sel2[i];
flexSheet.mergeRange();
}
//flexSheet.selection = sel2;
//flexSheet.mergeRange();
flexSheet.sheets.selectedIndex = 2;
// add data to Unbound sheet cells
var unboundData = getData();
//var cv = new...