Spread所在DIV大小变更后Spread不能自适应问题
我在两个相邻DIV中各放入一个spread，拖拽分界线一个DIV增大一个DIV缩小。Spread跟随DIV尺寸自适应（我的spread设置为100%）现象是如果画面启动不改变窗口大小没有问题，当缩小IE窗口后，再次拖动分界线准备扩大一边的时候，DIV尺寸变大了，但是里面Spread尺寸没有跟随变化。
如果在稍微改变一点点窗口大小，Spread会马上重新刷新适应DIV的大小。
代码如下。拖拽分界条没做好，在两个spread交接上方有个小黑块，那个可以左右拖动。效果如图片所示，含红色区域是左侧DIV大小，但是Spread并没有达到100%
<%@ Page Language="vb" AutoEventWireup="false"%>
<%@ Register Assembly="FarPoint.Web.SpreadJ" Namespace="FarPoint.Web.Spread" TagPrefix="FarPoint" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
body,html{width:100%;height:100%;padding:0;margin:0;}
.clearfix:after {
content: '';
display: table;
clear: both;
}
#main{
background-color: BurlyWood;
float: right;
height:200px;
width: 75%;
}
#sidebar{
background-color: IndianRed;
width:25%;
float: left;
height:200px;
overflow-y: hidden;
}
#dragbar{
background-color:black;
height:100%;
float: right;
width: 3px;
cursor: col-resize;
}
#ghostbar{
width:3px;
background-color:#000;
opacity:0.5;
position:absolute;
cursor: col-resize;
z-index:999}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var i = 0;
var dragging = false;
$(document.getElementById("dragbar")).mousedown(function (e) {
e.preventDefault();
dragging = true;
var main = $('#main');
var ghostbar = $('<div>',
{
id: 'ghostbar',
css: {
height: main.outerHeight(),
top: main.offset().top,
left: main.offset().left
}
}).appendTo('body');
$(document).mousemove(function (e) {
ghostbar.css("left", e.pageX + 2);
});
});
$(document).mouseup(function (e) {
if (dragging) {
var percentage = (e.pageX / window.innerWidth) * 100;
var mainPercentage = 100 - percentage;
$('#console').text("side:" + percentage + " main:" + mainPercentage);
$('#sidebar').css("width", percentage + "%");
$('#main').css("width", mainPercentage + "%");
$('#ghostbar').remove();
$(document).unbind('mousemove');
dragging = false;
$('#gvProcDesignInfo').css("width","100%")
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="clearfix">
<div id="sidebar" style="float:left ">
<FarPoint:FpSpread ID="gvProcDesignInfo" runat="server" ActiveSheetViewIndex="0" BorderColor="#A0A0A0" BorderStyle="Solid" BorderWidth="1px" HorizontalScrollBarPolicy="Always" VerticalScrollBarPolicy="Never" Height="177px" Width="100%">
<CommandBar BackColor="#F6F6F6" ButtonFaceColor="Control" ButtonHighlightColor="ControlLightLight" ButtonShadowColor="ControlDark" Visible="false"></CommandBar>
<Sheets>
<FarPoint:SheetView SheetCorner-ColumnCount="0" SheetName="Sheet1"></FarPoint:SheetView>
</Sheets>
</FarPoint:FpSpread>
<span id="position"></span>
</div>
<div id="dragbar" style="width:10px;border-style:solid;border-width:1px;float:left"></div>
<div id="main"style="float:left ">
<FarPoint:FpSpread ID="FpSpread1" runat="server" ActiveSheetViewIndex="0" BorderColor="#A0A0A0" BorderStyle="Solid" BorderWidth="1px" HorizontalScrollBarPolicy="Always" VerticalScrollBarPolicy="Never" Height="177px" Width="100%">
<CommandBar BackColor="#F6F6F6" ButtonFaceColor="Control" ButtonHighlightColor="ControlLightLight" ButtonShadowColor="ControlDark" Visible="false"></CommandBar>
<Sheets>
<FarPoint:SheetView SheetCorner-ColumnCount="0" SheetName="Sheet1"></FarPoint:SheetView>
</Sheets>
</FarPoint:FpSpread>
</div>
</div>
<div id="console"></div>
</form>
</body>
</html>
浏览器的大小改变有事件可以检测，这种div的变化spread 并不知道。所以需要调用接口resize
var spread1 = document.getElementById("gvProcDesignInfo");
spread1.sizeSpread();
页:
[1]