<template>
<div class="container-fluid">
<div class="row">
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">用能单元</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">用能单元</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
</div>
<button type="button" class="btn btn-default">查询</button>
<button type="button" @click="save()" class="btn btn-default">导出</button>
</form>
</div>
<div class="row">
<wj-flex-grid
:itemsSource="data"
:initialized="initializeGrid">
<wj-flex-grid-column binding="id" header="ID" :width=50 :isReadOnly=true></wj-flex-grid-column>
<wj-flex-grid-column binding="country" header="Country" :isReadOnly=true></wj-flex-grid-column>
<wj-flex-grid-column binding="sales" header="Sales" format="n0" :isReadOnly=true></wj-flex-grid-column>
<wj-flex-grid-column binding="expenses" header="Expenses" :isReadOnly=true></wj-flex-grid-column>
<wj-flex-grid-column binding="overdue" header="Overdue" :isReadOnly=true></wj-flex-grid-column>
<wj-flex-grid-column binding="id1" header="ID1" :width=50 :isReadOnly=true></wj-flex-grid-column>
<wj-flex-grid-column binding="country1" header="Country1" :isReadOnly=true></wj-flex-grid-column>
<wj-flex-grid-column binding="sales1" header="Sales1" :isReadOnly=true></wj-flex-grid-column>
<wj-flex-grid-column binding="expenses1" header="Expenses1" :isReadOnly=true></wj-flex-grid-column>
<wj-flex-grid-column binding="overdue1" header="Overdue1" :isReadOnly=true></wj-flex-grid-column>
</wj-flex-grid>
<div id="pager" class="wj-control wj-content wj-pager">
<div class="wj-input-group">
<span class="wj-input-group-btn">
<button id="btnFirst" class="wj-btn wj-btn-default" type="button">
<span class="wj-glyph-left" style="margin-right: -4px;"></span>
<span class="wj-glyph-left"></span>
</button>
</span>
<span class="wj-input-group-btn">
<button id="btnPrev" class="wj-btn wj-btn-default" type="button">
<span class="wj-glyph-left"></span>
</button>
</span>
<input id="spanCurrent" class="wj-form-control" disabled type="text">
<span class="wj-input-group-btn">
<button id="btnNext" class="wj-btn wj-btn-default" type="button">
<span class="wj-glyph-right"></span>
</button>
</span>
<span class="wj-input-group-btn">
<button id="btnLast" class="wj-btn wj-btn-default" type="button">
<span class="wj-glyph-right"></span>
<span class="wj-glyph-right" style="margin-left: -4px;"></span>
</button>
</span>
</div>
</div>
</div>
</div>
</template>
<script>
import "@grapecity/wijmo.styles/wijmo.css";
import "bootstrap.css";
import Vue from "vue";
import '@grapecity/wijmo.vue2.olap';
import * as wjcOlap from '@grapecity/wijmo.olap';
import { WjGridModule } from "@grapecity/wijmo.vue2.grid";
import * as wjCore from '@grapecity/wijmo';
import * as wjcGrid from '@grapecity/wijmo.grid';
import '@grapecity/wijmo.vue2.input';
import * as wjcXlsx from '@grapecity/wijmo.xlsx';
import * as wjcGridXlsx from '@grapecity/wijmo.grid.xlsx';
import * as gridPdf from "@grapecity/wijmo.grid.pdf";
new Vue({
el: "#app",
data: {
data: null,
},
methods: {
initializeGrid: function(flex) {
this.data = this._getData();
this.flex = flex;
// custom rendering for headers and "Diff" columns
flex.formatItem.addHandler((s, e) => {
if (e.panel == s.cells) {
let col = s.columns[e.col];
if (col.binding == "sales") {
let diff = s.getCellData(e.row, e.col)
// format the cell
let html =
'<div class="diff-{cls}">' +
'<span style="font-size:75%">{val}</span> ' +
'<span style="font-size:120%" class="wj-glyph-{glyph}"></span>';
html = html.replace(
"{val}",
wjCore.Globalize.format(diff, col.format)
);
if (diff < 1000) {
html = html
.replace("{cls}", "down")
.replace("{glyph}", "down");
} else if (diff > 5000) {
html = html
.replace("{cls}", "up")
.replace("{glyph}", "up");
} else {
html = html
.replace("{cls}", "none")
.replace("{glyph}", "circle");
}
e.cell.innerHTML = html;
}
if (col.binding == "overdue1") {
let html1 ='<a href="javascript:void(0);" >详情</a>';
e.cell.innerHTML = html1;
}
}
});
},
_getData() {
// create some random data
let countries = 'US,Germany,UK,Japan,Italy,Greece,US,Germany,UK,Japan,Italy,Greece,US,Germany,UK,Japan,Italy,Greece,Greece,US,Germany,UK,Japan,Italy,Greece'.split(','),
data = [];
for (let i = 0; i < countries.length; i++) {
data.push({
id: i,
country: countries,
sales: Math.random() * 10000,
expenses: Math.random() * 5000,
overdue: '21',
id1: i,
country1: countries,
sales1: Math.random() * 10000,
expenses1: Math.random() * 5000,
overdue1: '详情'
});
}
// create a CollectionView with 20 items per page
let view = new wjCore.CollectionView(data, {
pageSize: 10,
pageChanged: updateCurrentPage
});
//
// update pager status
view.onPageChanged();
function updateCurrentPage() {
var curr = wjCore.format('Page {index:n0} of {cnt:n0}', {
index: view.pageIndex + 1,
cnt: view.pageCount
});
document.getElementById('spanCurrent').value = curr;
}
document.getElementById('pager').addEventListener('click', function(e) {
var btn = wjCore.closest(e.target, 'button');
var id = btn ? btn.id : '';
switch (id) {
case 'btnFirst':
view.moveToFirstPage();
break;
case 'btnPrev':
view.moveToPreviousPage();
break;
case 'btnNext':
view.moveToNextPage();
break;
case 'btnLast':
view.moveToLastPage();
break;
}
});
// done
return view;
},
save() {
wjcGridXlsx.FlexGridXlsxConverter.saveAsync(
this.flex,
{
includeColumnHeaders: true,
includeCellStyles: false,
formatItem: true? this._exportFormatItem: null
},
"FlexGrid.xlsx"
);
},
exportFormatItem: function(args) {
var p = args.panel,
row = args.row,
col = args.col,
xlsxCell = args.xlsxCell,
cell,
color;
if (p.cellType === wjcGrid.CellType.Cell) {
if (p.columns[col].binding === "color") {
//color = p.rows[row].dataItem['color'];
if (xlsxCell.value) {
if (!xlsxCell.style.font) {
xlsxCell.style.font = {};
}
xlsxCell.style.font.color = xlsxCell.value.toLowerCase();
}
} else if (
p.columns[col].binding === "active" &&
p.rows[row] instanceof wjcGrid.GroupRow
) {
cell = args.getFormattedCell();
xlsxCell.value = cell.textContent.trim();
xlsxCell.style.hAlign = wjcXlsx.HAlign.Left;
}
}
}
}
});
</script>
<style>
.wj-flexgrid {
max-height: 250px;
margin: 10px 0;
}
.wj-cell .v-center {
position: relative;
top: 50%;
transform: translateY(-50%);
white-space: pre-wrap;
}
.wj-cell:not(.wj-state-selected):not(.wj-state-multi-selected) .diff-none {
color: #d8b400;
}
.wj-cell:not(.wj-state-selected):not(.wj-state-multi-selected) .diff-up {
color: #4c8f00;
}
.wj-cell:not(.wj-state-selected):not(.wj-state-multi-selected) .diff-down {
color: #9f0000;
}
body {
margin-bottom: 20px;
}
</style> |