在你添加批注之前, 你可以使用 text 方法来设置文本。批注的位置和大小也能够设置。比如：
如果你在调整行高或者列宽的时候, 不想要批注的位置以及大小跟着调整， 你可以使用 dynamicMove 和 dynamicSize 方法来设置，例如：
如果批注的 dynamicMove 设置是 false 并且 dynamicSize 设置是 true，则不会有任何影响。
在你编辑完批注的文本后，你可以格式化文本, 比如字体, 文本修饰等，比如：
你可以给批注添加一个边框， 批注的边框设置格式类似于标准 DOM 的边框设置。例如：
当批注互相叠加的时候，你可以通过 zIndex 来设置批注的层叠顺序。
如果你不想要用户通过用户界面来改变批注，你可以使用 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("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="zh-cn" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.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>Select a cell with comment:
<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="Update Properties" />
</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;
}
