コメントのカスタマイズ

コメントはカスタマイズが可能であり、コメントテキストの書式、コメントの枠線、コメントの位置やサイズなど、さまざまな属性を設定できます。

<p>コメントを追加する前に、<strong>text</strong>メソッドを使用して、コメントのテキストを設定できます。コメントの位置やサイズも変更できます。次に、例を示します。</p> <pre><code class="hljs js language-js"> comment.text(<span class="hljs-string">'new comment!'</span>); comment.location(<span class="hljs-keyword">new</span> GC.Spread.Sheets.Point(<span class="hljs-number">62</span>, <span class="hljs-number">20</span>)); comment.width(<span class="hljs-number">200</span>); comment.height(<span class="hljs-number">100</span>); </code></pre> <p>行の高さや列幅を変更しても、コメントの位置やサイズが変更されないように固定したい場合があります。このような問題を解決するには、<strong>dynamicMove</strong>および<strong>dynamicSize</strong>メソッドを使用します。次に、例を示します。</p> <pre><code class="hljs js language-js"> comment.dynamicMove(<span class="hljs-literal">false</span>); comment.dynamicSize(<span class="hljs-literal">false</span>); </code></pre> <p>コメントのdynamicMoveメソッドをfalseに、dynamicSizeメソッドをtrueに設定すると、どちらのメソッドも無効になります。</p> <p>コメントテキストの編集後は、フォントや文字装飾など、テキストの書式を設定できます。次に、例を示します。</p> <pre><code class="hljs js language-js"> comment.fontFamily(<span class="hljs-string">'sans-serif'</span>); comment.fontStyle(<span class="hljs-string">'italic'</span>); comment.fontSize(<span class="hljs-string">'10pt'</span>); comment.foreColor(<span class="hljs-string">'red'</span>); comment.backColor(<span class="hljs-string">'green'</span>); comment.opacity(<span class="hljs-number">0.5</span>); comment.textDecoration(GC.Spread.Sheets.TextDecorationType.underline); comment.horizontalAlign(GC.Spread.Sheets.HorizontalAlign.left); <span class="hljs-keyword">var</span> padding1 = <span class="hljs-keyword">new</span> GC.Spread.Sheets.Padding(<span class="hljs-number">10</span>, <span class="hljs-number">20</span>, <span class="hljs-number">30</span>, <span class="hljs-number">40</span>); comment.padding(padding1); comment.autoSize(<span class="hljs-literal">true</span>); </code></pre> <p>コメントに枠線を追加できます。この枠線は、DOMの枠線の設定として定義されます。次に、例を示します。</p> <pre><code class="hljs js language-js"> comment.borderStyle(<span class="hljs-string">'dotted'</span>); comment.borderWidth(<span class="hljs-number">5</span>); comment.borderColor(<span class="hljs-string">'red'</span>); ... </code></pre> <p>複数のコメントが重なり合って表示される場合は、<strong>zIndex</strong>メソッドを使用することで、最前面から最背面までの順序を変更できます。</p> <pre><code class="hljs js language-js"> comment1.zIndex(<span class="hljs-number">100</span>); comment2.zIndex(<span class="hljs-number">101</span>); </code></pre> <p>UIとの相互動作によってコメントが変更されないようにするには、<strong>lock</strong>メソッドを使用してコメントをロックします。コメントをロックする場合は、最初にシートをロックします。コメントのテキストが変更されないようにするには、<strong>lockText</strong>メソッドを使用してテキストをロックします。</p> <pre><code class="hljs js language-js"> sheet.options.isProtected = <span class="hljs-literal">true</span>; comment.lock(<span class="hljs-literal">true</span>); comment.lockText(<span class="hljs-literal">true</span>); </code></pre>
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); spread.suspendPaint(); initSpread(spread); spread.resumePaint(); }; function initSpread(spread) { var spreadNS = GC.Spread.Sheets; var sheet = spread.getSheet(0); sheet.addSpan(1, 1, 1, 6); sheet.setValue(1, 1, "there is a comment on the upper right corner of the cell"); sheet.comments.add(1, 1, "new comment!"); var activeComment = null; spread.bind(spreadNS.Events.SelectionChanged, function (e, info) { var sheetTmp = info.sheet; var row = sheetTmp.getActiveRowIndex(); var col = sheetTmp.getActiveColumnIndex(); var comment = sheetTmp.comments.get(row, col); if (comment) { _getElementById("commentTip").innerHTML = "Comment in Cell [ " + row + " : " + col + " ]"; activeComment = comment; } else { _getElementById("commentTip").innerHTML = "No Comment Set"; activeComment = null; } updateLabels(sheet, activeComment); }); _getElementById("setProperty").addEventListener('click', function () { if (activeComment) { //1. if (_getElementById("txtText").value) { activeComment.text(_getElementById("txtText").value); } if (_getElementById("txtLocation").value) { var pos = _getElementById("txtLocation").value.split(","); activeComment.location(new spreadNS.Point(parseInt(pos[0]), parseInt(pos[1]))); } if (_getElementById("txtWidth").value) { activeComment.width(parseInt(_getElementById("txtWidth").value)); } if (_getElementById("txtHeight").value) { activeComment.height(parseInt(_getElementById("txtHeight").value)); } //2. if (_getElementById("txtFontFamily").value) { activeComment.fontFamily(_getElementById("txtFontFamily").value); } if (_getElementById("txtFontSize").value) { activeComment.fontSize(_getElementById("txtFontSize").value + "pt"); } if (_getElementById("txtFontWeight").value) { activeComment.fontWeight(_getElementById("txtFontWeight").value); } //3. if (_getElementById("txtBorderWidth").value) { activeComment.borderWidth(parseInt(_getElementById("txtBorderWidth").value)); } if (_getElementById("txtBorderColor").value) { activeComment.borderColor(_getElementById("txtBorderColor").value); } if (_getElementById("txtPadding").value) { var para = _getElementById("txtPadding").value.split(","); if (para.length === 1) { activeComment.padding(new spreadNS.Comments.Padding(para[0])); } else { activeComment.padding(new spreadNS.Comments.Padding(para[0], para[1], para[2], para[3])); } } //4. if (_getElementById("txtForeColor").value) { activeComment.foreColor(_getElementById("txtForeColor").value); } if (_getElementById("txtBackColor").value) { activeComment.backColor(_getElementById("txtBackColor").value); } if (_getElementById("txtOpacity").value) { activeComment.opacity(parseFloat(_getElementById("txtOpacity").value) / 100); } if (_getElementById("txtzIndex").value) { activeComment.zIndex(parseInt(_getElementById("txtzIndex").value)); } } }) _getElementById("chkLocked").addEventListener('change', function () { if (activeComment) { activeComment.locked(this.checked); } }) _getElementById("chkLockText").addEventListener('change', function () { if (activeComment) { activeComment.lockText(this.checked); } }) _getElementById("chkDynamicMove").addEventListener('change', function () { if (activeComment) { activeComment.dynamicMove(this.checked); } }) _getElementById("chkDynamicSize").addEventListener('change', function () { if (activeComment) { activeComment.dynamicSize(this.checked); } }) _getElementById("chkShowShadow").addEventListener('change', function () { if (activeComment) { activeComment.showShadow(this.checked); } }) _getElementById("comboBoxFontStyle").addEventListener('change', function () { if (activeComment) { activeComment.fontStyle(this.value); } }) _getElementById("comboBoxBorderStyle").addEventListener('change', function () { if (activeComment) { activeComment.borderStyle(this.value); } }) _getElementById("comboBoxTextDecoration").addEventListener('change', function () { if (activeComment) { var textDecoration = this.value; switch (textDecoration.toLowerCase()) { case "underline": activeComment.textDecoration(spreadNS.TextDecorationType.underline); break; case "linethrough": activeComment.textDecoration(spreadNS.TextDecorationType.lineThrough); break; case "overline": activeComment.textDecoration(spreadNS.TextDecorationType.overline); break; case "none": activeComment.textDecoration(spreadNS.TextDecorationType.none); break; } } }) _getElementById("comboBoxHorizontal").addEventListener('change', function () { if (activeComment) { var horizontal = this.value; switch (horizontal) { case "left": activeComment.horizontalAlign(spreadNS.HorizontalAlign.left); break; case "center": activeComment.horizontalAlign(spreadNS.HorizontalAlign.center); break; case "right": activeComment.horizontalAlign(spreadNS.HorizontalAlign.right); break; case "general": activeComment.horizontalAlign(spreadNS.HorizontalAlign.left); break; } } }) _getElementById("comboBoxDisplayMode").addEventListener('change', function () { var displayMode = this.value; if (activeComment) { activeComment.displayMode(spreadNS.Comments.DisplayMode[displayMode]); } }) _getElementById("comboBoxCommentState").addEventListener('change', function () { var commentState = this.value; if (activeComment) { activeComment.commentState(spreadNS.Comments.CommentState[commentState]); } }) _getElementById("chkSheetProtect").addEventListener('change', function () { var spread = GC.Spread.Sheets.findControl(document.getElementById('ss')); var sheet = spread.getActiveSheet(); sheet.options.isProtected = this.checked; }); _getElementById("chkSheetProtectAllow").addEventListener('change', function () { var spread = GC.Spread.Sheets.findControl(document.getElementById('ss')); var sheet = spread.getActiveSheet(); sheet.options.protectionOptions = {allowEditObjects: this.checked} }); }; function updateLabels(sheet, activeComment) { _getElementById("chkSheetProtect").checked = sheet.options.isProtected; _getElementById("chkSheetProtectAllow").checked = sheet.options.protectionOptions.allowEditObjects; var spreadNS = GC.Spread.Sheets; if (activeComment) { _getElementById("comboBoxCommentState").value = Object.keys(spreadNS.Comments.CommentState)[activeComment.commentState() + 1]; _getElementById("comboBoxDisplayMode").value = Object.keys(spreadNS.Comments.DisplayMode)[activeComment.displayMode() + 1]; _getElementById("comboBoxHorizontal").value = _getElementById("comboBoxHorizontal").options[activeComment.horizontalAlign()].value; var textDecorationType = ["underline", "linethrough", "overline", "none"]; _getElementById("comboBoxTextDecoration").value = textDecorationType[activeComment.textDecoration()]; _getElementById("comboBoxBorderStyle").value = activeComment.borderStyle(); _getElementById("comboBoxFontStyle").value = activeComment.fontStyle(); _getElementById("chkShowShadow").checked = activeComment.showShadow(); _getElementById("chkDynamicSize").checked = activeComment.dynamicSize(); _getElementById("chkDynamicMove").checked = activeComment.dynamicMove(); _getElementById("chkLockText").checked = activeComment.lockText(); _getElementById("chkLocked").checked = activeComment.locked(); _getElementById("txtzIndex").value = activeComment.zIndex(); _getElementById("txtOpacity").value = activeComment.opacity() * 100; _getElementById("txtBackColor").value = activeComment.backColor(); _getElementById("txtForeColor").value = activeComment.foreColor(); var padding = activeComment.padding(); if (padding) { _getElementById("txtPadding").value = padding.top + "," + padding.right + "," + padding.bottom + "," + padding.left; } else { _getElementById("txtPadding").value = "";; } _getElementById("txtBorderColor").value = activeComment.borderColor(); _getElementById("txtBorderWidth").value = activeComment.borderWidth(); _getElementById("txtFontWeight").value = activeComment.fontWeight(); _getElementById("txtFontSize").value = parseInt(activeComment.fontSize(), 10); _getElementById("txtFontFamily").value = activeComment.fontFamily(); _getElementById("txtHeight").value = activeComment.height(); _getElementById("txtWidth").value = activeComment.width(); var pos = activeComment.location(); if (pos) { _getElementById("txtLocation").value = pos.x + "," + pos.y; } else { _getElementById("txtLocation").value = "";; } _getElementById("txtText").value = activeComment.text(); } else { _getElementById("comboBoxCommentState").value = 'active'; _getElementById("comboBoxDisplayMode").value = 'hoverShown'; _getElementById("comboBoxHorizontal").value = 'left'; _getElementById("comboBoxTextDecoration").value = "underline"; _getElementById("comboBoxBorderStyle").value = "";; _getElementById("comboBoxFontStyle").value = "";; _getElementById("chkShowShadow").checked = false; _getElementById("chkDynamicSize").checked = false; _getElementById("chkDynamicMove").checked = false; _getElementById("chkLockText").checked = false; _getElementById("chkLocked").checked = false; _getElementById("txtzIndex").value = "";; _getElementById("txtOpacity").value = "";; _getElementById("txtBackColor").value = "";; _getElementById("txtForeColor").value = "";; _getElementById("txtPadding").value = "";; _getElementById("txtBorderColor").value = "";; _getElementById("txtBorderWidth").value = "";; _getElementById("txtFontWeight").value = "";; _getElementById("txtFontSize").value = "";; _getElementById("txtFontFamily").value = "";; _getElementById("txtHeight").value = "";; _getElementById("txtWidth").value = "";; _getElementById("txtLocation").value = "";; _getElementById("txtText").value = "";; } } function _getElementById(id) { return document.getElementById(id); }
<!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" class="sample-spreadsheets"></div> <div class="options-container"> <div class="option-row"> <h4>コメントの付いたセルを選択してください。 <span id="commentTip"></span> </h4> </div> <div class="option-row"> <div class="option"> <label>Text</label> <input id="txtText" /> </div> <div class="option"> <label>Location</label> <input id="txtLocation" /> </div> <div class="option"> <label>Width</label> <input id="txtWidth" /> </div> </div> <div class="option-row"> <div class="option"> <label>Height</label> <input id="txtHeight" /> </div> <div class="option"> <label>FontFamily</label> <input id="txtFontFamily" /> </div> <div class="option"> <label>FontStyle</label> <select id="comboBoxFontStyle"> <option value="normal">normal</option> <option value="italic">italic</option> <option value="oblique">oblique</option> <option value="inherit">inherit</option> </select> </div> </div> <div class="option-row"> <div class="option"> <label>FontSize</label> <input id="txtFontSize" /> </div> <div class="option"> <label>FontWeight</label> <input id="txtFontWeight" /> </div> <div class="option"> <label>BorderWidth</label> <input id="txtBorderWidth" /> </div> </div> <div class="option-row"> <div class="option"> <label>BorderStyle</label> <select id="comboBoxBorderStyle"> <option value="none">none</option> <option value="hidden">hidden</option> <option value="dotted">dotted</option> <option value="dashed">dashed</option> <option value="solid">solid</option> <option value="double">double</option> <option value="groove">groove</option> <option value="ridge">ridge</option> <option value="inset">inset</option> <option value="outset">outset</option> </select> </div> <div class="option"> <label>BorderColor</label> <input id="txtBorderColor" /> </div> <div class="option"> <label>Padding</label> <input id="txtPadding" /> </div> </div> <div class="option-row"> <div class="option"> <label>TextDecoration</label> <select id="comboBoxTextDecoration"> <option value="none">none</option> <option value="underline">underline</option> <option value="overline">overline</option> <option value="linethrough">linethrough</option> </select> </div> <div class="option"> <label>Opacity, %</label> <input id="txtOpacity" /> </div> </div> <div class="option-row"> <div class="option"> <label>ForeColor</label> <input id="txtForeColor" /> </div> <div class="option"> <label>BackColor</label> <input id="txtBackColor" /> </div> <div class="option"> <label>zIndex</label> <input id="txtzIndex" /> </div> </div> <div class="option-row"> <div class="option"> <label>Horizontal</label> <select id="comboBoxHorizontal"> <option value="left">left</option> <option value="center">center</option> <option value="right">right</option> <option value="general">general</option> </select> </div> <div class="option"> <label>CommentState</label> <select id="comboBoxCommentState"> <option value="active">active</option> <option value="edit">edit</option> <option value="normal">normal</option> </select> </div> </div> <div class="option-row"> <label>DisplayMode</label> <select id="comboBoxDisplayMode" style="width:auto;"> <option value="hoverShown">hoverShown</option> <option value="alwaysShown">alwaysShown</option> </select> </div> <div class="option-row"> <div class="checkbox"> <input id="chkLocked" type="checkbox" checked /> <label for="chkLocked">Locked</label> </div> <div class="checkbox"> <input id="chkLockText" type="checkbox" checked /> <label for="chkLockText">LockText</label> </div> <div class="checkbox"> <input id="chkSheetProtect" type="checkbox" /> <label for="chkSheetProtect" style="width:auto">Sheet IsProtected</label> </div> <div class="checkbox"> <input id="chkSheetProtectAllow" type="checkbox" /> <label for="chkSheetProtectAllow" style="width:auto; display: inline">Allow EditObjects When Sheet IsProtected</label> </div> </div> <div class="option-row"> <div class="checkbox"> <input id="chkDynamicMove" type="checkbox" checked /> <label for="chkDynamicMove">DynamicMove</label> </div> <div class="checkbox"> <input id="chkDynamicSize" type="checkbox" checked /> <label for="chkDynamicSize">DynamicSize</label> </div> <div class="checkbox"> <input id="chkShowShadow" type="checkbox" /> <label for="chkShowShadow">ShowShadow</label> </div> </div> <div class="option-row"> <input type="button" id="setProperty" 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; } .sample-options{ z-index: 1000; } .option { padding-bottom: 6px; } .checkbox { padding-right: 12px; display: inline-block; } label { display: inline-block; min-width: 100px; } input, select { width: 100%; padding: 4px 0; margin-top: 4px; box-sizing: border-box; } input[type=checkbox] { width: auto; padding: 0; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }