智能商贸系统11-采购报表DataGrid GroupView和Highcharts

VIP文章 vi-vi-

于 2019-12-26 14:55:08 发布

阅读量219

点赞数

分类专栏： Java #SpringDataJpa 文章标签： datagridview java

本文链接：https://blog.csdn.net/vivid9527/article/details/103715094

版权

1、效果

采购报表使用DataGrid GroupView制作，重点是返回json格式的设置
图表使用Highcharts制作

2、前台代码

2.1、jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/WEB-INF/views/head.jsp" %>
<html>
<head>
    <title>Title</title>
    <%--引入EasyUI的datagrid-groupview扩展--%>
    <script type="text/javascript" src="/easyui/plugins/datagrid-groupview.js"></script>
    <%--引入Highcharts支持的JS文件--%>
    <script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
    <script src="https://code.highcharts.com.cn/highcharts/highcharts-3d.js"></script>
    <script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
    <script src="https://code.highcharts.com.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
    <script src="https://code.highcharts.com.cn/highcharts/modules/oldie.js"></script>
    <script src="https://code.highcharts.com.cn/highcharts/modules/cylinder.js"></script>
    <script src="https://code.highcharts.com.cn/highcharts/themes/sand-signika.js"></script>
    <%--引入当前页面对应的js文件--%>
    <script src="/js/model/purchasebillitem.js"></script>
</head>
<body>
<table id="purchasebillitemGrid">
</table>
<%--grid顶部工具栏--%>
<div id="gridTools" style="padding:5px;height:auto">
    <%--查询条--%>
    <form id="searchForm">
        日期: <input name="beginDate" class="easyui-datebox" style="width:150px">
        - &nbsp;<input name="endDate" class="easyui-datebox" style="width:150px">
        状态: <select class="easyui-combobox" name="status" panelHeight="auto" style="width:100px;">
        <option value="">--所有--</option>
        <option value="0">待审</option>
        <option value="1">已审</option>
        <option value="-1">作废</option>
    </select>
        分组:<select class="easyui-combobox" name="groupBy" panelHeight="auto" style="width:100px;">
            <option value="">--所有--</option>
            <option value="0">供应商</option>
            <option value="1">采购员</option>
            <option value="2">月份</option>
        </select>
        <a href="#" data-method="search" class="easyui-linkbutton" iconCls="icon-search">查询</a>
        <span style="color: darkblue;font-size: 16px">&ensp;&ensp;图表:</span>
        <a href="#" data-method="chart3d" class="easyui-linkbutton" iconCls="icon-3dpie">3D饼图</a>
        <a href="#" data-method="chart2d" class="easyui-linkbutton" iconCls="icon-2dpie">2D饼图</a>
        <a href="#" data-method="chartZhu3d" class="easyui-linkbutton" iconCls="icon-3dbar">3D柱状图</a>
        <a href="#" data-method="chartZhu2d" class="easyui-linkbutton" iconCls="icon-2dbar">2D柱状图</a>
    </form>
</div>

<%--饼状图--%>
<div id="chartDialog" class="easyui-dialog" title="采购订单明细" style="width:800px;"
     data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true">
    <div id

最低0.47元/天解锁文章

vi-vi-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
智能商贸系统11-采购报表DataGrid GroupView和Highcharts

1、效果采购报表使用DataGrid GroupView制作，重点是返回json格式的设置图表使用Highcharts制作2、前台代码2.1、jsp<%@ page contentType="text/html;charset=UTF-8" language="java" %><%@include file="/WEB-INF/views/head.jsp" %...
复制链接

扫一扫