删除
您可以点击“删除”按钮，该按钮调用了tablesheet.removeRow(rowIndex)方法来删除行。
保存
您可以通过双击或者使用键盘直接输入来编辑一个单元格，之后点击“保存”按钮，该按钮调用了tablesheet.saveRow(rowIndex)方法来保存行。
重置
您可以点击“重置”按钮来重置一行的值，该按钮调用了tablesheet.resetRow(rowIndex)方法。重置将会恢复该行数据。
添加
您可以通过点击“编辑字段”按钮以编辑模板行数据，然后点击“添加”按钮来添加一行。该按钮调用了tablesheet.addRow(rowData)方法。
被添加的行数据必须和数据源中的数据有着一样的结构，例如{ "first_name": "Michael", "last_name": "Lu", country: "China" }。
全部保存
如果您有着大量的修改需要保存，您可以点击“全部保存”按钮或者在键盘上按下CTRL + SHIFT + S来一次性保存所有数据。
错误响应
当发生了服务器连接错误（例如：HTTP 404, HTTP 500），服务器数据库错误（例如：主键重复，更新失败）时，集算表会在行头显示红色警告标志，当你鼠标悬停在上面时会显示错误提示。
/*REPLACE_MARKER*/
/*DO NOT DELETE THESE COMMENTS*/
var tablesheetName = 'MyTableSheet';
var spread, sheet, view, data, selections;
window.onload = function() {
spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 0 });
initSpread(spread);
bindEvents();
};
function initSpread(spread) {
spread.suspendPaint();
spread.clearSheets();
spread.options.autoFitType = GC.Spread.Sheets.AutoFitType.cellWithHeader;
//init a data manager
var dataManager = spread.dataManager();
var myTable = dataManager.addTable("myTable", {
data: employees
});
//init a table sheet
sheet = spread.addSheetTab(0, tablesheetName, GC.Spread.Sheets.SheetType.tableSheet);
sheet.options.allowAddNew = false;
//bind a view to the table sheet
myTable.fetch().then(function() {
view = myTable.addView("myView", [
//{ value: "Id", width: 50 },
{ value: "FirstName", width: 100 },
{ value: "LastName", width: 100 },
{ value: "Title", width: 150 },
{ value: "HomePhone", width: 120 },
{ value: "Address", width: 160 },
{ value: "City", width: 100 },
{ value: "State", width: 100 },
{ value: "PostalCode", width: 100 },
{ value: "Region", width: 100 }
]);
sheet.setDataView(view);
data = {
"FirstName": "",
"LastName": "",
"Title": "",
"HomePhone": "",
"Address": "",
"City": "",
"State": "",
"PostalCode": "",
"Region": ""
};
generateFieldsElement(data);
});
spread.bind(GC.Spread.Sheets.Events.SelectionChanged, function(e, args) {
selections = args.newSelections;
});
spread.resumePaint();
}
function generateFieldsElement(sampleData) {
var fieldsContainer = document.getElementById('fields');
var fragment = '';
for (var field in sampleData) {
var isContinue = field === 'Id';
if (isContinue) {
continue;
}
var isRequired = field === 'FirstName' || field === 'LastName';
fragment +=
'<div class="field-line">' +
' <label class="field-inline" for="field_' + field + '">' + field + '<span class="required">' + (isRequired ? "(*)" : "") + '</span></label>' +
' <input class="field-inline" id="field_' + field + '" type="text" value="' + sampleData[field] + '">' +
'</div>';
}
fieldsContainer.innerHTML = fragment;
}
function bindEvents() {
var fieldsContainer = document.getElementById('fields');
var toggleButton = document.getElementById('toggle');
toggleButton.addEventListener('click', function() {
if (fieldsContainer.classList.contains('show')) {
toggleButton.value = 'Edit Fields';
fieldsContainer.classList.remove('show');
} else {
toggleButton.value = 'Hide Fields';
fieldsContainer.classList.add('show');
}
});
var removeButton = document.getElementById('remove');
removeButton.addEventListener('click', function() {
traverseSelectionsRowsWithOperation(function(row) {
sheet.removeRow(row);
});
});
var saveButton = document.getElementById('save');
saveButton.addEventListener('click', function() {
traverseSelectionsRowsWithOperation(function(row) {
sheet.saveRow(row);
});
});
var resetButton = document.getElementById('reset');
resetButton.addEventListener('click', function() {
traverseSelectionsRowsWithOperation(function(row) {
sheet.resetRow(row);
});
});
var saveAllButton = document.getElementById('save-all');
saveAllButton.addEventListener('click', function() {
spread.commandManager().SaveAll.execute(spread, { sheetName: tablesheetName });
});
var addButton = document.getElementById('add');
addButton.addEventListener('click', function() {
var data = getNewData();
sheet.addRow(data);
});
}
function traverseSelectionsRowsWithOperation(operation) {
if (selections) {
selections.sort(function(a, b){
return b.row - a.row;
});
for (var i = 0; i < selections.length; i++) {
var selection = selections[i];
var row = selection.row;
var rowCount = selection.rowCount;
for (var r = row + rowCount - 1; r >= row; r--) {
operation(r);
}
}
}
}
function getNewData() {
var newData = {};
for (var key in data) {
var newValue = key === 'Id' ? null : getProperty('field_' + key, 'value');
newData[key] = newValue;
}
return newData;
}
function getProperty(domId, prop) {
return document.getElementById(domId)[prop];
}
<!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">
<!-- Promise Polyfill for IE, https://www.npmjs.com/package/promise-polyfill -->
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
<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-tablesheet/dist/gc.spread.sheets.tablesheet.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="$DEMOROOT$/spread/source/data/employees.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 id="options-container" class="options-container">
<div class="option-row"><label>Use these buttons to perform row operations.</label>
</div>
<hr />
<fieldset>
<legend>Active Row Operations</legend>
<div class="field-line">
<input id="remove" type="button" value="Remove">
</div>
<div class="field-line">
<input id="save" type="button" value="Save">
</div>
<div class="field-line">
<input id="reset" type="button" value="Reset">
</div>
</fieldset>
<fieldset>
<legend>Save All Rows</legend>
<div class="field-line">
<input id="save-all" type="button" value="Save All">
</div>
</fieldset>
<fieldset>
<legend>Add New Row</legend>
<div class="field-line">
<input type="button" value="Edit Fields" id="toggle">
</div>
<div class="field-line" id="fields"></div>
<div class="field-line">
<input type="button" value="Add" id="add">
</div>
</fieldset>
</div>
</div>
</html>
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
fieldset {
padding: 6px;
margin: 0;
margin-top: 10px;
}
.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;
}
fieldset span,
fieldset input,
fieldset select {
display: inline-block;
text-align: left;
}
fieldset input[type=text] {
width: calc(100% - 58px);
}
fieldset input[type=button] {
width: 100%;
text-align: center;
}
fieldset select {
width: calc(100% - 50px);
}
.field-line {
margin-top: 4px;
}
.field-inline {
display: inline-block;
vertical-align: middle;
}
fieldset label.field-inline {
width: 100px;
}
fieldset input.field-inline {
width: calc(100% - 100px - 12px);
}
.required {
color: red;
font-weight: bold;
}
#fields {
display: none;
}
#fields.show {
display: block;
}
