概述
本 Demo 展示了 SpreadJS 的自动填充功能，通过三个工作表分别演示了基础数据填充、字符串序列填充和自定义列表填充。用户可以通过拖拽填充柄快速填充数字序列、日期序列以及包含数字的字符串，还可以配置自定义填充列表实现特定的数据序列。
实现思路
初始化工作簿并配置自定义填充列表（通过 spread.options.customList 设置）
创建第一个工作表，设置简单的数字和日期数据，演示基础填充功能
创建第二个工作表，设置各种包含数字的字符串，演示字符串填充规则
创建第三个工作表，演示内置列表（月份、星期）和自定义列表的填充
添加交互选项，允许用户控制填充提示、智能标记和默认填充类型
代码解析
设置自定义填充列表
这段代码在初始化时设置了自定义填充列表。用户输入列表中的任意项进行拖拽填充时，SpreadJS 会按照列表中的顺序循环填充数据。
基础数据填充示例
Demo 设置了基础的数字和日期数据，用户可以通过拖拽填充柄观察自动递增的效果。按住 Ctrl 键拖拽时，数字会按增量递增。
控制填充行为选项
通过复选框和下拉菜单，用户可以实时控制填充行为。showDragFillTip 控制是否显示填充提示，showDragFillSmartTag 控制是否显示填充选项按钮，defaultDragFillType 设置默认的填充类型。
字符串填充规则说明
Demo 中演示了多种字符串填充场景：
仅包含数字的字符串（如 '123', '125'）：按数字序列递增
字符串末尾包含数字（如 'a1', 'a5'）：识别数字并递增
字符串开头包含数字（如 '5a', '2a'）：按开头数字递增
仅用于复制的字符串（如 'a1a1', 'a2a2'）：无法识别序列时复制
自定义列表填充
第三个工作表显示了当前配置的自定义列表内容，用户可以输入列表中的项进行拖拽填充测试。
运行效果
在"基础填充"工作表中，选择数字或日期单元格，拖拽填充柄可以生成递增序列
在"字符串填充"工作表中，演示了各种包含数字的字符串的填充规则
在"自定义填充"工作表中，输入"三月"、"周一"等内置列表项或自定义列表项，拖拽填充可以循环生成序列
按住 Ctrl 键拖拽可以强制递增数字序列
双击填充柄可以快速填充到相邻列的最后一个有数据的行
勾选/取消勾选右侧选项可以实时控制填充提示和智能标记的显示
通过下拉菜单可以更改默认的填充类型（自动、复制单元格、填充序列等）
API 参考
showDragFillTip 属性
控制是否显示拖拽填充时的提示信息。默认值为 true。
showDragFillSmartTag 属性
控制是否在填充完成后显示智能标记按钮，点击可选择填充类型。默认值为 true。
defaultDragFillType 属性
设置默认的拖拽填充类型。可选值：
auto (5)：自动识别
copyCells (0)：复制单元格（包括值、格式、公式）
fillSeries (1)：填充序列
fillFormattingOnly (2)：仅填充格式
fillWithoutFormatting (3)：仅填充值
customList 属性
设置自定义填充列表，每个数组项是一个字符串数组。SpreadJS 内置了月份和星期列表。
window.onload = function () {
var customList = [
['光', '太阳', '月亮', '星星', '天空', '雨', '云'],
['狗', '猫', '狮子', '鱼', '蛇']
];
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 3});
spread.options.customList = customList;
spread.suspendPaint();
initSheet0(spread);
initsheet1(spread);
initsheet2(spread);
spread.resumePaint();
document.getElementById("chkShowDragFillTip").addEventListener('click',function() {
spread.options.showDragFillTip = this.checked;
});
document.getElementById("chkShowDragFillSmartTag").addEventListener('click',function () {
spread.options.showDragFillSmartTag = this.checked;
});
document.getElementById("dragFillType").addEventListener('change',function () {
var type = parseInt(this.value, 10);
if (!isNaN(type)) {
spread.options.defaultDragFillType = type;
}
});
};
function initSheet0(spread) {
var sheet = spread.getSheet(0);
sheet.name("基础填充");
sheet.setValue(1, 1, "选择下方带有数据的单元格，将光标悬停在右下角边框上，直到看到 ‘+’ 号，");
sheet.setValue(2, 1, "然后向下拖动以自动填充单元格数据。您还可以按住 <Ctrl> 键以自动递增数值，也可以双击自动填充：");
var simpleData = [
[1.0, 1],
[1.1, 2]
];
var dateData = [
[new Date(2018, 3, 1), new Date(2017, 11, 1), new Date(2018, 2, 31), new Date(2017, 11, 31)],
[new Date(2018, 4, 1), new Date(2018, 0, 1), new Date(2018, 3, 30), new Date(2018, 0, 31)]
];
sheet.setArray(4, 1, simpleData);
sheet.setArray(4, 4, dateData);
for (var i = 6; i < 15; i++) {
sheet.setValue(i, 0, "填充数据");
}
for (var i = 4; i < 8; i++) {
sheet.setColumnWidth(i, 80);
}
var dateCell = sheet.getRange(4, 4, 2, 4).formatter('m/d/yyyy');
};
function initsheet1 (spread) {
var sheet = spread.getSheet(1);
sheet.name("字符串填充");
sheet.setValue(0, 0, 'N: 数字, S: 字符串。对字符串进行拖动填充时，从末尾到开头检测数字，先处理 SN 模式，再处理 NS 模式。若 S 相同，则按 N 趋势填充。');
var title = sheet.getCell(0, 0);
title.font("15px 'Franklin Gothic Medium'");
sheet.setValue(1, 0, '仅包含数字的字符串。请向上或向下拖动。');
sheet.setValue(6, 0, '123');
sheet.setValue(7, 0, '125');
sheet.setValue(6, 2, '-3');
sheet.setValue(7, 2, '-2');
sheet.setValue(6, 4, '003');
sheet.setValue(7, 4, '007');
sheet.setValue(1, 8, '字符串末尾包含数字。请向上或向下拖动，对于单个值请选择“填充序列”。');
sheet.setValue(6, 8, 'a2');
sheet.setValue(6, 10, 'a1');
sheet.setValue(7, 10, 'a5');
sheet.setValue(6, 12, 'a001');
sheet.setValue(7, 12, 'a002');
sheet.setValue(6, 14, '1a2a3a4a5');
sheet.setValue(7, 14, '1a2a3a4a6');
sheet.setColumnWidth(14, 100);
sheet.setValue(24, 0, '字符串开头包含数字。请向上或向下拖动。');
sheet.setValue(30, 0, '5a');
sheet.setValue(31, 0, '2a');
sheet.setValue(30, 2, '003b');
sheet.setValue(31, 2, '005b');
sheet.setValue(30, 4, '1a1a1a');
sheet.setValue(31, 4, '2a1a1a');
sheet.setValue(24, 8, '仅用于复制的字符串。请向上或向下拖动。');
sheet.setValue(30, 8, 'a1a1');
sheet.setValue(31, 8, 'a2a2');
sheet.setValue(30, 10, '1a1');
sheet.setValue(31, 10, '2a2');
sheet.setValue(30, 12, 'a1');
sheet.setValue(31, 12, 'b2');
}
function initsheet2 (spread) {
var sheet = spread.getSheet(2);
sheet.name("自定义填充");
sheet.setValue(0, 0, '用于拖动填充的自定义列表。请向上或向下拖动。');
sheet.setValue(6, 0, '三月');
sheet.setValue(7, 0, '四月');
sheet.setValue(6, 2, '六月');
sheet.setValue(7, 2, '七月');
sheet.setValue(6, 4, '周一');
sheet.setValue(7, 4, '周二');
sheet.setValue(6, 6, '周五');
sheet.setValue(7, 6, '周六');
sheet.setValue(20, 0, '当前自定义列表已定制了两个数组，如下所示。在列表中输入一个或多个连续项以进行拖动填充。');
var customList = sheet.parent.options.customList;
for (var i = 0; i < customList.length; i++) {
var itemList = customList[i];
sheet.setValue(21 + i, 0, '列表 ' + i + ": ");
itemList.forEach(function(item, index) {
sheet.setValue(21 + i, index + 1, item);
});
}
}
<!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">
<p>
尝试勾选右侧的选项，并按照工作表中的说明操作，查看这些选项如何影响填充操作。
</p>
<label for="dragFillType">默认拖动填充类型：</label>
<select id="dragFillType" title="选择默认的拖动填充类型。">
<option value="5" selected="selected">自动</option>
<option value="0">复制单元格</option>
<option value="1">填充序列</option>
<option value="2">仅填充格式</option>
<option value="3">不填充格式</option>
</select>
</div>
<div class="option-row">
<input type="checkbox" id="chkShowDragFillTip" checked />
<label for="chkShowDragFillTip">显示拖动填充提示</label>
</div>
<div class="option-row">
<input id="chkShowDragFillSmartTag" type="checkbox" checked="checked" />
<label for="chkShowDragFillSmartTag">显示拖动填充智能标记</label>
</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;
}
select {
padding: 4px 8px;
width: 100%;
box-sizing: border-box;
margin-top: 4px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
