概述
本 Demo 展示了如何启用和切换 SpreadJS 的拆分调整大小功能。拆分调整大小允许用户在调整列或行的大小时，仅影响当前列/行和相邻的下一个列/行，而保持其他列/行的位置不变，防止重要数据被移出可视区域。
实现思路
创建 SpreadJS 工作簿实例
为行调整大小模式下拉框添加监听器，根据用户选择动态更新 spread.options.rowResizeMode
为列调整大小模式下拉框添加监听器，根据用户选择动态更新 spread.options.columnResizeMode
支持用户在运行时切换调整大小模式
代码解析
获取和初始化工作簿
创建一个包含 1 个工作表的 SpreadJS 工作簿实例。
监听列调整大小模式切换
当下拉框选项改变时，获取用户选择的值（"0" 或 "1"），将其转换为整数并赋值给 spread.options.columnResizeMode。下拉框的选项值对应 ResizeMode 枚举的整数值：0 表示 normal，1 表示 split。
监听行调整大小模式切换
同样地，为行调整大小模式下拉框添加监听器，动态更新 spread.options.rowResizeMode。
运行效果
界面右侧有两个下拉框，分别用于设置列调整大小模式和行调整大小模式
默认为"正常"模式，调整列或行时会推移后续所有列或行
选择"分割"模式后，调整列或行时只会影响相邻的下一个列或行，其他列或行保持位置不变
用户也可以在调整大小时按住 Ctrl 键临时启用拆分调整
API 参考
ResizeMode 枚举
normal = 0：正常调整大小模式，调整列或行时会推移后续所有列或行
split = 1：拆分调整大小模式，调整时仅影响相邻的下一个列或行
columnResizeMode 和 rowResizeMode 属性
columnResizeMode：指定如何调整列的大小
rowResizeMode：指定如何调整行的大小
注意事项
在拆分模式下，用户只能选择单个行或列进行调整
如果选择了多个行或列，拆分调整将不起作用，会回退到正常模式
如果调整视口中最后一行或列，拆分调整也将不起作用
window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'), { sheetCount: 1 });
initSpread(spread);
};
function initSpread(spread) {
var sheet = spread.getActiveSheet();
sheet.suspendPaint();
var rowResizeMode = _getElementById("rowResizeMode");
rowResizeMode.addEventListener("change", function () {
spread.options.rowResizeMode = parseInt(rowResizeMode.options[rowResizeMode.selectedIndex].value, 10);
});
var columnResizeMode = _getElementById("columnResizeMode");
_getElementById("columnResizeMode").addEventListener("change", function () {
spread.options.columnResizeMode = parseInt(columnResizeMode.options[columnResizeMode.selectedIndex].value, 10);
});
sheet.resumePaint();
}
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/data/data.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>将调整大小模式更改为“分割”以启用此功能。</p>
<p>例如，将列调整大小模式设置为“分割”。现在更改列 A 的宽度。列 B 将自动调整大小，而其余列的大小将保持不变。</p>
<label for="columnResizeMode">列调整大小模式</label>
<select id="columnResizeMode">
<option value="0">正常</option>
<option value="1">分割</option>
</select>
</div>
<div class="option-row">
<label for="rowResizeMode">行调整大小模式</label>
<select id="rowResizeMode">
<option value="0">正常</option>
<option value="1">分割</option>
</select>
</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;
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 {
padding: 4px 6px;
}
input[type=number] {
width: 40px;
}
hr {
border-color: #fff;
opacity: .2;
margin-top: 20px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
