行与列操作 | 功能示例 | SpreadJS 在线示例

概述本 Demo 展示了 SpreadJS 中工作表行列操作的核心功能，包括设置行列数、添加删除行列、显示隐藏行列、自动调整尺寸，以及零高度/零宽度指示器的使用。Demo 提供了交互式界面，让用户可以直观体验各项行列操作功能。实现思路初始化工作表，设置列标题区、行标题区和视口区的行列数设置特定行的行高和列宽为 0，并启用零大小指示器为行列数据填充示例内容（行索引和列索引）绑定按钮事件，实现添加行、删除行、添加列、删除列功能绑定复选框事件，控制指定行列的可见性和自动调整提供下拉框切换零大小指示器的显示模式代码解析初始化工作表行列数这段代码通过 setRowCount 和 setColumnCount 方法设置不同区域的行列数。SheetArea.colHeader 表示列标题区，SheetArea.rowHeader 表示行标题区，SheetArea.viewport 表示视口区（数据区）。设置零高度/零宽度行和列将第 4 行的高度和第 2 列的宽度设置为 0，并通过 resizeZeroIndicator 选项启用增强模式的零大小指示器，使隐藏的行列在行头或列头显示双线提示。添加和删除行列 addRows 和 addColumns 方法在指定位置插入行或列，deleteRows 和 deleteColumns 方法删除指定位置的行或列。参数为起始索引和数量。显示隐藏行列和自动调整 setRowVisible 和 setColumnVisible 控制行列的显示隐藏。autoFitRow 和 autoFitColumn 根据单元格内容自动调整行高和列宽。运行效果点击「添加行」「删除行」按钮，可以在视口区末尾添加或删除一行点击「添加列」「删除列」按钮，可以在视口区末尾添加或删除一列输入行索引，勾选「行可见」复选框，可以控制指定行的显示隐藏勾选「行自动调整」复选框，指定行会根据内容自动调整高度输入列索引，勾选「列可见」复选框，可以控制指定列的显示隐藏勾选「列自动调整」复选框，指定列会根据内容自动调整宽度切换「调整零指示器大小」下拉框，可以改变行高或列宽为 0 时的显示样式（单线或双线） API 参考 setRowCount 方法 rowCount：行数 sheetArea：可选，工作表区域（colHeader/rowHeader/viewport） guardContent：可选，保护内容类型 addRows 方法 row：起始行索引 count：要添加的行数 sheetArea：可选，工作表区域 setRowVisible 方法 row：行索引 value：是否可见 sheetArea：可选，工作表区域 autoFitRow 方法 row：行索引 ResizeZeroIndicator 枚举 default：单线（与正常显示相同） enhanced：双线提示线（默认值）

window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(_getElementById("ss"));
var spreadNS = GC.Spread.Sheets,
sheet = spread.getSheet(0),
SheetArea = spreadNS.SheetArea;
sheet.suspendPaint();
sheet.setRowCount(2, SheetArea.colHeader);
sheet.setRowCount(10, SheetArea.viewport);
sheet.setColumnCount(2, SheetArea.rowHeader);
sheet.setColumnCount(6, SheetArea.viewport);
sheet.setRowHeight(4, 0);
sheet.setColumnWidth(2, 0);
spread.options.resizeZeroIndicator = spreadNS.ResizeZeroIndicator.enhanced;
for (var rowIndex = 1; rowIndex <= 9; rowIndex++) {
sheet.setText(rowIndex, 0, "行");
sheet.setValue(rowIndex, 1, rowIndex);
}
for (var columnIndex = 1; columnIndex <= 5; columnIndex++) {
sheet.setText(0, columnIndex, "列");
sheet.setValue(1, columnIndex, columnIndex);
}
sheet.resumePaint();
_getElementById("resizeZeroIndicator").value=spread.options.resizeZeroIndicator;
_getElementById("resizeZeroIndicator").addEventListener('change',function () {
spread.options.resizeZeroIndicator = + this.value;
});
/*
* Add a row in viewport area.
*/
_getElementById("btnAddRow").addEventListener('click', function () {
var sheet = spread.getActiveSheet();
if (sheet) {
sheet.addRows(sheet.getRowCount(SheetArea.viewport), 1);
}
});
/*
* Delete a row in viewport area.
*/
_getElementById("btnAddColumn").addEventListener('click', function () {
var sheet = spread.getActiveSheet();
if (sheet) {
sheet.addColumns(sheet.getColumnCount(SheetArea.viewport), 1);
}
});
/*
* Add a column in viewport area.
*/
_getElementById("btnDeleteRow").addEventListener('click', function () {
var sheet = spread.getActiveSheet();
if (sheet) {
sheet.deleteRows(sheet.getRowCount(SheetArea.viewport) - 1, 1);
}
});
/*
* Delete a column in viewport area.
*/
_getElementById("btnDeleteColumn").addEventListener('click', function () {
var sheet = spread.getActiveSheet();
if (sheet) {
sheet.deleteColumns(sheet.getColumnCount(SheetArea.viewport) - 1, 1);
}
});
/*
* Show or hide the specified row.
*/
_getElementById("chkRowVisible").addEventListener('click', function () {
var sheet = spread.getActiveSheet();
var rowIndex = parseInt(_getElementById("rowIndex").value);
if (!isNaN(rowIndex)) {
sheet.setRowVisible(rowIndex, this.checked);
}
});
/*
* Auto fit or not fit the specified row.
*/
_getElementById("chkRowAutoFit").addEventListener('click', function () {
var sheet = spread.getActiveSheet();
var rowIndex = parseInt(_getElementById("rowIndex").value);
if (!isNaN(rowIndex)) {
var checked = this.checked;
if (checked) {
sheet.autoFitRow(rowIndex);
}
}
});
/*
* Show or hide the specified column.
*/
_getElementById("chkColumnVisible").addEventListener('click', function () {
var sheet = spread.getActiveSheet();
var columnIndex = parseInt(_getElementById("columnIndex").value);
if (!isNaN(columnIndex)) {
sheet.setColumnVisible(columnIndex, this.checked);
}
});
/*
* Auto fit or not fit the specified column.
*/
_getElementById("chkColumnAutoFit").addEventListener('click', function () {
var sheet = spread.getActiveSheet();
var columnIndex = parseInt(_getElementById("columnIndex").value);
if (!isNaN(columnIndex)) {
var checked = this.checked;
if (checked) {
sheet.autoFitColumn(columnIndex);
}
}
});
};
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="options-row">
<label style="display: inline-block;">以下按钮可在工作表末尾添加/删除行/列。</label>
</div>
<div class="option-row">
<input type="button" value="添加行" id="btnAddRow" />
<input type="button" value="删除行" id="btnDeleteRow" />
</div>
<div class="option-row">
<input type="button" value="添加列" id="btnAddColumn" />
<input type="button" value="删除列" id="btnDeleteColumn" />
</div>
<hr />
<div class="option-row">
<label for="rowIndex" style="display: inline-block;width: 100px">行索引:</label>
<input type="text" id="rowIndex" />
<br>
<label for="rowIndex" style="padding-top: 6px">索引从 0 开始。</label>
<div class="option-row">
<input type="checkbox" id="chkRowVisible" checked />
<label for="chkRowVisible">行可见</label>
</div>
<div class="option-row">
<input type="checkbox" id="chkRowAutoFit" />
<label for="chkRowAutoFit">行自动调整</label>
</div>
</div>
<hr />
<div class="option-row">
<label for="columnIndex" style="display: inline-block;width: 100px">列索引:</label>
<input type="text" id="columnIndex" />
<br>
<label for="columnIndex" style="padding-top: 6px">索引从 0 开始。</label>
<div class="option-row">
<input type="checkbox" id="chkColumnVisible" checked />
<label for="chkColumnVisible">列可见</label>
</div>
<div class="option-row">
<input type="checkbox" id="chkColumnAutoFit" />
<label for="chkColumnAutoFit">列自动调整</label>
</div>
</div>
<hr />
<div class="option-row">
<span>调整零指示器大小:</span>
<select id="resizeZeroIndicator">
<option value="0">默认</option>
<option value="1">增强</option>
</select>
</div>
</div>
</div>
</body>
</html>

input[type="text"] {
width: 200px;
}
.colorLabel {
background-color: #F4F8EB;
width: 170px;
}
.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 {
margin-bottom: 6px;
}
input {
display: inline-block;
}
input[type=button] {
width: 110px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}