PivotTable.js百万级数据分析，jquery.table2excel.js根据页面表格导出JAVA

最新推荐文章于 2024-09-11 07:22:49 发布

两岁就很帅.

最新推荐文章于 2024-09-11 07:22:49 发布

阅读量4.7k

点赞数

分类专栏： PivotTable jquery.table2excel.js 文章标签： intellij idea

本文链接：https://blog.csdn.net/weixin_42302549/article/details/104631060

版权

PivotTable 同时被 2 个专栏收录

1 篇文章

订阅专栏

jquery.table2excel.js

1 篇文章

订阅专栏

1:PivotTable.js

是 JavaScript Pivo 表格 (又称为 Pivot网格，Pivot 图标，交叉表) 库，在 jQuery/jQueryUI 上带有拖拽功能。

PivotTable.js演示地址

PivotTable.js下载地址

jquery.table2excel.js下载地址

截图效果

2:根据表格导出Excel，页面图表导出图片

图片

3：引用PivotTable相关的JS文件，和jquery.table2excel.js文件

<script src="pivottable/js/highstock.js"></script>
<script src="pivottable/js/highcharts-more.js"></script>
<script src="pivottable/js/modules/treemap.js"></script>
<script src="pivottable/js/pivot.js" type="text/javascript"></script>
<script src="pivottable/js/handsontable.full.min.js" type="text/javascript"></script>
<script src="pivottable/js/novix.pivot.renderer.js"></script>
<script src="pivottable/js/hightchart_renderers.js"></script>
<script src="pivottable/js/d3.min.js"></script>
<script src="pivottable/js/plotly-basic-latest.min.js"></script>
<script src="pivottable/js/export_renderers.js"></script>
<script  src="pivottable/js/d3_renderers.js"></script>
</script> <script src="pivottable/js/plotly_renderers.js"></script>
<script src="${staticPath}vendors/jquery/js/jquery.table2excel.js">

4：JS代码添加一个DIV

<div class="diagramWrapper">
    <div id="output" class="pane"></div>
</div>

/**
 *初始化表单
 */
function initGridTable() {
    var loading = layer.load();
    var derivers = $.pivotUtilities.derivers;
    var renderers = $.extend(
        $.pivotUtilities.renderers,
        $.pivotUtilities.plotly_renderers,
        $.pivotUtilities.d3_renderers,
        $.pivotUtilities.export_renderers
    );
//这里说明一下我这边的JSON数据用的中文的KEY
    $.ajax({
        url: 填写自己的URL,
        data:getQueryParams("gridQueryParams") ,
        dataType: "json",
        timeout:900000,
        success: function(data){
            if("0"==data.code){
                layer.close(loading);
                $("#output").pivotUI(data.page.list, {
                    renderers: renderers,
                    rendererName: "Table Barchart"
                })
            }
        },
        error:function(e){
            console.log(e);
        }
    });
}

5：导出Excel

<button class="btn btn-sm btn-info" id="btn"><i class="fa fa-search"></i>导出 </button>

$(document).ready(function () {
    $("#btn").click(function(){
        $(".pvtTable").table2excel({
            exclude: ".noExl",
            name: "Excel Document Name",
            filename: "myFileName",
            exclude_img: true,
            exclude_links: true,
            exclude_inputs: true
        });
    });
});

6:后台代码，我这里采用的查询Solr数据库截取一部分。

/**
 * 根据页码和每页记录数，以及查询条件动态加载数据
 *
 * @param params 查询参数
 * @return 结果
 */
@SuppressWarnings("unchecked")
@RequestMapping(value = "ajaxList", method = {RequestMethod.GET, RequestMethod.POST})
@Log(logType = LogType.SELECT)
@RequiresMethodPermissions("list")
public R ajaxList(@RequestParam Map<String, Object> params, HttpServletRequest request) throws Exception {
    params.put("basePath", FriendSnsUtils.getBasePath(request));
    Page page = new Query<Map<String, Object>>(params).getPage();
    if (StringUtils.isStrEmpty(params.getOrDefault("dsWxIds", ""))
            || StringUtils.isStrEmpty(params.getOrDefault("startTime", ""))
            || StringUtils.isStrEmpty(params.getOrDefault("endTime", ""))) {
        page.setRecords(new ArrayList());
    } else {
        page.setSize(100);
        List<Map<String,Object>> mapList=iTbFriendDateAnalysisService.solrList(params);
        page.setRecords(mapList);
    }
    return R.ok().put("page", new PageUtils(page));
}