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

可能的使用场景

有时你想要 Aspose.Cells.GridWeb 应该根据浏览器窗口调整自己的大小。您可能需要 GridWeb 应始终调整其大小（高度、宽度）并与浏览器窗口的大小兼容。 Aspose.Cells.GridWeb提供客户端*调整大小()*为目的而发挥作用。此外，您甚至可以使 GridWeb 控件在浏览器窗口中调整大小。例如，您可以使用右下角的手柄（通过鼠标）来自定义其在窗口中的宽度/高度。您还需要包含/指定 jquery Javascript 文件，以使其在项目的页面源中工作。

使用 GridWeb 的调整大小方法

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

待办事项：图片_替代_文本

示例代码

// 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 已使用其在浏览器窗口中右下角的手柄调整了大小。

待办事项：图片_替代_文本

示例代码

// 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 单元格的值