找回密码
 立即注册

QQ登录

只需一步,快速开始

1941901447

注册会员

3

主题

10

帖子

65

积分

注册会员

积分
65
最新发帖
1941901447
注册会员   /  发表于:2019-9-24 16:40  /   查看:4291  /  回复:4
wijmo分页导出的数据是否当前页的,但是我想导出所有的数据,怎么操作
代码怎么改

wjcGridXlsx.FlexGridXlsxConverter.saveAsync(
                this.flex,
                {
                    includeColumnHeaders: true,
                    includeCellStyles: false,
                    formatItem: this.customContent
                        ? this._exportFormatItem
                        : null
                },
                "FlexGrid.xlsx"
            );


4 个回复

倒序浏览
KevinChen讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于:2019-9-25 09:37:05
沙发
您好,要从前端导出所有数据,需要先把完整的数据源绑定到FlexGrid上,

在有分页CollectionView的情况下,可以通过替换CollectionView实例来实现绑定完整数据源的操作,

绑定完成后,再执行导出。可以参考示例:

https://demo.grapecity.com.cn/wi ... nding/Basics/purejs
回复 使用道具 举报
1941901447
注册会员   /  发表于:2019-9-25 15:53:42
板凳
KevinChen 发表于 2019-9-25 09:37
您好,要从前端导出所有数据,需要先把完整的数据源绑定到FlexGrid上,

在有分页CollectionView的情况下 ...

<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>
回复 使用道具 举报
1941901447
注册会员   /  发表于:2019-9-25 16:13:46
地板
KevinChen 发表于 2019-9-25 09:37
您好,要从前端导出所有数据,需要先把完整的数据源绑定到FlexGrid上,

在有分页CollectionView的情况下 ...

我不太明白
回复 使用道具 举报
KevinChen讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于:2019-9-25 18:27:17
5#
您好,这里仔细解释一下:

首先,从Wijmo导出数据到Excel是个纯前端的导出操作,因此如果表格涉及了分页,就只能导出当前页面的数据,没法导出未显示的数据了。

所以,您有两个方法可以实现导出所有数据:

1、给页面添加一个隐藏的div,初始化一个新的flexGrid,把完整的数据绑定到这个flexGrid上,然后从这个隐藏的flexGrid导出数据;

2、在导出数据时,把第一个flexGrid的带分页的collectionview先保存起来,然后取消分页,加载所有的数据,执行导出操作,导出完成后再恢复带分页的collectionView。

以上两种实现方式,第一种比较简单易操作,推荐您先尝试第一种。
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部