コメントを追加する前に、textメソッドを使用して、コメントのテキストを設定できます。コメントの位置やサイズも変更できます。次に、例を示します。
行の高さや列幅を変更しても、コメントの位置やサイズが変更されないように固定したい場合があります。このような問題を解決するには、dynamicMoveおよびdynamicSizeメソッドを使用します。次に、例を示します。
コメントのdynamicMoveメソッドをfalseに、dynamicSizeメソッドをtrueに設定すると、どちらのメソッドも無効になります。
コメントテキストの編集後は、フォントや文字装飾など、テキストの書式を設定できます。次に、例を示します。
For the compatibility of the comment fill color in the Excel, the backColor of the comment accepts two system colors: infoBackground(Default on the Excel), window(Automatic on the Excel), because the Excel change the RGB Hex codes to system color names of the comment fill color since Excel 2019. So it could define a named style with the name infoBackground or window to specify the system color. The SpreadJS provide the same value of the backColor of the comment as infoBackground if the named style not defined:
コメントに枠線を追加できます。この枠線は、DOMの枠線の設定として定義されます。次に、例を示します。
複数のコメントが重なり合って表示される場合は、zIndexメソッドを使用することで、最前面から最背面までの順序を変更できます。
UIとの相互動作によってコメントが変更されないようにするには、lockedメソッドを使用してコメントをロックします。コメントをロックする場合は、最初にシートをロックします。コメントのテキストが変更されないようにするには、lockTextメソッドを使用してテキストをロックします。
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("chkSystemColor").addEventListener('change', function () {
var systemColorName = 'infoBackground', backColor = '#FFFFE1';
if (this.checked) {
var infoBkStyle = new GC.Spread.Sheets.Style(backColor);
infoBkStyle.name = systemColorName;
spread.addNamedStyle(infoBkStyle);
if (activeComment) {
_getElementById("txtBackColor").value = systemColorName;
activeComment.backColor(systemColorName);
}
} else {
spread.removeNamedStyle(systemColorName);
if (activeComment) {
_getElementById("txtBackColor").value = backColor;
activeComment.backColor(backColor);
}
}
})
_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("chkSystemColor").checked = activeComment.backColor() === 'infoBackground';
_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("chkSystemColor").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/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/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 class="checkbox">
<input id="chkSystemColor" type="checkbox" />
<label for="chkSystemColor">Set System Color to BackColor</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;
}