背景
有很多用户的实际填报场景是在移动端,例如平板上,业务人员进行填报时如果其实只期望上下滚动着填报,左右滚动会导致填报操作很不舒服,甚至有些情况会导致遗漏内容,那么将填报区域撑满这个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, 下载次数: 260)
|
|