テンプレート型セル

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

次のコードを使用して、RangeTemplateを作成します: API定義は次のとおりです: params row、col、rowCount、colCountはオプションです。これらのパラメーターが設定されていない場合、RangeTemplateはテンプレート範囲を作成するためにシート全体を使用します。次に例を示します: テンプレートWorkSheetのbindingPathまたは式をカスタマイズできます。 次に、RangeTemplateはセル値をデータソースとして使用して、bindingPathを解決するか、指定範囲を計算します。 条件ルールの範囲、データ検証、スパークラインのデータ範囲と日付範囲、sparklineEx、式はセルまたは範囲を参照します。これらはすべてテンプレート範囲内に含まれている必要があります。 また、テンプレートWorkSheetのスパンは、テンプレート範囲内に完全に含まれている必要があります。
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(); spread.refresh(); }
<!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="テンプレートを更新する"/> </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; }