Sheet.tag(value?): Gets or sets the tag for the sheet.
Sheet.getTag(row, col, sheetArea?) or Sheet.setTag(row, col, tag, sheetArea?): Get or set tag for:
sheet: when row is -1 and col is -1
row: when col is -1 and row >= 0
column: when row is -1 and col >= 0
cell: when row >=0 and col >= 0
CellRange.tag(value?): Gets or sets the tag for the cell.
When a tag is set, the following events will occur:
CellChanged event for CellRange.tag(value)
RowChanged event for CellRange.tag(value)
ColumnChanged event for CellRange.tag(value)
You can clear the tag by setting the tag to null or undefined or by using Sheet.clear(row, column, rowCount, columnCount, sheetArea, StorageType.tag).
For example:
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 1});
spread.suspendPaint();
initSpread(spread);
bindEvents(spread.getActiveSheet());
spread.resumePaint();
};
function bindEvents(sheet) {
sheet.bind(GC.Spread.Sheets.Events.SelectionChanged, function () {
getTag(sheet);
});
}
function getTag(sheet) {
var selections = sheet.getSelections();
if (!selections || selections.length === 0) {
return;
}
var sel = selections[0],
row = sel.row,
col = sel.col,
tag = document.getElementById('txtTag');
if (row === -1 && col === -1) {
tag.value = sheet.tag() !== undefined ? sheet.tag() : "";
} else {
tag.value = sheet.getTag(row, col)!== undefined ? sheet.getTag(row, col) : "";
}
};
function initSpread(spread) {
var spreadNS = GC.Spread.Sheets, sheet = spread.sheets[0];
// sheet tag
sheet.tag("Sheet tag");
// row tag
sheet.setTag(3, -1, "Row 4 tag");
sheet.getRange(5, -1, 1, -1).tag("Row 6 tag");
sheet.getCell(5, -1, GC.Spread.Sheets.SheetArea.rowHeader).backColor('#82bc00');
// column tag
sheet.getRange(-1, 4, -1, 3).tag("Column E-G tag");
sheet.getCell(-1, 4, GC.Spread.Sheets.SheetArea.colHeader).backColor('#82BC00');
// cell tag
sheet.getCell(0, 0).tag("A1 tag");
sheet.getCell(0, 0).backColor("#E3E3E3");
sheet.getRange(6, 0, 4, 3).tag("Cells tag (A7:C10)");
sheet.getRange(6, 0, 4, 3).backColor("#E3E3E3");
document.getElementById('btnSetTag').onclick = function () {
var tag = document.getElementById('txtTag').value;
var selections = sheet.getSelections();
if (!selections || selections.length === 0) {
return;
}
sheet.suspendPaint();
var length = selections.length;
for (var i = 0; i < length; i++) {
var sel = selections[i],
rowIndex = sel.row,
colIndex = sel.col,
rowCount = sel.rowCount,
colCount = sel.colCount,
maxRow = rowIndex + rowCount,
maxColumn = colIndex + colCount,
r, c;
if (rowIndex === -1 && colIndex === -1) {
sheet.tag(tag);
} else if (rowIndex === -1) {
for (c = colIndex; c < maxColumn; c++) {
sheet.setTag(-1, c, tag);
}
} else if (colIndex === -1) {
for (r = rowIndex; r < maxRow; r++) {
sheet.setTag(r, -1, tag);
}
} else {
for (r = rowIndex; r < maxRow; r++) {
for (c = colIndex; c < maxColumn; c++) {
sheet.setTag(r, c, tag);
}
}
}
}
sheet.resumePaint();
getTag(sheet);
};
document.getElementById('btnClearTag').onclick = function () {
var selections = sheet.getSelections();
if (!selections || selections.length === 0) {
return;
}
sheet.suspendPaint();
var length = selections.length;
for (var i = 0; i < length; i++) {
var sel = selections[i],
row = sel.row,
col = sel.col;
if (row === -1 && col === -1) {
sheet.tag(null);
} else {
sheet.clear(row, col, sel.rowCount, sel.colCount, spreadNS.SheetArea.viewport, spreadNS.StorageType.tag);
}
}
sheet.resumePaint();
getTag(sheet);
};
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.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">
<p>
<span>You can set, get or clear tag of selected items.</span>
<span>Tags are provided in this demo: sheet, Row 4, Row 6, Column E-G, A1, A7:C10.</span>
</p>
</div>
<div class="option-row">
<label for="txtTag">Tag: </label>
<input id="txtTag" />
</div>
<div class="option-row">
<input type="button" id="btnSetTag" value="Set tag" title="Set tag to selected item(s)" />
<input type="button" id="btnClearTag" value="Clear tag" title="Clear tag of selected items" />
</div>
</div>
</div></body>
</html>
.sample {
position: relative;
height: 100%;
overflow: auto;
}
.sample::after {
display: block;
content: "";
clear: both;
}
.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;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.option-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
label {
display: inline-block;
margin-bottom: 6px;
}
input {
padding: 4px;
width: 100%;
margin: 0 4px 4px 0;
box-sizing: border-box;
}
input[type=button] {
width: 30%;
}
p {
background-color: #F4F8EB;
padding: 4px;
}
p span {
display: block;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
