カスタムセル

独自のセル型の作成が必要となる場合もあります。カスタムセル型の作成では、表示モードのセルで描画を行ったり、編集モードのセルでエディタをカスタマイズしたり、セル型自身との相互動作でマウスやキーボードを処理したりできます。必要とする機能が、組み込みのセル型ではサポートされない場合は、独自のセル型を作成することができます。さまざまなプロパティや関数を上書きして、独自の要件を満たす固有のセルを作成できます。

<p>セル型をカスタマイズするには、<strong>Base</strong>を継承します。さらに、<strong>paint</strong>、<strong>createEditorElement</strong>、<strong>getEditorValue</strong>などの必要なメソッドを実装します。これで、独自に作成したカスタムセル型を使用できるようになります。次に、例を示します。</p> <pre><code class="hljs js language-js"> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">MyCellType</span>(<span class="hljs-params"></span>) </span>{ } MyCellType.prototype = <span class="hljs-keyword">new</span> GC.Spread.Sheets.CellTypes.Base(); MyCellType.prototype.paint = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">ctx, value, x, y, w, h, style, options</span>) </span>{ <span class="hljs-comment">// キャンバスにセルをペイントします。</span> }; MyCellType.prototype.createEditorElement = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-comment">// DOM要素を作成して返します。</span> }; MyCellType.prototype.getEditorValue = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">editorContext</span>) </span>{ <span class="hljs-comment">// エディタの値を取得します。</span> }; MyCellType.prototype.setEditorValue = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">editorContext, value</span>) </span>{ <span class="hljs-comment">// エディタの値を設定します。</span> }; MyCellType.prototype.activateEditor = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">editorContext, cellStyle, cellRect</span>) </span>{ <span class="hljs-comment">// エディタのプロパティまたは属性の設定、エディタのバインディングイベントの設定など、エディタをアクティブにします。</span> }; <span class="hljs-comment">// その他の独自メソッド。</span> sheet.getRange(<span class="hljs-number">-1</span>, <span class="hljs-number">1</span>, <span class="hljs-number">-1</span>, <span class="hljs-number">1</span>).cellType(<span class="hljs-keyword">new</span> MyCellType()); </code></pre>
var spreadNS = GC.Spread.Sheets; window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); initSpread(spread); }; //Custom Cell Type function FivePointedStarCellType() { this.size = 10; } FivePointedStarCellType.prototype = new spreadNS.CellTypes.Base(); FivePointedStarCellType.prototype.paint = function (ctx, value, x, y, w, h, style, context) { if (!ctx) { return; } ctx.save(); // draw inside the cell's boundary ctx.rect(x, y, w, h); ctx.clip(); ctx.beginPath(); if (value) { ctx.fillStyle = "orange"; } else { ctx.fillStyle = "gray"; } var size = this.size; var dx = x + w / 2; var dy = y + h / 2; ctx.beginPath(); var dig = Math.PI / 5 * 4; ctx.moveTo(dx + Math.sin(0 * dig) * size, dy + Math.cos(0 * dig) * size); for (var i = 1; i < 5; i++) { ctx.lineTo(dx + Math.sin(i * dig) * size, dy + Math.cos(i * dig) * size); } ctx.closePath(); ctx.fill(); ctx.restore(); }; FivePointedStarCellType.prototype.getHitInfo = function (x, y, cellStyle, cellRect, context) { var xm = cellRect.x + cellRect.width / 2, ym = cellRect.y + cellRect.height / 2, size = 10; var info = { x: x, y: y, row: context.row, col: context.col, cellRect: cellRect, sheetArea: context.sheetArea }; if (xm - size <= x && x <= xm + size && ym - size <= y && y <= ym + size) { info.isReservedLocation = true; } return info; }; FivePointedStarCellType.prototype.processMouseUp = function (hitInfo) { var sheet = hitInfo.sheet; if (sheet && hitInfo.isReservedLocation) { var row = hitInfo.row, col = hitInfo.col, sheetArea = hitInfo.sheetArea; var newValue = !sheet.getValue(row, col, sheetArea); var spread = sheet.getParent(); spread.commandManager().execute({cmd: "editCell", sheetName: sheet.name(), row: row, col: col, newValue: newValue}); return true; } return false; }; function FullNameCellType() { } FullNameCellType.prototype = new spreadNS.CellTypes.Base(); FullNameCellType.prototype.paint = function (ctx, value, x, y, w, h, style, options) { if (value) { spreadNS.CellTypes.Base.prototype.paint.apply(this, [ctx, value.firstName + "." + value.lastName, x, y, w, h, style, options]); } }; FullNameCellType.prototype.updateEditor = function(editorContext, cellStyle, cellRect) { if (editorContext) { editorContext.style.width=cellRect.width; editorContext.style.height=100; return {height: 100}; } }; FullNameCellType.prototype.createEditorElement = function () { var div = document.createElement("div"); div.setAttribute("gcUIElement", "gcEditingInput"); div.style.backgroundColor= "white"; div.style.overflow= "hidden"; var span1 = document.createElement('span'); span1.style.display = "block"; var span2 = document.createElement("span"); span2.style.display = "block"; var input1 = document.createElement("input"); var input2 = document.createElement("input"); var type = document.createAttribute('type'); type.nodeValue="text"; var clonedType = type.cloneNode(true); input1.setAttributeNode(type); input2.setAttributeNode(clonedType); div.appendChild(span1); div.appendChild(input1); div.appendChild(span2); div.appendChild(input2); return div; }; FullNameCellType.prototype.getEditorValue = function (editorContext) { if (editorContext && editorContext.children.length === 4) { var input1 = editorContext.children[1]; var firstName = input1.value; var input2 = editorContext.children[3]; var lastName = input2.value; return { firstName: firstName, lastName: lastName }; } }; FullNameCellType.prototype.setEditorValue = function (editorContext, value) { if (editorContext && editorContext.children.length === 4) { var span1 = editorContext.children[0]; span1.innerHTML="First Name:"; var span2 = editorContext.children[2]; span2.innerHTML="Last Name:"; if (value) { var input1 = editorContext.children[1]; input1.value=value.firstName; var input2 = editorContext.children[3]; input2.value=value.lastName; } } }; FullNameCellType.prototype.isReservedKey = function (e) { //cell type handle tab key by itself return (e.keyCode === GC.Spread.Commands.Key.tab && !e.ctrlKey && !e.shiftKey && !e.altKey); }; FullNameCellType.prototype.isEditingValueChanged = function(oldValue, newValue) { if (newValue.firstName != oldValue.firstName || newValue.lastName != oldValue.lastName) { return true; } return false; }; function initSpread(spread) { var sheet = spread.getSheet(0); sheet.suspendPaint(); sheet.setColumnWidth(0, 100); sheet.setColumnWidth(1, 170); var columnInfo = [ { name: "result", displayName: "Result", cellType: new FivePointedStarCellType(), size: 50 }, { name: "person", displayName: "Person", cellType: new FullNameCellType(), size: 170 } ]; var source = [ { result: true, person: {firstName:"LeBron",lastName:"James"}}, { result: false, person: { firstName: "Chris", lastName: "Bosh" } }, { result: true, person: { firstName: "Dwyane", lastName: "Wade" } }, { result: false, person: { firstName: "Mike", lastName: "Miller" } }, { result: true, person: { firstName: "Mike", lastName: "Miller" } }, { result: true, person: { firstName: "Udonis", lastName: "Haslem" } }, { result: true, person: { firstName: "Mario", lastName: "Chalmers" } }, { result: true, person: { firstName: "Joel", lastName: "Anthony" } }, { result: false, person: { firstName: "Shane", lastName: "Battier" } }, { result: false, person: { firstName: "Ray", lastName: "Allen" } }, { result: true, person: { firstName: "James", lastName: "Jones" } }, { result: false, person: { firstName: "Rashard", lastName: "Lewis" } }, { result: true, person: { firstName: "Norris", lastName: "Cole" } }, { result: true, person: { firstName: "Chris", lastName: "Andersen" } }, { result: false, person: { firstName: "Jarvis", lastName: "Varnado" } }, { result: true, person: { firstName: "Juwan", lastName: "Howard" } }, ]; sheet.setDataSource(source); sheet.bindColumns(columnInfo); sheet.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="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" style="width:100%; height: 100%"></div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }