请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

z3393898

初级会员

14

主题

38

帖子

446

积分

初级会员

积分
446
z3393898
初级会员   /  发表于:2017-4-18 17:26  /   查看:4765  /  回复:5
产品版本:spreadjsv9
浏览器版本: ie11
问题描述:表中有些单元格不可编辑,双击的时候想要采用悬浮窗口提示用户本单元格不能编辑.但是目前找到的悬浮信息只有批注,请问有没有别的方法
关键代码:

先要实现的效果如下图:
blob131302794.png

5 个回复

倒序浏览
dexteryao讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2017-4-18 18:10:46
沙发
可以给spread绑定一个mousemove的方法,然后用hitTest获取当前鼠标所在位置的信息,然后浮动一个div

http://sphelp.grapecity.com/webh ... .Sheet~hitTest.html

也可以用自定义单元格实现。
http://runjs.cn/detail/p1vf6r6y
回复 使用道具 举报
z3393898
初级会员   /  发表于:2017-4-20 16:37:04
板凳
dexteryao 发表于 2017-4-18 18:10
可以给spread绑定一个mousemove的方法,然后用hitTest获取当前鼠标所在位置的信息,然后浮动一个div

htt ...

那个自定义单元格,是v10的方法,v9可以用吗?
如果用第一种方法的话,spreadContainer代表的是什么
回复 使用道具 举报
dexteryao讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2017-4-20 17:44:58
地板
spreadContainer 就是初始化时候的div$("#ss") V9也有示例
http://gcdn.gcpowertools.com.cn/ ... ;tid=36687#lastpost
回复 使用道具 举报
z3393898
初级会员   /  发表于:2017-4-21 14:28:35
5#
dexteryao 发表于 2017-4-20 17:44
spreadContainer 就是初始化时候的div$("#ss") V9也有示例
http://gcdn.gcpowertools.com.cn/forum.php?mo ...

看到了v9的实例,并且在项目中使用了如下代码:
$(document).ready(function () {
        var spread = GcSpread.Sheets.findControl(document.getElementById('bydy'));
        var sheet = spread.getActiveSheet();
        var defaultStyle = sheet.getDefaultStyle();
        defaultStyle.cellType = new NumberCellType();
        sheet.setDefaultStyle(defaultStyle);

    });
    function NumberCellType() {
    }

    NumberCellType.prototype = new GcSpread.Sheets.TextCellType();
    NumberCellType.prototype.getHitInfo = function (x, y, cellStyle, cellRect, context) {
        return {
            x: x,
            y: y,
            row: context.row,
            col: context.col,
            cellStyle: cellStyle,
            cellRect: cellRect,
            sheetArea: context.sheetArea
        };
    }
    NumberCellType.prototype.processMouseEnter = function (hitinfo) {
        if (!this._toolTipElement) {
            var div = document.createElement("div");
            $(div).css("position", "absolute")
                .css("border", "1px #C0C0C0 solid")
                .css("box-shadow", "1px 2px 5px rgba(0,0,0,0.4)")
                .css("font", "9pt Arial")
                .css("background", "white")
                .css("padding", 5);

            this._toolTipElement = div;
        }
        $(this._toolTipElement).text("Cell [R:" + hitinfo.row + "] : [C:" + hitinfo.col + "]")
            .css("top", hitinfo.y + 15)
            .css("left", hitinfo.x + 15);
        $(this._toolTipElement).hide();
        document.body.insertBefore(this._toolTipElement, null);
        $(this._toolTipElement).show("fast");
    };

    NumberCellType.prototype.processMouseLeave = function (hitinfo) {
        if (this._toolTipElement) {
            document.body.removeChild(this._toolTipElement);
            this._toolTipElement = null;
        }
    };
执行之后报了如图的错误: blob451342772.png
所以放弃了上面的方式,还是使用了控件自带的floatObject,代码如下:
var customFloatingObject = new GcSpread.Sheets.CustomFloatingObject("f1", 10, 10, 100,50);
                    var div = document.createElement("div");
                    $(div).css("position", "absolute")
                        .css("border", "1px #C0C0C0 solid")
                        .css("box-shadow", "1px 2px 5px rgba(0,0,0,0.4)")
                        .css("font", "9pt Arial")
                        .css("background", "blue")
                        .css("filter", "alpha(opacity:70)")
                        .css("padding", 5);
                    customFloatingObject.Content(div);
                    sheet.addFloatingObject(customFloatingObject);
                    customFloatingObject.startRow(args.row);
                    customFloatingObject.startColumn(args.col);
                    customFloatingObject.startRowOffset(10);
                    customFloatingObject.startColumnOffset(10);

但是现在遇到一点问题:
我这个浮动div的目的是,用户在双击单元格或者输入时,如果单元格的lock属性为true(即单元格不可编辑的话),就用这个悬浮div提示他单元格不能编辑.
可是如果lock是true,用户直接用键盘输入或者双击,是没法触发editStarting事件的,那我只能在cellDoubleClick事件上绑定该方法,可是如果不双击,直接敲键盘,应该用什么事件呢?

回复 使用道具 举报
dexteryao讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2017-4-21 18:43:39
6#
这个没有事件,可以在spread的dom上监听key相关的事件,去处理。在事件中判断当前activecell的状态。
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部