大数据量树形报表结构渲染的方案探讨

收藏

背景

常常有用户会有树形结构的报表渲染的需要，而实现方式也很简单，就是数据绑定+分组列，从而实现一个树形结构的数据展示。但是当数据量上去后，前端的性能瓶颈就会很明显，卡顿延迟会让很多用户抓狂，那么我们是否有方案能够对这种场景做优化呢？本文先来探讨其中一种能够想到的方案：动态渲染

实现方式

我们可以看到，实际我们报表能够查看的只有一部分，特别是没有展开的数据，大家能看到的就更少了，那么我们可不可以就这种常见的查看方式来针对性的动态渲染呢？即，初始化时，我们先渲染一级节点，等用户点击展开时，我们再动态对应的一级节点下的二级节点进行渲染，以此类推。
image.png461222228.png

这其中有几个关键点需要注意：
1. 我们除了需要渲染的数据以外，我们还需要知道该数据是几级节点
2. 我们需要监听用户的展开的按钮操作，然后去动态在下面位置插入数据

代码示例
1. 一级节点初始化渲染

sheet.setDataSource(new GC.Spread.Sheets.Bindings.CellBindingSource(data))// 一级节点数据覆盖

复制代码

2. 展开按钮单元格类型自定义

// 自定义一个有下拉icon的单元格
function CustomCellType() {
this.RADIUS = 10;
spreadNS.CellTypes.Text.apply(this);
}
CustomCellType.prototype = new spreadNS.CellTypes.Text();
CustomCellType.prototype.paint = function (ctx, value, x, y, w, h, style, context) {
spreadNS.CellTypes.Text.prototype.paint.apply(this, arguments);
if (!ctx) {
return;
}
// 画个倒三角
ctx.save();
ctx.rect(x, y, w, h);
ctx.clip();
ctx.beginPath();
ctx.fillStyle = "red";
var triangleSize = Math.min(w, h) / 4;
var centerX = x + w * 0.9;
var centerY = y + h / 2;
ctx.moveTo(centerX - triangleSize, centerY - triangleSize / 2);
ctx.lineTo(centerX + triangleSize, centerY - triangleSize / 2);
ctx.lineTo(centerX, centerY + triangleSize);
ctx.closePath();
ctx.fill();
ctx.restore();
};

复制代码

3. 展开动作数据插入逻辑

// 点击展开icon，鼠标松开时执行以下逻辑
CustomCellType.prototype.processMouseUp = function (hitInfo) {
if (hitInfo.isReservedLocation) {// 判断是icon区域
var sheet = hitInfo.sheet;// 当前工作表
var tag = sheet.getTag(hitInfo.row, hitInfo.col, hitInfo.sheetArea);// 单元格隐藏信息
if (tag !== undefined && (tag.isCollapsed === undefined || tag.isCollapsed === false)) {// 避免重复展开重复添加数据和请求数据
var data = secondData[tag.请求地址];// 这里模拟从后台获取数据
if (data === undefined) {
alert("请求数据失败")
return
}
sheet.suspendPaint()
sheet.addRows(hitInfo.row + 1, data.length)// 添加空行
data.forEach((value, index) => {
sheet.setValue(hitInfo.row + 1 + index, hitInfo.col, value.value)// 填值
if (value.tag !== undefined) {
sheet.setTag(hitInfo.row + 1 + index, 0, value.tag); // 隐藏属性
sheet.getCell(hitInfo.row + 1 + index, 0).textIndent(value.tag.level);// 文本缩进，这样看上去像棵树
if (value.tag.请求地址) {
sheet.setCellType(hitInfo.row + 1 + index, 0, new CustomCellType())
}
}
})
tag.isCollapsed = true// 当前单元格下已经展开了，不要再展开了
}
sheet.autoFitColumn(hitInfo.col)
sheet.setColumnWidth(hitInfo.col, sheet.getColumnWidth(hitInfo.col) + 30)
sheet.resumePaint()
}
};

复制代码

完整代码

动态加载数据.html (15.2 KB, 下载次数: 2)

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

大数据量树形报表结构渲染的方案探讨

0 个回复

SpreadJS 认证

SpreadJS 高级认证