SpreadJS拖拽调整FormulaTextBox高度

发布时间:2016/08/26 00:08 发布者:dexteryao

返回博客中心

本例中实现用鼠标拖拽方式调整FormulaTextBox高度,以方便用户查看公式。

B983.tmp

 

示例中使用到了JqueryUI的 draggable 方法,我们也可同时mousemove事件自己实现相同的功能

$("#verticalSplitter").draggable({
    axis: "y",
    containment: "parent",
    scroll: false,
    zIndex: 100,
    stop: function(event, ui) {
        var $this = $(this),
            top = $this.offset().top,
            offset = top - 35,
            $content = $(".fill-spread-content");
        if (offset < 0) {
            offset = 0;
            $(this).css({
                top: 35
            })
        }
        // adjust size of related items
        $("#formulaBarText").css({
            height: (20 + offset)
        }); // 20: original height of formulaBarText
        $content.css({
            top: top + 10
        }); // 10: height of the space for verticalSplitter 
        $content.parent().css({
            height: $content.height()
        });
    }
});

 

实现原理就是在拖拽结束后,重新设置FormulaTextBox 高度,和相关控件位置

在线演示地址:http://runjs.cn/detail/pz92y3h9

更多资源

SpreadJS中文学习指南:http://demo.grapecity.com.cn/SpreadJS/TutorialSample/#/samples

SpreadJS在线英文产品文档:http://sphelp.grapecity.com/webhelp/SpreadJSWeb/webframe.html#welcome.html

如果您对SpreadJS产品感兴趣,可以到官方网站下载试用:/developer/spreadjs

如果你有疑问,可以到GCDN论坛获得技术支持:http://gcdn.grapecity.com.cn


关于葡萄城

赋能开发者!葡萄城是专业的集开发工具、商业智能解决方案、低代码开发平台于一身的软件和服务提供商,为超过 75% 的全球财富 500 强企业提供服务。葡萄城专注控件软件领域30年,希望通过模块化的开发控件、灵活的低代码应用开发平台等一系列开发工具、解决方案和服务,帮助开发者快速响应复杂多变的业务需求,最大程度地发挥开发者的才智和潜能,让开发者的 IT 人生更从容更美好。

了解详情,请访问葡萄城官网