拖拽增强(Drag-Fill Enhancements)是 SpreadJS V12.2 新版本的增强功能之一,当有许多单元格必须填充相似或一定顺序的数据或函数时,拖动填充数据将非常有用。尤其在某些情况下,数据并非典型的数字序列,可能包含了字符串、日期或其他数据类型,此时 SpreadJS拖动填充功能将发挥巨大的作用。

SpreadJS的拖动填充支持:

  • 按日期填充
  • 带有数字的字符串自动填充
  • 自定义填充列表

针对日期填充:无论您选定的日期数据是第一天、最后一天还是一个月的某一天,新的拖动填充增强都可以处理:

针对字符串填充:当字符串在开头或结尾包含数字时,拖动单元格将按特定规律自动填充,如字符串包含“Cell1”、“Cell2”、“Cell3”等规律时,拖动单元格将使用“Cell4”、“Cell5”等进行填充。

针对自定义填充列表:拖动填充还支持自定义列表作为填充源,如按特定规则的日期信息,或开发人员自定义的列表。

要使用内置列表填充单元格,只需设置默认日期的值就足够了:

var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var sheet = spread.getActiveSheet();

sheet.setValue(0, 0, 'Sunday');
sheet.setValue(1, 0, 'Monday');
var startRange = new GC.Spread.Sheets.Range(0, 0, 2, 1);
var fillRange = new GC.Spread.Sheets.Range(0, 0, 10, 1);
sheet.fillAuto(startRange, fillRange, {
    fillType: GC.Spread.Sheets.Fill.FillType.auto,
    series: GC.Spread.Sheets.Fill.FillSeries.column
});

要使用自定义列表,您需要定义列表名称,然后在初始化Spread实例时在Spread选项中设置它:

var customList = [
    ['Light', 'Sun', 'Moon', 'Star', 'Sky', 'Rain', 'Cloud'],
    ['Dog', 'Cat', 'Lion', 'Fish', 'Snake']
];

var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {customList: customList});
var sheet = spread.getActiveSheet();

sheet.setValue(0, 5, 'Sky');
sheet.setValue(1, 5, 'Rain');
var startRange = new GC.Spread.Sheets.Range(0, 5, 2, 1);
var fillRange = new GC.Spread.Sheets.Range(0, 5, 10, 1);
sheet.fillAuto(startRange, fillRange, {
    fillType: GC.Spread.Sheets.Fill.FillType.auto,
    series: GC.Spread.Sheets.Fill.FillSeries.column
});

应该注意的是,在执行拖动填充操作时,用户自定义列表的优先级更高。

以上就是 SpreadJS V12.2 拖拽增强的更新内容,要体验这些功能并开始学习SpreadJS,请访问 SpreadJS 产品官网

SpreadJS 纯前端表格控件 V12.2 新特性一览