この機能は、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つのパラメーターを取ります (レポートAPIを参照のこと)。
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のコンテンツ
.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 { }
拡張のサンプル
Overview
Content Tools