Versions Compared

Old Version 4

changes.mady.by.user Unknown User (huyennth@fpt.com.vn)

Saved on

compared with

New Version 5

changes.mady.by.user Claudio Toscani

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Sv translation
languageja

この拡張機能ではBellaDatiのテーブルのレイアウトを変更することができます。この拡張機能を利用することで、以下のようにテーブルを表示することができます:

拡張管理

ここでダウンロードすることができます。

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

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

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

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

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

     

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

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

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

    3. 以下のように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. ソーステーブルに属するビューを非表示にする-レポートへの表示時にソーステーブルは不要です。テーブル外観に移動し、ビューモードでのビューを非表示にするオプションを選択します。

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

テーブルレイアウトは拡張機能に保存されているCSSスタイルシートに定義されます。このセクションではカスタムテーブルのレイアウトを調整する方法の例を説明します。スタイルシートの定義にアクセスできるように、テキストとバイナリリソースのセクションに進み、ファイルtable-styles.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」に定義されます。適用フォントを変更できるように、既存のフォントは別のものに置き換えます。

 

Sv translation
languagede

Benutzerdefinierter Tabellen-Renderer [Original Seitentitel]

Mit dieser Erweiterung können Sie das Layout Ihrer Tabelle in BellaDati ändern. Diese Erweiterung kann verwendet werden, um Tabellen wie folgt anzuzeigen:

Image Added

VERWALTUNG DER ERWEITERUNG

Laden Sie die Erweiterung von hier herunter.

Importieren Sie die Erweiterung zu BellaDati.

Gehen Sie zu den Parametern und fügen Sie die ID der View mit Tabelle hinzu, die Sie mit einem benutzerdefinierten Layout rendern möchten.

Image Added

Um die View-ID zu erhalten, wechseln Sie in den Entwicklermodus, klicken Sie auf die neu angezeigte Schaltfläche API.

Image Added

Anzeigeansicht mit benutzerdefinierter Tabelle im Bericht

  1. Der Quellbericht sollte die Option zum Anzeigen von Drill-Down und Zellensteuerungen deaktiviert haben - wählen Sie die Option Drill-Down-Zellensteuerungen ausblenden in den Einstellungen zur Tabellenansicht.
    Image Added

     

  2. Erstellen Sie eine benutzerdefinierte Inhaltsansicht, die iFrame mit benutzerdefinierter Tabelle anzeigt.
    1. Erstellen einer benutzerdefinierten Inhaltsansicht
    2. In den html-Modus wechseln

    3. Verwenden Sie HTML-Code wie folgt:

      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. Ansicht mit der Quelltabelle ausblenden - die Quelltabelle ist wahrscheinlich nicht notwendig, um im Bericht angezeigt zu werden. Gehen Sie zur Tabellenansicht und wählen Sie die Option
    Ansicht ausblenden im Anzeigemodus.
    Image Added

Anpassen des benutzerdefinierten Tabellenlayouts

Das Tabellenlayout wird durch das in der Erweiterung gespeicherte CSS-Stylesheet definiert. In diesem Abschnitt werden Beispiele für die Anpassung des Layouts von benutzerdefinierten Tabellen beschrieben. Um auf die Definition des Stylesheets zuzugreifen, gehen Sie zum Abschnitt Text und binäre Ressourcen und klicken Sie auf die Datei table table-styles.css.

Image Added

Ändern der Farbe der Kopfzeile

Die Hintergrundfarbe des Tabellenkopfes kann durch Aktualisieren des Codes des Parameterhintergrundes in tag.bd-table thead geändert werden. Die Farbe der Schrift kann durch Aktualisieren der Parameterfarbe in tag.bd-table thead geändert werden.

Ändern der Farbe des Tabellenkörpers

Die Hintergrundfarbe des Tabellenkörpers kann geändert werden, indem der Code des Parameterhintergrunds in tag.bd-table tbody tr:nth-child(odd) für ungerade Zeilen und tag.bd-table tbody tr:nth-child(even) für gerade Zeilen aktualisiert wird. Die Schriftfarbe kann geändert werden, indem die Parameterfarbe in tag.bd-table tbody tr:nth-child(odd) für ungerade Zeilen und tag.bd-table tbody tr:nth-child(even) für gerade Zeilen aktualisiert wird.

Ändern der in der Tabelle verwendeten Schriftart

Angewandte Schriften werden durch den Parameter font-family in tag.bd-table definiert. Um die angewandten Schriften zu ändern, ersetzen Sie die vorhandene Schrift durch eine andere.