如何让填报区域撑满页面

收藏

背景

有很多用户的实际填报场景是在移动端，例如平板上，业务人员进行填报时如果其实只期望上下滚动着填报，左右滚动会导致填报操作很不舒服，甚至有些情况会导致遗漏内容，那么将填报区域撑满这个SpreadJS的视图区域对这些用户来说很是必要。

如何实现

按照我们期望的，只让填报用户上下滚动页面，以及不允许用户左右移动页面，我们可以按照以下思路实现
1. 通过sheet上的缩放功能，将需要填报的区域恰好缩放到和SpreadJS视图区域齐平的位置
2. 禁止用户左右滚动页面

代码示例

1. 初始化设置缩放

var usedRange = sheet.getUsedRange(GC.Spread.Sheets.UsedRangeType.all);// 获取使用了的区域
// 获取使用区域的最大列宽
var cell = sheet.getCellRect(0, usedRange.col)
var width = cell.x + cell.width;// 计算外部spread的容器的列宽
window.getComputedStyle(spread.getHost())
var maxWidth = parseFloat(window.getComputedStyle(spread.getHost()).width) - 22;// 这个22是一个偏差值，根据业务具体场景修改这个值
var fa = maxWidth / width// 获取应该放大的系数
// 执行缩放
sheet.zoom(fa)

复制代码

2. 禁止用户页面左右滚动

sheet.bind(GC.Spread.Sheets.Events.LeftColumnChanged, function (sender, args) {
sheet.showColumn(0, GC.Spread.Sheets.HorizontalPosition.left);// 监听到用户左右拖动页面，就立马显示显示最左侧列
});
spread.options.scrollByPixel = true;// 设置成像素滚动避免橡皮筋效果严重

复制代码

完整demo

按照内容区域缩放工作表.html (4.46 KB, 下载次数: 265)

ab123 · ab123

你好这个方法是不是 14版本用不了

Ellia.Duan · Ellia.Duan

您好，在此demo中，用到了getUsedRange这个api ,此API 14版本不支持，建议升级后使用。

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

2 个回复