Изменение размера 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); | |
| } | |
| } | |
| } | |
| } |
Изменение размера GridWeb с помощью функции jquery ui с изменяемым размером
Следующий код позволяет изменять размер элемента управления 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); | |
| } | |
| } | |
| } | |
| } |