spreadJS在标题添加图片和鼠标划入显示提示信息的问题_spreadjs鼠标移到对应模块显示内容-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43387812/article/details/112599353

博客围绕spreadJS在标题添加图片和鼠标划入显示提示信息的问题展开，给出了设置表头过滤按钮的方法，包括设置头部样式、过滤按钮可见性等，还提供了监听鼠标事件判断显示以及画出提示框等相关代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

spreadJS在标题添加图片和鼠标划入显示提示信息的问题

在这里插入图片描述
具体方法：

// 设置表头的过滤按钮
function setRowFilter(sheet) {
var rowCount, colCount;
rowCount = sheet.getRowCount();
colCount = sheet.getColumnCount();
// 设置头部样式
var row = sheet.getRange(0, -1, 1, -1, GC.Spread.Sheets.SheetArea.colHeader);
row.backgroundImage("./…/images/tishi.png").backgroundImageLayout(GC.Spread.Sheets.ImageLayout.none);
row.foreColor(“White”);
var cellrange = new GC.Spread.Sheets.Range(0, 0, rowCount, colCount);
var filter = new GC.Spread.Sheets.Filter.HideRowFilter(cellrange);
filter.filterButtonVisible(true);
sheet.rowFilter(filter);
filter.filterDialogVisibleInfo({
sortByValue: true,
sortByColor: true,
filterByColor: true,
filterByValue: true,
listFilterArea: true
});
for (let i = 0; i < colCount; i++) {
ColumnWidth += sheet.getColumnWidth(i, GC.Spread.Sheets.SheetArea.viewport);
}

document.getElementById("ss").addEventListener("mousemove", EventMoveForRow);
document.getElementById("ss").addEventListener("mouseout", event_mouseout);

}

// 此方法为监听鼠标事件进行判断显示
function EventMoveForRow(e) {
var offset = offsets(document.getElementById(“ss”));
var x = e.pageX - offset.left;
var y = e.pageY - offset.top;
var target = spread.getActiveSheet().hitTest(x, y);

if (target && target.rowViewportIndex === -1 &&
    (target.colViewportIndex === 0 || target.colViewportIndex === 1)) {
    // console.log("Row index of mouse-clicked column header cells: " + target.row);
    // console.log("Column index of mouse-clicked column header cells: " + target.col);
    let colWidth = 0;
    for (let v = 0; v <= target.col; v++) {
        colWidth += sheet.getColumnWidth(v, GC.Spread.Sheets.SheetArea.viewport);
    }
    //计算当前触摸到的单元格的像素宽度   
    let colW = colWidth - sheet.getColumnWidth(target.col, GC.Spread.Sheets.SheetArea.viewport) + 41;
    if (y >= 5 && y <= 20 && sheet.getValue(target.row, target.col) && x - colW < 20) {
        event_mousemove2(x, y, target);
    } else {
        event_mouseout();
    }
    // if(y > 20){
    //     event_mouseout();
    // }
}

}

//画出提示框
function event_mousemove2(x, y, target) {
let msg = null;
if (target.col != “undefined”) {
let name = sheet.getDataColumnName(target.col);

    for (let q in header_data) {
        if (header_data[q]['displayName'] == name) {
            msg = header_data[q].msg;
            break;
        }
    }
}
console.log(x);
if (document.getElementById("ss").getElementsByTagName("p").length == 0) {
    let p = document.createElement("p");
    p.id = "tooltiptext";
    p.style.position = 'absolute';
    p.style.width = "100px";
    p.style.height = "50px";
    p.innerText = msg;
    p.style.top = y + 2 + "px";
    p.style.left = x + "px";
    document.getElementById("ss").append(p);
} else {
    document.getElementById("tooltiptext").style.top = y + 2 + "px";
    document.getElementById("tooltiptext").style.left = x + "px";
    document.getElementById("tooltiptext").style.visibility = "visible";
    document.getElementById("tooltiptext").innerText = msg;
}

};
function event_mouseout() {
if (document.getElementById(“tooltiptext”)) {
document.getElementById(“tooltiptext”).style.visibility = “hidden”
}

};