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

收藏

本帖最后由 Ellia.Duan 于 2024-2-19 11:32 编辑

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

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

复制代码

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

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

复制代码

如下图所示：

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

image.png776609496.png

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

if (sheet.getViewportBottomRow(1) == rowCount - 1) {
const spreadDomHeight = document.getElementById('ss').offsetHeight
const headerHeight = sheet.getRowHeight(0, GC.Spread.Sheets.SheetArea.colHeader)
const {y, height} = sheet.getCellRect(rowCount - 1, 1, 1, 1)
if ((y + height < spreadDomHeight - headerHeight)){
spread.options.showVerticalScrollbar = false;
}
}
if (sheet.getViewportRightColumn(1) == colCount - 1) {
const spreadDomWidth = document.getElementById('ss').offsetWidth
const headerWidth= sheet.getColumnWidth(0, GC.Spread.Sheets.SheetArea.rowHeader)
const {x, width} = sheet.getCellRect(1, colCount-1, 1, 1)
if ((x + width < spreadDomWidth - headerWidth)){
spread.options.showHorizontalScrollbar = false;
}
}

复制代码

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

function scrollVisivble() {
var spread = GC.Spread.Sheets.findControl('ss')
let sheet = spread.getSheet(0);
const rowCount = sheet.getRowCount(), colCount = sheet.getColumnCount()
if (sheet.getViewportBottomRow(1) == rowCount - 1) {
const spreadDomHeight = document.getElementById('ss').offsetHeight
const headerHeight = sheet.getRowHeight(0, GC.Spread.Sheets.SheetArea.colHeader)
const {y, height} = sheet.getCellRect(rowCount - 1, 0, 1, 1)
if ((y + height < spreadDomHeight - headerHeight)) {
spread.options.showVerticalScrollbar = false;
}
}else{
spread.options.showVerticalScrollbar = true;
}
console.log("sheet.getViewportRightColumn(1) ",sheet.getViewportRightColumn(1) ,'colCount',colCount)
if (sheet.getViewportRightColumn(1) == colCount - 1) {
const spreadDomWidth = document.getElementById('ss').offsetWidth
const headerWidth = sheet.getColumnWidth(0, GC.Spread.Sheets.SheetArea.rowHeader)
const {x, width} = sheet.getCellRect(0, colCount - 1, 1, 1)
if ((x + width < spreadDomWidth - headerWidth)) {
spread.options.showHorizontalScrollbar = false;
}
}else{
spread.options.showHorizontalScrollbar = true;
}
}

复制代码

然后初始化时调用

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

复制代码

最后监听事件

sheet.bind(GC.Spread.Sheets.Events.ColumnWidthChanged, function (e, info) {
setTimeout(function (){
scrollVisivble()
},0)
});
sheet.bind(GC.Spread.Sheets.Events.ColumnChanged, function (e, info) {
setTimeout(function (){
scrollVisivble()
},0)
});
sheet.bind(GC.Spread.Sheets.Events.RowHeightChanged, function (e, info) {
setTimeout(function (){
scrollVisivble()
},0)
});
sheet.bind(GC.Spread.Sheets.Events.RowChanged, function (e, info) {
setTimeout(function (){
scrollVisivble()
},0)
});

复制代码

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

具体可以参考附件。

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

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

0 个回复

SpreadJS 认证

SpreadJS 高级认证