有些用戶提問想經過 JS 來設置 Spread Studio for ASP.NET 表格控件來控制 Spread 高度。本文章將闡述實現方法。 javascript
實現背景: java
當用戶發起針對含有 Spread 頁面的請求時,Spread 在瀏覽器中被渲染成 HTML Table。 瀏覽器
因此,咱們在前臺針對 Spread 操做時,除了使用 Spread 內置的一些事件和方法外,全部針對 Table 的 DOM 屬性和 js 操做都試用於 Spread。 spa
咱們此次的實現方法就是針對 Spread 生成的 Table 進行操做實現。 server
首先,在 Spread 外部嵌套 Div 容器,HTML 代碼以下: htm
- <div id="spreadcontainer" style="width: 400px; height: 200px;">
- <FarPoint:FpSpread ID="FpSpread1" runat="server" BorderColor="Black" BorderStyle="Solid"
- BorderWidth="1px" Height="100%" Width="100%">
- <CommandBar BackColor="Control" ButtonFaceColor="Control" ButtonHighlightColor="ControlLightLight"
- ButtonShadowColor="ControlDark">
- </CommandBar>
- <Sheets>
- <FarPoint:SheetView SheetName="Sheet1">
- </FarPoint:SheetView>
- </Sheets>
- </FarPoint:FpSpread>
- <br />
- <input id="Button1" type="button" value="button" onclick="return Button1_onclick()" />
- </div>
經過 Html Button 點擊事件觸發 Spread 大小改變: blog
- <script language="javascript" type="text/javascript">
- // <![CDATA[
-
- function Button1_onclick() {
- var container = document.getElementById("spreadcontainer");
-
- var c1 = document.getElementById("FpSpread1_rowHeader");
-
- var c2 = document.getElementById("FpSpread1_view");
-
- container.style.height = "700px";
-
- c1.style.height = "649px";
-
- c2.style.height = "649px";
- }
-
- // ]]>
- </script>
效果圖以下:
事件
Demo 下載: 點擊下載 ip
使用空間地址:點擊查看 get