报表插件（ReportSheet）如何添加一张没有数据的空表

收藏

本帖最后由 AlexZ 于 2024-10-9 12:06 编辑

背景：
   ReportSheet的数据源添加功能可以根据输入的url地址拉取对应地址下的数据至前端的DataManager之中。但实际上报表设计时候并不需要一次加载太多的数据，只需要少量数据读取甚至是不加载数据，待到报表展开的时候在加载需要的数据。这么做的目的就是将前端为数不多的性能最大化的利用起来。

解决方案：
   解决思路非常简单，就是请求地址的返回结果为null即可。但由于返回为null就隐身出来两个问题：
   1.表中字段的信息如何体现出来。
   2.报表最终展示铺开的时候是要加载真实数据的那么，同一个地址的返回结果如何在null与真实数据之间切换呢？

先解决第一个问题，表中的字段信息如何体现。众所周知如果返回的数据位null的话，自动识别是无法识别到表中字段信息的（字段都没有怎么识别）。
ReportSheet在这里出了自动识别之外，还可以手动对表中的每一列做设置，如下代码所示：

var dataManager = spread.dataManager();
var dataSourceOption = {
remote: {
read: {
"url": url,
"body": options,
"method": method
}
},
schema: {
columns: {
"编号": {dataName: "id"},
"姓名": {dataName: "name"},
"年龄": {dataName: "age"},
"性别": {dataName: "sex"},
"部门编号": {dataName: "depId"}
}
}
};
var myTable = dataManager.addTable(tableName, dataSourceOption);

复制代码

schema节点下可以设置columns，columns中可以编辑每一列的字段信息。其中有很多可以配置的属性供设置，这里不再赘述。

接下来解决第二个问题，同一个地址下如何切换返回信息的问题。其实在正常我们做系统开发的时候遇到此类问题，通常是通过传参解决，传递一个参数用于区域返回的结果。在ReportSheet中也是一样，例如上面的代码，我们可以发现在read节点中，我们可以设置method这个属性，这个属性的意思就是请求的类型。既然我们要设置参数，那么我们首先需要将请求的类型设置为post而非默认的get。接下来，通过body节点，我们可以将我们传递的参数设置在body下面。这要在服务端我们接收到请求的参数后，就可以根据参数来判断返回的数据是null还是全部数据了。甚至我们可以加入后端分页的功能。

		自动登录	找回密码
密码			立即注册

报表插件（ReportSheet）如何添加一张没有数据的空表

0 个回复

讲师达人

悬赏达人

微信认证勋章

SpreadJS 认证

SpreadJS 高级认证

元老葡萄