Page History

Sv translation

language	en

Info
This feature is available since BellaDati 2.9.4

It is possible to define a custom renderer which will be used to display a specific chart or table. This renderer is defined in an extension. The user then has the option to select the renderer in chart appearance or table appearance settings.

Extension structure

Empty HTML head and HTML body
Resources
- table-renderer.js implementing rendeTable_ext(containerDiv, tableJSON) function
- table-styles.js defining styles of the table

Content of table-renderer.js

Javascript responsible for rendering HTML content of the table. Function takes two parameters containerDiv selector and tableJSON holding JSON table data produced by BellaDati (see Report API).

Code Block

language	js
linenumbers	true

var renderTable_ext#EXT_ID# = function(containerDiv, tableJSON) {
  var data = tableJSON.data;
  containerDiv.empty();
  
  // create TABLE inside containerDiv
  var table = $("<table></table>");
  table.addClass("bd-table_ext#EXT_ID#");
  containerDiv.append(table);

  // create THEAD inside TABLE
  var thead = $("<thead></thead>");
  thead.appendTo(table);
  // iterate over all rows in header
  for (i = 0; i < data.header.length; i++) {
    // insert new row into THEAD
    var theadRow =  $("<tr></tr>");
    theadRow.appendTo(thead);
    // iterate over all cells in a row
    var columns = data.header[i];
    for (j = 0; j < columns.length; j++) {
      var column = columns[j];
      if (column) {
        // insert new TH with value
        var theadCell = $("<th></th>");
        theadCell.appendTo(theadRow);
        theadCell.append(column.value);
        // set colspan/rowspan attributes
        if (typeof column.colspan != 'undefined') {
          theadCell.attr('colspan', column.colspan);
        }
        if (typeof column.rowspan != 'undefined') {
          theadCell.attr('rowspan', column.rowspan);
        }
      }
    }
  }

  // create TBODY inside TABLE
  var tbody = $("<tbody><tbody>");
  tbody.appendTo(table);
  // iterate over all rows in body
  for (i = 0; i < data.body.length; i++) {
    // insert new TR inside TBODY
    var tbodyRow = $("<tr></tr>");
    tbodyRow.appendTo(tbody);
    // iterate over all cells in a row
    var columns = data.body[i];
    for (j = 0; j < columns.length; j++) {
      var column = columns[j];
      if (column) {
        // insert new TD
        var tbodyCell = $("<td></td>");
        tbodyCell.appendTo(tbodyRow);
        tbodyCell.append(column.value);

        // set colspan/rowspan attributes
        if (typeof column.colspan != 'undefined') {
          tbodyCell.attr('colspan', column.colspan);
        }
        if (typeof column.rowspan != 'undefined') {
          tbodyCell.attr('rowspan', column.rowspan);
        }
      }
    }
  }
}

Content of table-styles.css

Code Block

language	css
linenumbers	true

.bd-table-container_ext#EXT_ID# { 
}
.bd-table_ext#EXT_ID# {
}
.bd-table_ext#EXT_ID# tbody th, .bd-table_ext#EXT_ID# tbody td {
}
.bd-table_ext#EXT_ID# tbody tr:hover td {
}
.bd-table_ext#EXT_ID# thead th {
}
.bd-table_ext#EXT_ID# thead th:hover {
}
.bd-table_ext#EXT_ID# tbody tr:nth-child(odd) {
}
.bd-table_ext#EXT_ID# tbody tr:nth-child(even) {
}
.bd-table_ext#EXT_ID# td {
}

Sample extension

Extension-SimpleTableRenderer.zip

Sv translation

language	ja

Info
この機能は、BellaDati 2.9.4以降で使用可能です。

特定のチャートやテーブルを表示するために、使用されるカスタムレンダラーを定義することができます。このレンダラーは拡張機能で定義されています。ユーザーは、チャートの外観や表の外観の設定でレンダラーを選択するオプションがあります。

拡張構造

空のHTML headとHTML body
リソース
- table-renderer.js　...rendeTable_ext(containerDiv, tableJSON)関数を実装しています
- table-styles.js　...テーブルのスタイルを定義します

table-renderer.jsのコンテンツ

Javascriptは、テーブルのHTMLコンテンツのレンダリングを担います。関数は、BellaDatiによって生成されたJSONテーブルデータを保持する、containerDiv セレクターと tableJSON という2つのパラメーターを取ります (Report APIを参照のこと)。

Code Block

language	js
linenumbers	true

var renderTable_ext#EXT_ID# = function(containerDiv, tableJSON) {
  var data = tableJSON.data;
  containerDiv.empty();
  
  // create TABLE inside containerDiv
  var table = $("<table></table>");
  table.addClass("bd-table_ext#EXT_ID#");
  containerDiv.append(table);

  // create THEAD inside TABLE
  var thead = $("<thead></thead>");
  thead.appendTo(table);
  // iterate over all rows in header
  for (i = 0; i < data.header.length; i++) {
    // insert new row into THEAD
    var theadRow =  $("<tr></tr>");
    theadRow.appendTo(thead);
    // iterate over all cells in a row
    var columns = data.header[i];
    for (j = 0; j < columns.length; j++) {
      var column = columns[j];
      if (column) {
        // insert new TH with value
        var theadCell = $("<th></th>");
        theadCell.appendTo(theadRow);
        theadCell.append(column.value);
        // set colspan/rowspan attributes
        if (typeof column.colspan != 'undefined') {
          theadCell.attr('colspan', column.colspan);
        }
        if (typeof column.rowspan != 'undefined') {
          theadCell.attr('rowspan', column.rowspan);
        }
      }
    }
  }

  // create TBODY inside TABLE
  var tbody = $("<tbody><tbody>");
  tbody.appendTo(table);
  // iterate over all rows in body
  for (i = 0; i < data.body.length; i++) {
    // insert new TR inside TBODY
    var tbodyRow = $("<tr></tr>");
    tbodyRow.appendTo(tbody);
    // iterate over all cells in a row
    var columns = data.body[i];
    for (j = 0; j < columns.length; j++) {
      var column = columns[j];
      if (column) {
        // insert new TD
        var tbodyCell = $("<td></td>");
        tbodyCell.appendTo(tbodyRow);
        tbodyCell.append(column.value);

        // set colspan/rowspan attributes
        if (typeof column.colspan != 'undefined') {
          tbodyCell.attr('colspan', column.colspan);
        }
        if (typeof column.rowspan != 'undefined') {
          tbodyCell.attr('rowspan', column.rowspan);
        }
      }
    }
  }
}

table-styles.cssのコンテンツ

Code Block

language	css
linenumbers	true

.bd-table-container_ext#EXT_ID# { 
}
.bd-table_ext#EXT_ID# {
}
.bd-table_ext#EXT_ID# tbody th, .bd-table_ext#EXT_ID# tbody td {
}
.bd-table_ext#EXT_ID# tbody tr:hover td {
}
.bd-table_ext#EXT_ID# thead th {
}
.bd-table_ext#EXT_ID# thead th:hover {
}
.bd-table_ext#EXT_ID# tbody tr:nth-child(odd) {
}
.bd-table_ext#EXT_ID# tbody tr:nth-child(even) {
}
.bd-table_ext#EXT_ID# td {
}

拡張のサンプル

Extension-SimpleTableRenderer.zip

Page tree

Versions Compared

Old Version 7

New Version Current

Key

Extension structure

Content of table-renderer.js

Content of table-styles.css

Sample extension

拡張構造

table-renderer.jsのコンテンツ

table-styles.cssのコンテンツ

拡張のサンプル