GridWeb の操作

Microsoft Excel ファイルを開く

Aspose.Cells.GridWeb コントロールは、Microsoft Excel ファイルを開いて読み込むことができます - データ、書式設定、グラフ、画像などを備えています。このトピックではその方法について説明します。

GridWeb コントロールを使用して Excel ファイルを開くには:

  1. Aspose.Cells.GridWeb コントロールを Web フォームまたはページに追加します。
  2. ファイルパスを指定して Excel ファイルをインポートします。
  3. アプリケーションを実行するか、ページを開きます。

Excel ファイルから Aspose.Cells.GridWeb コントロールにコンテンツをロードするには、importExcelFile メソッドを呼び出して Excel ファイルのパスを指定する必要があります。その後、GridWeb コントロールは指定されたパスからファイルを自動的に検索し、そのファイルの内容を表示します。 Excel ファイルの内容をロードするコード スニペットを以下に示します。

上記のコード スニペットは、任意の方法で使用できます。たとえば、Web フォームの読み込み時に Excel ファイルを自動的に読み込むには、自分で指定したフォームの Page_Load イベントにこのコードを追加します。

Excel ファイルが GridWeb にロードされる

todo:image_alt_text

Microsoft Excel ファイルの保存

Aspose.Cells.GridWeb コントロールを使用して、Web サイト上で GUI モードで新しい Microsoft Excel ファイルを作成したり、既存の Microsoft Excel ファイルを操作したりすることができます。ファイルは Excel ファイルに保存できます。 Aspose.Cells.GridWeb は、オンライン スプレッドシート エディタとして効果的に機能します。このトピックでは、グリッドのコンテンツを Excel ファイルに保存する方法について説明します。

ファイルとして保存する

Aspose.Cells.GridWeb コントロールの内容を Excel ファイルとして保存するには:

  1. Aspose.Cells.GridWeb コントロールを Web フォームまたはページに追加します。
  2. 作業内容を Excel ファイルとして指定したパスに保存します。
  3. アプリケーションを実行するか、ページを開きます。

以下のコード例は、グリッドのコンテンツを Excel ファイルに保存する方法を示しています。

上記のコード スニペットは、いくつかの方法で使用できます。一般的な方法は、クリック時にグリッドの内容を Excel ファイルに保存するボタンを追加することです。 Aspose.Cells.GridWeb は、このタスクに対する簡単なアプローチを提供します。 Aspose.Cells.GridWeb には SaveCommand というイベントがあります。上記のコード スニペットを SaveCommand イベントのイベント ハンドラーに追加すると、ユーザーは Aspose.Cells.GridWeb の組み込みファイルをクリックして作業を保存できます。保存ボタン。

Aspose.Cells.GridWeb とそのヘッダー バーのサイズ変更

この記事では、Aspose.Cells.GridWeb API を使用して実行時に GridWeb のサイズ変更を行う方法について説明します。また、データを読みやすくするために Aspose.Cells.GridWeb コントロールのヘッダー バーのサイズを変更する方法についても説明します。

Aspose.Cells.GridWeb の幅と高さを変更する

Aspose.Cells.GridWeb コントロールの幅と高さの変更は単純ですが重要な機能です。 Aspose.Cells.GridWeb コントロールは、API の GridWeb クラスによって表されます。 GridWeb コントロールの幅と高さを変更するには、その幅と高さのプロパティを使用するだけです。

以下のコード スニペットの出力を以下に示します。

GridWeb コントロールの幅と高さを変更しました

todo:image_alt_text

ヘッダーバーの幅と高さの変更

Aspose.Cells.GridWeb コントロールには、次の 2 つのヘッダー バーが含まれています。

  • 上部のヘッダー バー。このヘッダー バーは列を A、B、C、D などとして表します。
  • 左側のヘッダー バー。このヘッダー バーは行を 1、2、3、4 などとして表します。

これらのヘッダー バーの両方を以下に示します。

ヘッダーバー

todo:image_alt_text

GridWeb コントロールの HeaderBarHeight プロパティと HeaderBarWidth プロパティをそれぞれ使用して、上部のヘッダー バーの高さと左側のヘッダー バーの幅を変更します。以下の図は、次のコード例の出力を示しています。

ヘッダーバーの幅と高さを変更しました

todo:image_alt_text

Aspose.Cells.GridWeb イベントの操作

すべての開発者は、イベントとその目的をよく知っている必要があります。イベントは、コントロールまたはクラスで発生する可能性のある変更の通知を送信するために使用されます。 Aspose.Cells.GridWeb には、コントロールで特定の変更が発生したときに特定のタスクを実行するために使用できるイベントがいくつかあります。

このトピックでは、Aspose.Cells.GridWeb コントロールでサポートされるすべてのイベントの概要と、これらのイベントの処理方法の詳細を説明します。

グリッドイベントの概要

Aspose.Cells.GridWeb コントロールは、コントロール内で特定のイベントがトリガーされたときに操作を実行するためのより詳細な制御を提供するいくつかのイベントをサポートしています。 Aspose.Cells.GridWeb コントロールでサポートされるイベントの完全なリストは以下にあります。

イベント 説明
セルコマンド セルのコマンド ハイパーリンクがクリックされたときに発生します。このイベントが発生すると、そのパラメーター e.Argument によってコマンドの名前が提供されます。
セルダブルクリック セルがダブルクリックされると発生します。
列削除済み ユーザーがクライアント側のメニューを使用してワークシートから列を削除すると発生します。
列の削除 ユーザーがクライアント側メニューを使用してワークシートから列を削除しようとしているときに発生します。
列ダブルクリック 列ヘッダーがダブルクリックされると発生します。
列が挿入されました ユーザーがクライアント側のメニューを使用してワークシートに列を挿入すると発生します。
カスタムコマンド ユーザーがカスタム コマンド ボタンをクリックすると発生します。
カスタムデータのロード コントロールの EnableSession プロパティが false に設定されており、ワークシート データを読み込む必要がある場合に発生します。このイベントをセッションレス モードで処理して、ファイルまたはデータベースからワークシート データをロードできます。
PageIndexChanged コントロールのシート ページ インデックスが変更されたときに発生します。
行削除済み ユーザーがクライアント側のメニューを使用してワークシートから行を削除すると発生します。
行の削除 ユーザーがクライアント側メニューを使用してワークシートから行を削除しようとしているときに発生します。
行ダブルクリック 行ヘッダーがダブルクリックされると発生します。
行挿入済み ユーザーがクライアント側のメニューを使用してワークシートに行を挿入すると発生します。
保存コマンド 次のときに発生します。保存ボタンがクリックされました。
シートタブクリック シート タブをクリックすると発生します。
送信コマンド 次のときに発生します。提出するボタンがクリックされました。
元に戻すコマンド 次のときに発生します。元に戻すボタンがクリックされました。
AjaxCall終了 コントロールの AJAX 更新が完了したときに発生します。 (EnableAJAX は true に設定されます)。
CellModifiedOnAjax AJAX 呼び出しでセルが変更されたときに発生します。
AfterColumnFilter フィルターが列に適用されるときに発生します。

グリッドイベントの処理

特定のイベントのトリガー時に特定の操作を実行するには、イベント ハンドラーを作成する必要があります。イベント ハンドラーは、特定のイベントがトリガーされると、目的のタスクを実行します。次の例は、単純なグリッド イベントを処理する方法を示しています。

ダブルクリックイベントの操作

Aspose.Cells.GridWeb には、次の 3 種類のダブルクリック イベントが含まれています。

  • CellDoubleClick。セルがダブルクリックされると起動されます。
  • ColumnDoubleClick。列ヘッダーがダブルクリックされると起動されます。
  • RowDoubleClick。行ヘッダーがダブルクリックされると起動されます。

このトピックでは、Aspose.Cells.GridWeb でダブルクリック イベントを有効にする方法について説明します。これらのイベントのイベント ハンドラーの作成についても説明します。

ダブルクリックイベントを有効にする

GridWeb コントロールの EnableDoubleClickEvent プロパティを true に設定することで、すべての種類のダブルクリック イベントをクライアント側で有効にすることができます。

ダブルクリック イベントを有効にすると、任意のダブルクリック イベントのイベント ハンドラーを作成できるようになります。これらのイベント ハンドラーは、特定のダブルクリック イベントが発生したときに特定のタスクを実行します。

ダブルクリックイベントの処理

ダブルクリック Cell

CellDoubleClick イベントのイベント ハンドラーは、CellEventArgs 型の引数を提供します。これは、ダブルクリックされたセルの完全な情報を提供します。

列ヘッダーをダブルクリックします

ColumnDoubleClick イベントのイベント ハンドラーは、ダブルクリックされたヘッダーの列のインデックス番号とその他の情報を提供する RowColumnEventArgs 型の引数を提供します。

行ヘッダーをダブルクリックします

RowDoubleClick イベントのイベント ハンドラーは、ダブルクリックされたヘッダーの行のインデックス番号とその他の関連情報を提供する RowColumnEventArgs 型の引数を提供します。

Aspose.Cells.GridWeb のスタイルまたは外観の設定

Aspose.Cells.GridWeb には独自のデフォルトのルック アンド フィールがありますが、その外観を変更することができます。 Aspose.Cells.GridWeb には、開発者がその外観を完全に制御できるようにするいくつかのプロパティが用意されています。このトピックでは、これらのプロパティのいくつかについて説明します。

Aspose.Cells.GridWeb のスタイルまたは外観の設定

プリセットスタイル

開発者の労力を節約するために、Aspose.Cells.GridWeb はいくつかのプリセット スタイルを提供しています。リストからスタイルを選択するだけで、スタイルを適用できます。

スタイル カラースキーム
標準
カラフル1 薔薇
カラフル2
プロフェッショナル1 シアン
プロフェッショナル2 またシアン
伝統的1 暗い
トラディショナル2 グレー
カスタム カスタマイズされた
特定のスタイルを選択すると、GridWeb コントロールの外観全体が変更されます。開発者は、Aspose.Cells.GridWeb の柔軟な API を使用して、実行時に適用するプリセット スタイルを選択できます。

GridWeb コントロールは、開発者が任意のプリセット スタイルを割り当てることができる PresetStyle プロパティを提供します。

以下のコード スニペットの出力を以下に示します。

Colorful1 スタイルが適用された GridWeb コントロール

todo:image_alt_text

ヘッダーバーのスタイル

GridWeb コントロールを見ると、2 つのヘッダー バーに気づくでしょう。 1 つは列 (A、B、C、D など) 用で、もう 1 つは行 (1、2、3、4 など) 用です。 Aspose.Cells.GridWeb を使用すると、開発者はこれらのヘッダー バーの外観を制御できます。開発者は実行時にヘッダー バーのスタイルを設定できます。

タブバーのスタイル

タブバーのスタイルを設定することも可能です。次のコードを参照してください

スタイルファイルの読み込み中

既存のスタイル ファイルから GridWeb コントロールにスタイル設定を適用するには、開発者はスタイル ファイルのパスをコントロールの CustomStyleFileName プロパティに設定します。ただし、その前に、コントロールの PresetStyle プロパティを Custom に設定する必要があります。これは、そのスタイル ファイルには、開発者によってすでに定義されているカスタム スタイル情報が含まれているためです。

カスタム スタイルが適用された GridWeb を示す次の画像を参照してください。

todo:image_alt_text

カスタム スタイル テンプレートのサンプル

カスタム スタイル テンプレートのサンプルを次に示します。要件に応じて変更できます。

 <aspose.excel.web.viewerStyletemplate runat="server" HeaderBarWidth="30pt" ScrollBarBaseColor="#AFEEEE" SelectCellBgColor="#FFFAF0" ActiveHeaderBgColor="#DAA520" ActiveCellBgColor="#DDDDFF" FrameTableStyle-BorderStyle="Solid" FrameTableStyle-LeftBorderStyle-BorderWidth="" FrameTableStyle-LeftBorderStyle-BorderColor="" FrameTableStyle-LayoutFixed="Fixed" FrameTableStyle-RightBorderStyle-BorderWidth="" FrameTableStyle-RightBorderStyle-BorderColor="" FrameTableStyle-BorderWidth="1px" FrameTableStyle-CellSpacing="0" FrameTableStyle-BorderColor="#C0FFC0" FrameTableStyle-CellPadding="0" FrameTableStyle-TopBorderStyle-BorderWidth="" FrameTableStyle-TopBorderStyle-BorderColor="" FrameTableStyle-BackColor="#FFFFCC" FrameTableStyle-BottomBorderStyle-BorderWidth="" FrameTableStyle-BottomBorderStyle-BorderColor="" HeaderBarStyle-LeftBorderStyle-BorderWidth="" HeaderBarStyle-LeftBorderStyle-BorderColor="" HeaderBarStyle-verticalalign="Middle" HeaderBarStyle-RightBorderStyle-BorderWidth="" HeaderBarStyle-RightBorderStyle-BorderColor="" HeaderBarStyle-BorderWidth="1px" HeaderBarStyle-font-size="10pt" HeaderBarStyle-BorderColor="#00C0C0" HeaderBarStyle-BorderStyle="Solid" HeaderBarStyle-horizontalalign="Center" HeaderBarStyle-ForeColor="Red" HeaderBarStyle-TopBorderStyle-BorderWidth="" HeaderBarStyle-TopBorderStyle-BorderColor="" HeaderBarStyle-BackColor="#D8BFD8" HeaderBarStyle-BottomBorderStyle-BorderWidth="" HeaderBarStyle-BottomBorderStyle-BorderColor="" ViewTableStyle-LeftBorderStyle-BorderWidth="" ViewTableStyle-LeftBorderStyle-BorderColor="" ViewTableStyle-LayoutFixed="Fixed" ViewTableStyle-RightBorderStyle-BorderWidth="" ViewTableStyle-RightBorderStyle-BorderColor="" ViewTableStyle-BorderWidth="0px" ViewTableStyle-CellSpacing="0" ViewTableStyle-CellPadding="0" ViewTableStyle-TopBorderStyle-BorderWidth="" ViewTableStyle-TopBorderStyle-BorderColor="" ViewTableStyle-BottomBorderStyle-BorderWidth="" ViewTableStyle-BottomBorderStyle-BorderColor="" BottomTableStyle-LeftBorderStyle-BorderWidth="" BottomTableStyle-LeftBorderStyle-BorderColor="" BottomTableStyle-LayoutFixed="Fixed" BottomTableStyle-RightBorderStyle-BorderWidth="" BottomTableStyle-RightBorderStyle-BorderColor="" BottomTableStyle-Height="32pt" BottomTableStyle-BorderWidth="0px" BottomTableStyle-CellSpacing="0" BottomTableStyle-BorderColor="#80FF80" BottomTableStyle-CellPadding="0" BottomTableStyle-ForeColor="#FFE0C0" BottomTableStyle-TopBorderStyle-BorderStyle="Solid" BottomTableStyle-TopBorderStyle-BorderWidth="1px" BottomTableStyle-TopBorderStyle-BorderColor="#FF69B4" BottomTableStyle-BottomBorderStyle-BorderWidth="" BottomTableStyle-BottomBorderStyle-BorderColor="" HeaderBarHeight="15pt" ActiveTabStyle-LeftBorderStyle-BorderWidth="" ActiveTabStyle-LeftBorderStyle-BorderColor="" ActiveTabStyle-RightBorderStyle-BorderWidth="" ActiveTabStyle-RightBorderStyle-BorderColor="" ActiveTabStyle-Height="15pt" ActiveTabStyle-BorderWidth="1px" ActiveTabStyle-font-size="10pt" ActiveTabStyle-BorderColor="#00C0C0" ActiveTabStyle-BorderStyle="Solid" ActiveTabStyle-ForeColor="#FF00FF" ActiveTabStyle-TopBorderStyle-BorderWidth="" ActiveTabStyle-TopBorderStyle-BorderColor="" ActiveTabStyle-BackColor="#80FFFF" ActiveTabStyle-BottomBorderStyle-BorderWidth="" ActiveTabStyle-BottomBorderStyle-BorderColor="" HeaderBarTableStyle-LeftBorderStyle-BorderWidth="" HeaderBarTableStyle-LeftBorderStyle-BorderColor="" HeaderBarTableStyle-LayoutFixed="Fixed" HeaderBarTableStyle-RightBorderStyle-BorderWidth="" HeaderBarTableStyle-RightBorderStyle-BorderColor="" HeaderBarTableStyle-BorderWidth="0px" HeaderBarTableStyle-CellSpacing="0" HeaderBarTableStyle-CellPadding="0" HeaderBarTableStyle-TopBorderStyle-BorderWidth="" HeaderBarTableStyle-TopBorderStyle-BorderColor="" HeaderBarTableStyle-BackColor="#C0FFC0" HeaderBarTableStyle-BottomBorderStyle-BorderWidth="" HeaderBarTableStyle-BottomBorderStyle-BorderColor="" DefaultGridLineColor="#228B22" TabStyle-LeftBorderStyle-BorderWidth="" TabStyle-LeftBorderStyle-BorderColor="" TabStyle-RightBorderStyle-BorderWidth="" TabStyle-RightBorderStyle-BorderColor="" TabStyle-Height="15pt" TabStyle-BorderWidth="1px" TabStyle-font-size="8pt" TabStyle-BorderColor="#8080FF" TabStyle-BorderStyle="Groove" TabStyle-ForeColor="#FFFFCC" TabStyle-TopBorderStyle-BorderWidth="" TabStyle-TopBorderStyle-BorderColor="" TabStyle-BackColor="#C0C0FF" TabStyle-BottomBorderStyle-BorderWidth="" TabStyle-BottomBorderStyle-BorderColor="" scrollbararrowColor="#778899"/>

Web フォームでのコントロールの作成

この記事では、GridWeb コントロールを含む単純な Web フォーム JSP (Java Server Page) を作成する方法を説明します。

ステップ 1 - ディレクトリ構造の作成

次のディレクトリ構造を作成する必要があります。ウェブアプリTomcatサーバーのディレクトリ

todo:image_alt_text

これらは、作成する必要があるディレクトリとファイルです。コメントを読んでフォローしてください。最新の Aspose.Cells.GridWeb for Java リリース アーカイブは、以下から入手できます。このリンク.

 SamplePageGridWebJava

SamplePageGridWebJava\grid

//Get acwclient directory from GridWeb latest release archive from Downloads section

SamplePageGridWebJava\acwclient

SamplePageGridWebJava\WEB-INF

SamplePageGridWebJava\WEB-INF\lib

//Get aspose-gridweb-x.x.x.jar file from GridWeb latest release archive from Downloads section

SamplePageGridWebJava\WEB-INF\aspose-gridweb-x.x.x.jar

SamplePageGridWebJava\WEB-INF\web.xml

SamplePageGridWebJava\head.jsp

//Create this excel file using Microsoft Excel or you can use any excel file and rename it SampleExcel.xlsx

SamplePageGridWebJava\SampleExcel.xlsx

SamplePageGridWebJava\SamplePage.jsp

ステップ 2 - 作成したファイルにコードを追加する

このセクションでは、上記のディレクトリ構造で作成されるさまざまなファイルのコードを示します。これらのコードを取得し、メモ帳で開いてコピー/ペーストしてファイルに追加してください。

Web.xml

 <?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">

  <display-name>testGridWeb</display-name>

  <welcome-file-list>

    <welcome-file>SamplePage.jsp</welcome-file>

  </welcome-file-list>

  <servlet>

    <display-name>GridWebServlet</display-name>

    <servlet-name>GridWebServlet</servlet-name>

    <servlet-class>com.aspose.gridweb.GridWebServlet</servlet-class>

  </servlet>

  <servlet-mapping>

    <servlet-name>GridWebServlet</servlet-name>

    <url-pattern>/GridWebServlet</url-pattern>

  </servlet-mapping>

</web-app>

head.jsp

 <%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9"/>

<base href="<%=basePath%>">

<script type="text/javascript" language="javascript"

	src="grid/acw_client/acwmain.js"></script>

<script type="text/javascript" language="javascript"

	src="grid/acw_client/lang_en.js"></script>

<link href="grid/acw_client/menu.css" rel="stylesheet" type="text/css" />

<style>

span.acwxc {

	overflow: hidden;

	border: none;

	display: block;

	white-space: pre;

}

</style>

<style>

span.rotation90 {

	width: 100%;

	height: 100%;

	border: none;

	-webkit-transform: rotate(-90deg);

	-moz-transform: rotate(-90deg);

	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3 );

	display: block

}

</style>

<style>

span.rotation-90 {

	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1 );

	width: 100%;

	height: 100%;

	border: none;

	-webkit-transform: rotate(90deg);

	-moz-transform: rotate(90deg);

	display: block

}

</style>

<style>

span.wrap {

	white-space: pre-wrap;

	white-space: -moz-pre-wrap;

	white-space: -pre-wrap;

	white-space: -o-pre-wrap;

	word-wrap: break-word;

	-ms-word-break: break-all;

}

</style>

サンプルページ.jsp

ステップ 3 - サンプル JSP Web ページの実行

これですべての作業が完了しました。 Web ページを実行する時が来ました。 Tomcat サーバーを起動し、次の URL を Web ブラウザに貼り付けてください。

 http://localhost:8080/SamplePageGridWebJava/SamplePage.jsp

次のスクリーンショットのようなものが表示されます。おめでとうございます。JSP ページで GridWeb コントロールが正常に使用されました。

todo:image_alt_text

グリッドウェブの印刷

開発者は、Microsoft Excel ファイルを保存せずに、Web ページに含まれる GridWeb コンテンツを印刷する必要がある場合があります。 Aspose.Cells.GridWeb コントロールはこの機能をサポートしています。

グリッドウェブの印刷

別のファイルを保存せずに印刷するには、クライアント側で GridWeb クラスの print() メソッドを呼び出してグリッドを印刷します。適切なイベントを選択することもできます。

クライアント側から呼び出しているため、最初に GridWeb クライアント ID を取得する必要があります。クライアント ID は、gridweb.getClientID() メソッドを使用して取得できます。

クライアント側のサンプルコード

クライアント側から Gridweb.print() メソッドを呼び出す次のリンクを参照してください。

HTML

 <a href="#" onclick='<%=gridweb.getClientID()%>.print(); '>Print Function of GridWeb</a>

さまざまなグリッド モードの概要

この記事では、Aspose.Cells.GridWeb のさまざまなモードについて説明します。これらのモードは、機能と動作が異なるため、論理的に区別されます。さまざまなタイプのモードを次のように識別しました。

  • 編集モード
  • ビューモード

これらのモードにはすべて独自の特徴があります。開発者は、要件に応じて任意のモードで Aspose.Cells.GridWeb を操作できます。以下で各モードを見ていきます。

編集モード

デフォルトでは、Aspose.Cells.GridWeb コントロールは編集モードになっています。編集モードでは、Aspose.Cells.GridWeb コントロールが提供するすべての機能を使用して、グリッド コンテンツを完全に編集または変更できます。これらの機能には次のものが含まれます。

  • グリッドの内容を Microsoft Excel ファイルに保存します。
  • データをサーバーに送信します。
  • 計算式。
  • 以前のアクションを元に戻すか破棄します。
  • 行と列の管理。
  • データの切り取り、コピー、または貼り付け。
  • セルの書式設定など

編集モードの GridWeb コントロール

todo:image_alt_text

開発者は、GridWeb コントロールの EditMode プロパティを true に設定することで、プログラムで編集モードに切り替えることもできます。

コード例

ビューモード

GridWeb コントロールが表示モードの場合、ユーザーはグリッド コンテンツを編集または変更できません。つまり、ユーザーはグリッド コンテンツを表示することしかできません。このため、このモードは表示モードと呼ばれます。表示モードでは、いくつかのボタン (送信保存そして元に戻す) は非表示になり、右クリックすると表示されるメニューには コピーのみが含まれます。そして探すオプション。

表示モードの GridWeb コントロール

todo:image_alt_text

開発者がユーザーにデータの表示のみを許可したい場合は、GridWeb コントロールの EditMode プロパティを false* に設定することで、プログラムによって表示モードに切り替えることができます。

コード例