Spread Studio for ASP.NET 7: 使用 js 设置 Spread 高度

有些用户提问想经过 JS 来设置 Spread  Studio for ASP.NET 表格控件来控制 Spread 高度。本文章将阐述实现方法。

实现背景：

当用户发起针对含有 Spread 页面的请求时，Spread 在浏览器中被渲染成 HTML Table。

因此，咱们在前台针对 Spread 操做时，除了使用 Spread 内置的一些事件和方法外，全部针对 Table 的 DOM 属性和 js 操做都试用于 Spread。

咱们此次的实现方法就是针对 Spread 生成的 Table 进行操做实现。

首先，在 Spread 外部嵌套 Div 容器，HTML 代码以下：

 

Html代码  

1. <div id="spreadcontainer" style="width: 400px; height: 200px;">  
2.         <FarPoint:FpSpread ID="FpSpread1" runat="server" BorderColor="Black" BorderStyle="Solid"  
3.             BorderWidth="1px" Height="100%" Width="100%">  
4.             <CommandBar BackColor="Control" ButtonFaceColor="Control" ButtonHighlightColor="ControlLightLight"  
5.                 ButtonShadowColor="ControlDark">  
6.             </CommandBar>  
7.             <Sheets>  
8.                 <FarPoint:SheetView SheetName="Sheet1">  
9.                 </FarPoint:SheetView>  
10.             </Sheets>  
11.         </FarPoint:FpSpread>  
12.         <br />  
13.         <input id="Button1" type="button" value="button" onclick="return Button1_onclick()" />  
14.     </div>  

 经过 Html Button 点击事件触发 Spread 大小改变：

Js代码  

1. <script language="javascript" type="text/javascript">  
2. // <![CDATA[  
3.    
4.         function Button1_onclick() {  
5.             var container = document.getElementById("spreadcontainer");  
6.    
7.             var c1 = document.getElementById("FpSpread1_rowHeader");  
8.    
9.             var c2 = document.getElementById("FpSpread1_view");  
10.    
11.             container.style.height = "700px";  
12.    
13.             c1.style.height = "649px";  
14.    
15.             c2.style.height = "649px";  
16.         }  
17.    
18. // ]]>  
19.     </script>  

效果图以下：

 

Demo 下载： 点击下载

使用空间地址：点击查看