动态设置滚动条的显示与隐藏

SpreadJS有横向滚动条和纵向滚动条，如果隐藏滚动条，可以使用下面的代码

1. spread.options.showVerticalScrollbar = false;  
   
2. spread.options.showHorizontalScrollbar = false;

复制代码

如果此时sheet行列数不多，这时候是不需要显示滚动条的，此时可以判断sheet.getViewportBottomRow(1) 是否小于等于 sheet.getRowCount()，如果是则隐藏竖向滚动条。同理对sheet.getViewportRightColumn(1)和sheet.getColumnCount()进行判断，如果是则隐藏横向滚动条，如下代码：

1. const rowCount = sheet.getRowCount(), colCount = sheet.getColumnCount()
   
2. if(sheet.getViewportBottomRow(1) <= rowCount){
   
3. spread.options.showVerticalScrollbar = false;
   
4. }
   
5. if(sheet.getViewportRightColumn(1) <= colCount){
   
6. spread.options.showHorizontalScrollbar = false;
   
7. }

复制代码

如下图所示：

但是，在使用过程中发现如果最后一行行高不是默认行高，如为最后一行设置200的行高，此时效果如下：


此时应该是要显示纵向滚动条的，所以我们对上面的代码进行修改下，

1. if (sheet.getViewportBottomRow(1) == rowCount - 1) {
   
2.             const spreadDomHeight = document.getElementById('ss').offsetHeight
   
3.             const headerHeight = sheet.getRowHeight(0, GC.Spread.Sheets.SheetArea.colHeader)
   
4.             const {y, height} = sheet.getCellRect(rowCount - 1, 1, 1, 1)
   
5.             if ((y + height < spreadDomHeight - headerHeight)){
   
6.                 spread.options.showVerticalScrollbar = false;
   
7.             }
   
8.         }
   
9. 
   
10.         if (sheet.getViewportRightColumn(1) == colCount - 1) {
    
11.             const spreadDomWidth = document.getElementById('ss').offsetWidth
    
12.             const headerWidth= sheet.getColumnWidth(0, GC.Spread.Sheets.SheetArea.rowHeader)
    
13.             const {x, width} = sheet.getCellRect(1, colCount-1, 1, 1)
    
14.              if ((x + width < spreadDomWidth - headerWidth)){
    
15.                 spread.options.showHorizontalScrollbar = false;
    
16.             }
    
17. 
    
18.         }

复制代码

此外，还需要监听columnwidthchanged事件，当列宽或者行高改变时，判断是否需要隐藏滚动条，隐藏滚动条的API： spread.options.showHorizontalScrollbar = false; 同理，需要监听ColumnChanged事件、RowHeightChanged事件、RowChanged事件。
第一步，我们对上面的代码封装一下

1. function scrollVisivble() {
   
2.         var spread = GC.Spread.Sheets.findControl('ss')
   
3.         let sheet = spread.getSheet(0);
   
4.         const rowCount = sheet.getRowCount(), colCount = sheet.getColumnCount()
   
5.         if (sheet.getViewportBottomRow(1) == rowCount - 1) {
   
6.             const spreadDomHeight = document.getElementById('ss').offsetHeight
   
7.             const headerHeight = sheet.getRowHeight(0, GC.Spread.Sheets.SheetArea.colHeader)
   
8.             const {y, height} = sheet.getCellRect(rowCount - 1, 0, 1, 1)
   
9.             if ((y + height < spreadDomHeight - headerHeight)) {
   
10.                 spread.options.showVerticalScrollbar = false;
    
11.             }
    
12.         }else{
    
13.             spread.options.showVerticalScrollbar = true;
    
14.         }
    
15.         console.log("sheet.getViewportRightColumn(1) ",sheet.getViewportRightColumn(1) ,'colCount',colCount)
    
16.         if (sheet.getViewportRightColumn(1) == colCount - 1) {
    
17.             const spreadDomWidth = document.getElementById('ss').offsetWidth
    
18.             const headerWidth = sheet.getColumnWidth(0, GC.Spread.Sheets.SheetArea.rowHeader)
    
19.             const {x, width} = sheet.getCellRect(0, colCount - 1, 1, 1)
    
20.             if ((x + width < spreadDomWidth - headerWidth)) {
    
21.                 spread.options.showHorizontalScrollbar = false;
    
22.             }
    
23.         }else{
    
24.             spread.options.showHorizontalScrollbar = true;
    
25.         }
    
26.     }

复制代码

然后初始化时调用

1.         var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 2});
   
2.         let sheet = spread.getSheet(0);
   
3.         sheet.setValue(0, 0, 'hello');
   
4.         sheet.setRowCount(20);
   
5.         sheet.setColumnCount(13);
   
6.         spread.options.scrollbarMaxAlign = true
   
7.         spread.options.scrollbarShowMax = true
   
8. 
   
9. 
   
10.         sheet.setRowHeight(sheet.getRowCount() - 1, 200)
    
11.         scrollVisivble()

复制代码

最后监听事件

1.   sheet.bind(GC.Spread.Sheets.Events.ColumnWidthChanged, function (e, info) {
   
2.             setTimeout(function (){
   
3.                 scrollVisivble()
   
4.             },0)
   
5.         });
   
6.         sheet.bind(GC.Spread.Sheets.Events.ColumnChanged, function (e, info) {
   
7.             setTimeout(function (){
   
8.                 scrollVisivble()
   
9.             },0)
   
10.         });
    
11.         sheet.bind(GC.Spread.Sheets.Events.RowHeightChanged, function (e, info) {
    
12.             setTimeout(function (){
    
13.                 scrollVisivble()
    
14.             },0)
    
15.         });
    
16.         sheet.bind(GC.Spread.Sheets.Events.RowChanged, function (e, info) {
    
17.             setTimeout(function (){
    
18.                 scrollVisivble()
    
19.             },0)
    
20.         });   

复制代码

这样子就实现了，动态设置滚动条的显示与隐藏。


具体可以参考附件。