テンプレート型セル

テンプレート型セルは、セル範囲のテンプレートを単一のセルタイプとして定義し、そのテンプレートをセルに適用してデータをテンプレートにロードできる機能です。これには、複数の行や列を含めることができます。たとえば、1つのセルにカードビューを表示できます。なお、テンプレート型セルでのデータはロードのみとなり、バインドではないためテンプレート上から直接データを編集することはできません。

<p>次のコードを使用して、RangeTemplateを作成します:</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> cellType = <span class="hljs-keyword">new</span> GC.Spread.Sheets.CellTypes.RangeTemplate(templateSheet, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">12</span>, <span class="hljs-number">11</span>); sheet.setCellType(<span class="hljs-number">3</span>, <span class="hljs-number">2</span>, cellType, GC.Spread.Sheets.SheetArea.viewport); </code></pre> <p>API定義は次のとおりです:</p> <pre><code class="hljs js language-js"> <span class="hljs-comment">/** * <span class="hljs-doctag">@description </span>RangeTemplateは、参照ワークシートの範囲からテンプレートを提供し、セルに適用できます。 セルをテンプレートと同じようにレンダリングし、データを設定します。 パラメータrow、col、rowCount、colCountが設定されていない場合、ワークシート全体が範囲スコープとして使用されます。 * <span class="hljs-doctag">@extends </span>GC.Spread.Sheets.CellTypes.Base * <span class="hljs-doctag">@param <span class="hljs-type">{GC.Spread.Sheets.Worksheet}</span> </span>sheet テンプレートの対象となるワークシート。ワークシートは他のワークブックにすることができます。 * <span class="hljs-doctag">@param <span class="hljs-type">{number}</span> </span>[row] テンプレートの対象となる範囲の開始行 * <span class="hljs-doctag">@param <span class="hljs-type">{number}</span> </span>[col] テンプレートの対象となる範囲の開始列 * <span class="hljs-doctag">@param <span class="hljs-type">{number}</span> </span>[rowCount] テンプレートの対象となる範囲の行数 * <span class="hljs-doctag">@param <span class="hljs-type">{number}</span> </span>[colCount] テンプレートの対象となる範囲の列数 */</span> </code></pre> <p>params row、col、rowCount、colCountはオプションです。これらのパラメーターが設定されていない場合、RangeTemplateはテンプレート範囲を作成するためにシート全体を使用します。次に例を示します:</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> templateSheet = <span class="hljs-keyword">new</span> GC.Spread.Sheets.Worksheet(); templateSheet.setRowCount(<span class="hljs-number">12</span>); templateSheet.setColumnCount(<span class="hljs-number">11</span>); <span class="hljs-keyword">var</span> cellType = <span class="hljs-keyword">new</span> GC.Spread.Sheets.CellTypes.RangeTemplate(templateSheet); sheet.setCellType(<span class="hljs-number">3</span>, <span class="hljs-number">2</span>, cellType, GC.Spread.Sheets.SheetArea.viewport); </code></pre> <p>テンプレートWorkSheetのbindingPathまたは式をカスタマイズできます。 次に、RangeTemplateはセル値をデータソースとして使用して、bindingPathを解決するか、指定範囲を計算します。</p> <p>条件ルールの範囲、データ検証、スパークラインのデータ範囲と日付範囲、sparklineEx、式はセルまたは範囲を参照します。これらはすべてテンプレート範囲内に含まれている必要があります。 また、テンプレートWorkSheetのスパンは、テンプレート範囲内に完全に含まれている必要があります。</p>
function ImageCellType() { this.typeName = "ImageCellType"; } ImageCellType.prototype = new GC.Spread.Sheets.CellTypes.Base(); ImageCellType.prototype.paint = function (ctx, value, x, y, w, h, style, context) { style.backgroundImage = value; style.backgroundImageLayout = GC.Spread.Sheets.ImageLayout.center; value = ""; GC.Spread.Sheets.CellTypes.Text.prototype.paint.apply(this, arguments); } window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 }); initSpread(spread); }; function bindEvent(renderSheet, templateSheet) { document.getElementById("update").onclick = function () { var celltype = new GC.Spread.Sheets.CellTypes.RangeTemplate(templateSheet); renderSheet.setCellType(-1, 0, celltype); }; } function initSpread(spread) { var renderSheet = spread.getActiveSheet(); var templateSheet = spread.getSheet(1); bindEvent(renderSheet, templateSheet); var imageCellType = new ImageCellType(); templateSheet.fromJSON(templatesheetjson); templateSheet.getCell(2, 2).cellType(imageCellType); renderSheet.suspendPaint(); var celltype = new GC.Spread.Sheets.CellTypes.RangeTemplate(templateSheet); renderSheet.autoGenerateColumns = false; renderSheet.setDataSource(data); var cardInfo = { displayName: "Person Card", size: 440, value: function (item) { return item; }, cellType: celltype }; renderSheet.defaults.rowHeight = 207; renderSheet.bindColumn(0, cardInfo); renderSheet.bindColumn(1, { displayName: "Name", name: 'fullName', size: 150 }); renderSheet.bindColumn(2, { displayName: "Phone", name: 'phone', size: 150 }); renderSheet.bindColumn(3, { displayName: "Email", name: 'email', size: 360 }); renderSheet.bindColumn(4, { displayName: "Registered Date", name: 'registered.date', size: 240 }); renderSheet.resumePaint(); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta name="spreadjs culture" content="ja-jp" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/data/rangecelltype-data.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/data/rangecelltype-templatesheet.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" class="sample-spreadsheets"></div> <div class="options-container"> <div class="option-row"> <p>この例では、テンプレートのラベルテキストを変更できます。Templateシートに切り替えて、電子メール(Email)または電話(Phone)のテキストを変更し、Update RangeCellTypeボタンをクリックすることで変更をテンプレートに適用できます。TemplateシートからSheet1に戻ると変更を確認できます。</p> <input type="button" id="update" value="Update RangeCelltype"/> </div> </div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 280px); height: 100%; overflow: hidden; float: left; } .options-container { float: right; width: 280px; overflow: auto; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; } .option-row { padding-bottom: 8px; } label { padding-bottom: 4px; display: block; } input { width: 100%; padding: 4px 8px; box-sizing: border-box; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }