找回密码
 立即注册

QQ登录

只需一步,快速开始

Joestar.Xu SpreadJS 开发认证
超级版主   /  发表于:2024-4-2 09:43  /   查看:1112  /  回复:0
大家在使用SpreadJS的时候往往会有自定义滚动条等需求,有时候根据不同的需求需要判断滚动是否已经滚到了顶,针对这样的需求在SpreadJS中应该如何实现呢?


在V16以前(含),LeftColumnChanged仅会在列发生变化的时候触发,在V17以后,我们对LeftColumnChanged事件做了优化,使其能够在像素滚动的时候也触发,也就是说每次滚动都会触发LeftColumnChanged事件,本需求将在LeftColumnChanged事件中实现。

示例代码如下:

  1. window.onload = function () {
  2.   let designerConfig = JSON.parse(
  3.     JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig)
  4.   );

  5.   let designer = new GC.Spread.Sheets.Designer.Designer(
  6.     "gc-designer-container",
  7.     designerConfig
  8.   );

  9.   let spread = designer.getWorkbook();

  10.   let sheet = spread.getActiveSheet();

  11.   spread.options.scrollbarMaxAlign = true;

  12.   sheet.setColumnCount(100);

  13.   let totalWidth = 0;
  14.   for (let i = 0; i < sheet.getColumnCount(); i++) {
  15.     totalWidth += sheet.getColumnWidth(i)
  16.   }

  17.   sheet.bind(GC.Spread.Sheets.Events.LeftColumnChanged, function (sender, args) {
  18.     let leftColumn = args.newLeftCol;
  19.     let width = 0;
  20.     for (let i = 0; i < leftColumn; i++) {
  21.       width += sheet.getColumnWidth(i);
  22.     }
  23.     console.log("左侧宽度:" + width);
  24.     console.log("右侧宽度:" + (totalWidth - width));

  25.     // 22为滚动条宽度
  26.     if (spread.options.scrollByPixel) {
  27.       let columnIndex = sheet.hitTest(sheet.getColumnWidth(0, GC.Spread.Sheets.SheetArea.rowHeader) + 1, sheet.getRowHeight(0, GC.Spread.Sheets.SheetArea.columnHeader) + 1).col;
  28.       if ((totalWidth - width) - (spread.getHost().clientWidth - sheet.getColumnWidth(0, GC.Spread.Sheets.SheetArea.rowHeader) - 22 + sheet.getColumnWidth(columnIndex)) <= 0) {
  29.         console.log("到顶啦!");
  30.       }
  31.     } else {
  32.       if ((totalWidth - width) - (spread.getHost().clientWidth - sheet.getColumnWidth(0, GC.Spread.Sheets.SheetArea.rowHeader) - 22) <= 0) {
  33.         console.log("到顶啦!");
  34.       }
  35.     }
  36.   });
  37. };
复制代码

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部