Clark.Pan 发表于 2021-3-17 17:35:18

SpreadJS多窗口同步滚动

在SpreadJS的日常应用中,有可能遇到以下场景。例如,文件对比,文档审阅这样的需求。这个时候往往需要多个窗口同时打开来进行对比的操作。在对比的过程中,滚动条的同步滚动是非常重要的功能点。因为对比往往是同样位置上的内容进行对比。这个时候如果一边进行了滚动,另一边没有同步进行相同程度的滚动,用户就需要在重复进行操作进行同样的滚动。而操作本身是很难两次做出同样精准的滚动操作的。这个时候两个窗口的对比内容的位置就会发生偏差,是一种非常不好的用户体验。另外,即使能够做到相同的滚动操作,那么也是需要多做这么一次操作的,从易用性来说也不如同步滚动来的方便。
在SpreadJS中,我们可以利用SpreadJS本身丰富的事件功能,监听滚动条相关的事件TopRowChanged,LeftColumnChanged,在事件中利用SpreadJS提供的showRow方法,将需要同步滚动窗口的滚动条移动至相同的位置。核心代码如下:
sheet.bind(GC.Spread.Sheets.Events.TopRowChanged, function (sender, args) {
                        //设置垂直滚动条同步滚动。
                        sheet1.showRow(args.newTopRow, GC.Spread.Sheets.VerticalPosition.top);
                });
                sheet.bind(GC.Spread.Sheets.Events.LeftColumnChanged, function (sender, args) {
                        //设置水平滚动条同步滚动。
                        sheet1.showColumn(args.newLeftCol, GC.Spread.Sheets.HorizontalPosition.left);
                });实现效果与demo见附件:

crawler 发表于 2021-3-18 23:07:44

非同一个sheet可以吗

Derrick.Jiao 发表于 2021-3-19 09:47:12

crawler 发表于 2021-3-18 23:07
非同一个sheet可以吗

可以,您可以把这块改成您想要的sheet
页: [1]
查看完整版本: SpreadJS多窗口同步滚动