تغيير حجم GridWeb في نافذة المتصفح
Contents
[
Hide
]
سيناريوهات الاستخدام الممكنة
في بعض الأحيان تريد أن يقوم Aspose.Cells.GridWeb بتغيير حجم نفسه وفقًا لنافذة المتصفح. قد تحتاج إلى أن تقوم GridWeb دائمًا بضبط حجمها (الارتفاع والعرض) ومتوافقة مع حجم نافذة المتصفح. Aspose.Cells.GridWeb يوفر جانب العميلتغيير الحجم() وظيفة لهذا الغرض. علاوة على ذلك ، يمكنك حتى جعل التحكم في GridWeb قابلًا لتغيير حجمه في نافذة المتصفح. على سبيل المثال ، يمكنك استخدام المقبض الأيمن السفلي (عبر الماوس) لتخصيص عرضه / ارتفاعه في النافذة. تحتاج أيضًا إلى تضمين / تحديد ملفات Javascript jquery لجعلها تعمل في مصدر الصفحة في مشروعك.
استخدام طريقة تغيير حجم GridWeb
سيتحقق الكود التالي من إجراء تغيير الحجم كل 100 مللي ثانية. عندما لا يكون هناك المزيد من إجراء تغيير الحجم ، فإنه يعتقد أن عملية تغيير الحجم قد انتهت الآن. نستخدم نموذج ملف تم استيراده إلى GridWeb. نستخدم رمز جانب العميل لتغيير حجم GridWeb. تُظهر لقطة الشاشة أن GridWeb يغير حجم نفسه وفقًا لذلك عند تغيير حجم نافذة المتصفح.
عينة من الرموز
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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 باستخدام المقبض الأيمن السفلي في نافذة المتصفح.
عينة من الرموز
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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); | |
| } | |
| } | |
| } | |
| } |