>本章介绍API数据源报表制作 [TOC] ### 一、数据源报表制作、新建数据库表(以student学生表为示例) #### 1、数据库表结构 ![](https://static.jeecg.com/upload/test/dataSource_1604995757499.jpg) ![](https://img.kancloud.cn/02/3a/023a6d50e79c95858fd9911bc0059c1f_803x26.png) #### 2、新增几条数据 ![](https://img.kancloud.cn/84/ce/84ce8d07a9453c454400a80bc6745f10_882x378.png) ![](https://img.kancloud.cn/02/3a/023a6d50e79c95858fd9911bc0059c1f_803x26.png) #### 3、新增后台api接口(必须为json格式) ``` 注意:必须为"示例1"所示的,并且数据不为空,且用data包裹起来,否则api解析不出来字 段 如果需要分页则需要传total(总页数),count(总条数)如"示例2",如果要想在浏览页面看到分页效果, 需要数据大于10条或者在设计页面设置每页显示条数 ``` 示例1: ``` { "data": [{ "ctotal": "125箱", "cname": "牛奶0", "cprice": "56", "riqi": "2021年08月11日", "id": 100, "dtotal": "1256箱", "tp": "7000", "ztotal": "589箱", "cnum": "每箱12瓶", "dId": "1" }] } ``` 示例2: ``` { "data": [{ "ctotal": "125箱", "cname": "牛奶0", "cprice": "56", "riqi": "2021年08月11日", "id": 100, "dtotal": "1256箱", "tp": "7000", "ztotal": "589箱", "cnum": "每箱12瓶", "dId": "1" }], "total": 1, "count": 3 } ``` :-: 图二 ### 二、新建API报表 #### 1、点击头像,鼠标放到'新建'即可显示 ![](https://img.kancloud.cn/f3/dd/f3ddcd3b0c398fdf713b6f11020752da_1279x234.png) ![](https://img.kancloud.cn/02/3a/023a6d50e79c95858fd9911bc0059c1f_803x26.png) #### 2、点击新建报表进入此页面 ![](https://img.kancloud.cn/bf/a6/bfa6d76e56915cd16e5e096b66732c17_1916x511.png) ![](https://img.kancloud.cn/02/3a/023a6d50e79c95858fd9911bc0059c1f_803x26.png) #### 3、点击数据集管理(API数据集) ![](https://img.kancloud.cn/31/35/3135ff31db49e34a6533f66c2c03276a_251x217.png) ![](https://img.kancloud.cn/02/3a/023a6d50e79c95858fd9911bc0059c1f_803x26.png) #### 4、进入页面后,填写编码、名称、Api地址、请求方式 ![](https://img.kancloud.cn/6b/1e/6b1e9e1fe1f0cd65f1e7a6828e48f5b7_1813x529.png) ![](https://img.kancloud.cn/02/3a/023a6d50e79c95858fd9911bc0059c1f_803x26.png) * 编码:API数据源的标识; * 名称:API数据源的名称; * 是否集合:是为集合多条数据 否为单条数据 * 是否分页:如果有多页预览和打印,需要勾选“是否分页”; * 请求方式:分为get和post;根据后台的请求类型来选择(本例get); * 类转换器:[参考文档](http://report.jeecg.com/2293839) * Api地址:配置的API数据源地址(可以为本地和线上,但必须是JSON类型,如:{"data":"[{}]"}); ![](https://img.kancloud.cn/02/3a/023a6d50e79c95858fd9911bc0059c1f_803x26.png) #### 5、填写完成后点击API解析会出现下图(动态报表配置明细) ![](https://img.kancloud.cn/8b/08/8b08926de929d11b455bd1abb80dc1ed_1865x549.png) ![](https://img.kancloud.cn/02/3a/023a6d50e79c95858fd9911bc0059c1f_803x26.png) * 字段名:数据库表中的字段名称 * 排序:显示到第几位,如1排在第一位 * 字段文本:该字段对应的文本(如 name 学生名称) * 类型:数据类型 (数值类型、字符类型、日期类型) * 字典code:字典翻译;如sex字段数据库中存1或2 报表中显示男或女 [点击查看字典配置专题](http://report.jeecg.com/2083759) * 查询:选中复选框,在预览中会有查询栏可查询数据 * 查询模式:可选输入框、下拉单选、下拉多选、范围查询、模糊查询、下拉树、自定义下拉框 [查询控件专题查看](http://report.jeecg.com/2373406) * 查询默认值:可自定义默认值 [点击查看专题](http://report.jeecg.com/2373407) * 查询日期格式:日期格式设置 [点击查看专题](http://report.jeecg.com/2384073) * 参数配置:可配置下拉树接口 [点击查看专题](http://report.jeecg.com/2388194) ![](https://img.kancloud.cn/02/3a/023a6d50e79c95858fd9911bc0059c1f_803x26.png) #### 6、点击确定返回页面,数据集中下面会有我们刚才创建的内容 ![](https://img.kancloud.cn/0f/a2/0fa2b3f82dff75b724aaf2ef30c5f606_287x338.png) ![](https://img.kancloud.cn/02/3a/023a6d50e79c95858fd9911bc0059c1f_803x26.png) ### 三、填写数据信息、保存浏览 #### 1、填写标题 ![](https://img.kancloud.cn/4e/0b/4e0b26190b856dae2e326151579185bb_1920x903.png) ![](https://img.kancloud.cn/02/3a/023a6d50e79c95858fd9911bc0059c1f_803x26.png) #### 2、文本内容可将数据拖拽 ![](https://img.kancloud.cn/c0/c2/c0c28ec6a43866e6a700ee7da5a9c941_1920x903.png) ![](https://img.kancloud.cn/02/3a/023a6d50e79c95858fd9911bc0059c1f_803x26.png) #### 3、保存预览 ![](https://img.kancloud.cn/c9/98/c9984e0c15d8d764faf7c7822ccf11d6_1234x227.png) ![](https://img.kancloud.cn/d6/13/d61333cdfd7adae5427ea6d7a13fa196_697x262.png) #### 4、分组预览 1)点击班级所在表格进行分组设置,聚合方式选择分组 ![](https://img.kancloud.cn/fc/9a/fc9a95c24f04585cec0c5f3f5d8080e1_1648x665.png) ![](https://img.kancloud.cn/02/3a/023a6d50e79c95858fd9911bc0059c1f_803x26.png) 2)保存预览 ![](https://img.kancloud.cn/03/e0/03e0135486bd46e5d15046e7bbf0b60c_922x314.png) ![](https://img.kancloud.cn/02/3a/023a6d50e79c95858fd9911bc0059c1f_803x26.png) ### 四、打印、导出 #### 1、打印 打印区域和纸张设置 ![](https://img.kancloud.cn/46/5a/465a8f19e33e5a51c4f43a3f6f77ec01_865x321.png) 点击“打印”按钮,选择“Canvas打印”或“Html打印”,进入打印预览界面 ![](https://img.kancloud.cn/3a/ec/3aec99eb1e53fa035bad5a6f40d5054a_1318x873.png) ![](https://img.kancloud.cn/02/3a/023a6d50e79c95858fd9911bc0059c1f_803x26.png) #### 2、导出(包含excel、pdf、pdf图像、图片) 点击“导出”按钮,选择“导出excel”、“pdf”、“PDF图像”、“图片”,可将表单数据导出相应形式; ![](https://img.kancloud.cn/eb/3e/eb3e373da7cdc326190a90430b3809df_825x307.png) ![](https://img.kancloud.cn/02/3a/023a6d50e79c95858fd9911bc0059c1f_803x26.png) ### 五、菜单配置 #### 1、复制浏览器的链接 ![](https://img.kancloud.cn/a6/39/a6391a79ccae7cdb56cd13c13fb683db_898x576.png) ![](https://img.kancloud.cn/02/3a/023a6d50e79c95858fd9911bc0059c1f_803x26.png) #### 2、在系统管理菜单管理进行配置 ![](https://img.kancloud.cn/ab/a4/aba41c984395cbedc5697cea3d5e7c9a_329x953.png) ![](https://img.kancloud.cn/02/3a/023a6d50e79c95858fd9911bc0059c1f_803x26.png) #### 3、点击新增按钮填写信息 1)如果是二级菜单,一级菜单应如下图配置 ``` 注意: * 前段组件必须按照格式填写 layouts/RouteView * 菜单路径必须为/**(本章/test),且不能重复 * 是否为路由菜单:是 ``` ![](https://img.kancloud.cn/71/8b/718bccc8c227f651da8d341a02257b49_864x883.png) ![](https://img.kancloud.cn/02/3a/023a6d50e79c95858fd9911bc0059c1f_803x26.png) 2)如果是二级菜单,这里应配置子菜单,否则为一级菜单 ``` 注意: * 前段组件必须按照格式填写 layouts/IframePageView * 用{{ window._CONFIG['domianURL'] }}代替IP地址、端口号和项目名称 * 是否为路由菜单:是 ``` ![](https://img.kancloud.cn/58/76/58767100721e4ac26130fd441f850bf1_852x671.png) ![](https://img.kancloud.cn/02/3a/023a6d50e79c95858fd9911bc0059c1f_803x26.png) #### 4、角色授权 路径:在系统管理->角色授权找到自己对应的角色,鼠标放到更多->授权 勾选刚才创建的菜单 ![](https://img.kancloud.cn/5b/29/5b298cc0e610b06f1123bdab1b37a7d6_810x223.png) ![](https://img.kancloud.cn/02/3a/023a6d50e79c95858fd9911bc0059c1f_803x26.png) 刷新页面即可看见点击菜单 ![](https://img.kancloud.cn/eb/aa/ebaa136afd449971e99a957fa1fe884a_1145x801.png) ![](https://img.kancloud.cn/02/3a/023a6d50e79c95858fd9911bc0059c1f_803x26.png)