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

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”
}

};

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

哈哈哈嗝哈哈哈

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值