Page History

この拡張機能を使用して、BellaDatiでテーブルのレイアウトを変更できます。この拡張機能を使用して、次のようなテーブルを表示できます:

拡張管理

ここから拡張機能をダウンロードすることができます。

BellaDatiに拡張機能をインポートします。 BellaDatiに拡張機能をインポートします。

パラメータに移動し、カスタムレイアウトでレンダリング対象テーブルのビューのIDを追加します。パラメーターに移動し、カスタムレイアウトでレンダリングするテーブルを含むビューのIDを追加します。

ビューIDを取得できるように開発者モードに切り替え、新しく表示されたAPIボタンを押下します。ビューIDを取得するには、開発者モードに切り替えて、新しく表示されたボタンAPIをクリックします。

レポートにカスタムテーブルでビューを表示する

レポートのカスタムテーブルを使用したビューの表示

1. ソースレポートには、ドリルダウンとセルコントロールを表示するオプションが無効になっている必要があります。テーブルの外観設定で[ドリルダウンセルコントロールを非表示にする]オプションを選択します。ソースレポートにはドリルダウン及びセルコントロールを表示するオプションを無効にする必要があります。テーブル外観設定でドリルダウンセルコントロールを非表示にするオプションを選択します。

   

    

2. カスタム表を含むiFrameを表示するカスタムコンテンツビューを作成します:カスタムテーブルでiFrameを表示するカスタムコンテンツビューを作成します

   1. カスタムコンテンツビューの作成

   2. htmlモードへの切り替え

   3. 以下のようにhtmlコードを使用します以下のようなhtmlコードを使用します:

      Code Block
      <iframe id="tableExtension" src="http://localhost:8080/extension/detail/5"></iframe> <script> var iframe = document.getElementById("tableExtension"); // get view container var viewContainer = $(iframe).parents('div.t-bdlayout-content'); iframe.width = viewContainer.width(); iframe.height = viewContainer.height() - 90; </script>

3. ソーステーブルでビューを非表示 - ソーステーブルは、ほとんどの場合レポートに表示する必要はありません。テーブルの外観に移動し、[表示モードでビューを非表示にする]オプションを選択します。
4. ソーステーブルに属するビューを非表示にする-レポートへの表示時にソーステーブルは不要です。テーブル外観に移動し、ビューモードでのビューを非表示にするオプションを選択します。

カスタムテーブルレイアウトの調整

テーブルレイアウトは拡張機能に保存されているCSSスタイルシートに定義されます。このセクションではカスタムテーブルのレイアウトを調整する方法の例を説明します。スタイルシートの定義にアクセスできるように、テキストとバイナリリソースのセクションに進み、ファイルtableテーブルのレイアウトは、拡張機能に保存されているCSSスタイルシートによって定義されます。このセクションでは、カスタムテーブルのレイアウトを調整する方法の例を説明します。スタイルシートの定義にアクセスするには、テキストとバイナリリソースのセクションに移動し、table-styles.cssをクリックします。cssファイルをクリックします。

ヘッダーの色の変更

テーブルヘッダの背景色は、タグ「タグ.bd-table thead」のパラメータ「のパラメーター background」を更新することで変更することができます。フォントの色は、タグ「のコードを更新することにより、テーブルヘッダーの背景色を変更できます。フォントの色は、タグ.bd-table thead」のパラメータ「のパラメーター color」を更新することで変更することができます。を更新することで変更できます。

テーブル本体の色の変更

テーブル本体の背景色は、奇数行のタグ「テーブルボディの背景色は、奇数行のタグ.bd-table tbody tr:nth-child(odd)」及び偶数行のタグ「 および偶数行のタグ.bd-table tbody tr:nth-child(even)」のパラメータ「 のパラメーター background 」のコードを更新することで変更することができます。フォント色は奇数行のタグ「のコードを更新することで変更できます。フォントの色は、奇数行のタグ.bd-table tbody tr:nth-child(odd)」及び偶数行のタグ「 および偶数行のタグ.bd-table tbody tr:nth-child(even)」のパラメータ「 のパラメーター color」のコードを更新することで変更することができます。を更新することで変更できます。

テーブルに適用されているフォントの変更

適用フォントは、タグ「.bd-table」のパラメータ「font-family」に定義されます。適用フォントを変更できるように、既存のフォントは別のものに置き換えます。