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

有些用戶提問想經過 JS 來設置 Spread  Studio for ASP.NET 表格控件來控制 Spread 高度。本文章將闡述實現方法。 javascript

實現背景: java

當用戶發起針對含有 Spread 頁面的請求時,Spread 在瀏覽器中被渲染成 HTML Table。 瀏覽器

image

因此,咱們在前臺針對 Spread 操做時,除了使用 Spread 內置的一些事件和方法外,全部針對 Table 的 DOM 屬性和 js 操做都試用於 Spread。 spa

咱們此次的實現方法就是針對 Spread 生成的 Table 進行操做實現。 server

首先,在 Spread 外部嵌套 Div 容器,HTML 代碼以下: htm

 

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 大小改變: blog

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 下載: 點擊下載 ip

使用空間地址:點擊查看 get

相關文章
相關標籤/搜索