本例中实现用鼠标拖拽方式调整FormulaTextBox高度,以方便用户查看公式。
示例中使用到了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