在浏览器窗口中调整GridWeb的大小

可能的使用场景

有时您希望Aspose.Cells.GridWeb能够根据浏览器窗口进行调整。您可能需要GridWeb始终调整其大小（高度、宽度）并与浏览器窗口的大小兼容。Aspose.Cells.GridWeb提供客户端 resize() 功能以实现此目的。此外，您甚至可以使GridWeb控件可以在浏览器窗口中调整大小。例如，您可以使用鼠标通过右下角的手柄自定义其在窗口中的宽度/高度。您还需要在项目的页面源中引入/指定jquery Javascript文件以使其工作。

使用GridWeb的resize方法

以下代码将每100毫秒检查是否有调整大小的操作发生。当没有更多调整大小操作时，它认为调整大小操作已经完成。我们使用一个被导入到GridWeb中的示例模板文件。我们使用客户端代码来调整GridWeb的大小。截图显示了GridWeb在调整浏览器窗口大小时相应地调整了自身大小。

todo:image_alt_text

示例代码

// For complete examples and data files, please go to https://github.com/aspose-cells/Aspose.Cells-for-.NET
//----------------------------------------------------------------------
//------ResizeGridWebUsingResizeMethod.aspx-----------------------------
//----------------------------------------------------------------------
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ResizeGridWebUsingResizeMethod.aspx.cs" Inherits="Aspose.Cells.GridWeb.Examples.CSharp.WorkingWithGridWebClientSideScript.ResizeGridWebUsingResizeMethod" %>
<%@ Register TagPrefix="acw" Namespace="Aspose.Cells.GridWeb" Assembly="Aspose.Cells.GridWeb" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style type="text/css">
.fullheight {
display: inline-block;
min-height: 80%;
height: 90%;
padding: 0;
position: relative;
margin-right: -0.3em;
vertical-align: top;
}
html, body, form {
background: #b6b7bc;
font-size: .80em;
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
margin: 0px;
padding: 0px;
color: #000000;
min-height: 99%;
height: 100%;
overflow: visible;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function doResizing() {
//alert("I'm done resizing for the moment");
$("#GridWeb1")[0].resize();
};
var resizeTimer;
$(window).resize(function () {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(doResizing, 100);
});
</script>
<title>Using GridWeb’s resize method</title>
</head>
<body>
<form id="form1" runat="server">
<div style="width: 100%; height: 100%; overflow: visible;">
<span id="gridwebpanel" class="fullheight">
<acw:GridWeb ID="GridWeb1" runat="server" Width="100%" Height="100%" ShowLoading="true" XhtmlMode="true"
PresetStyle="Standard" EnableAJAX="true">
</acw:GridWeb>
</span>
</div>
</form>
</body>
</html>
//----------------------------------------------------------------------
//------ResizeGridWebUsingResizeMethod.aspx.cs--------------------------
//----------------------------------------------------------------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Aspose.Cells.GridWeb.Examples.CSharp.WorkingWithGridWebClientSideScript
{
public partial class ResizeGridWebUsingResizeMethod : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (Page.IsPostBack == false && this.GridWeb1.IsPostBack == false)
{
string filePath = Server.MapPath("~/01_SourceDirectory/sampleResizableGridWeb.xlsx");
GridWeb1.ImportExcelFile(filePath);
}
}
}
}
view raw Examples.GridWeb-CSharp-WorkingWithGridWebClientSideScript-ResizeGridWebUsingResizeMethod hosted with ❤ by GitHub

使用Jquery UI功能使GridWeb可调整大小

以下代码将使GridWeb控件可以在浏览器窗口中调整大小。例如，您可以使用右下角的手柄来自定义GridWeb在窗口中的大小。我们首先使用相同的模板文件将其导入到GridWeb中。我们使用jquery脚本来使GridWeb可以调整大小。截图显示了GridWeb在浏览器窗口中使用其右下角手柄进行了调整。

todo:image_alt_text

示例代码

// For complete examples and data files, please go to https://github.com/aspose-cells/Aspose.Cells-for-.NET
//----------------------------------------------------------------------
//------MakingGridWebResizableUsingResizablejQueryUiFeature.aspx--------
//----------------------------------------------------------------------
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MakingGridWebResizableUsingResizablejQueryUiFeature.aspx.cs" Inherits="Aspose.Cells.GridWeb.Examples.CSharp.WorkingWithGridWebClientSideScript.MakingGridWebResizableUsingResizablejQueryUiFeature" %>
<%@ Register TagPrefix="acw" Namespace="Aspose.Cells.GridWeb" Assembly="Aspose.Cells.GridWeb" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$("#resizable").resizable(
{
resize: function () {
$("#GridWeb1").height($("#resizable").height());
$("#GridWeb1").width($("#resizable").width());
$("#GridWeb1")[0].resize();
}
}
);
});
</script>
<title>Making GridWeb resizable using resizable jquery ui feature</title>
</head>
<body>
<form id="form1" runat="server">
<div id="resizable" class="ui-widget-content">
<acw:GridWeb ID="GridWeb1" runat="server" XhtmlMode="True" Height="400px" Width="100%">
</acw:GridWeb>
</div>
</form>
</body>
</html>
//----------------------------------------------------------------------
//------MakingGridWebResizableUsingResizablejQueryUiFeature.aspx.cs-----
//----------------------------------------------------------------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Aspose.Cells.GridWeb.Examples.CSharp.WorkingWithGridWebClientSideScript
{
public partial class MakingGridWebResizableUsingResizablejQueryUiFeature : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (Page.IsPostBack == false && this.GridWeb1.IsPostBack == false)
{
string filePath = Server.MapPath("~/01_SourceDirectory/sampleResizableGridWeb.xlsx");
GridWeb1.ImportExcelFile(filePath);
}
}
}
}
view raw Examples.GridWeb-CSharp-WorkingWithGridWebClientSideScript-MakingGridWebResizableUsingResizablejQueryUiFeature hosted with ❤ by GitHub
在客户端读取GridWeb单元格的值 使用客户端功能来选择Range或获取GridWeb中的选定范围