handsontable单元格操作方法
handsontable是一款快速、安全、可靠的电子表格组件,可用于各种技术,如React、Angular和Vue。以下是关于近期使用handsontable过程中的一些总结。 1. 数据配置新建空白的表格var container = document.getElementById('example');var hot = new Handsontable(container, {...
handsontable是一款快速、安全、可靠的电子表格组件,可用于各种技术,如React、Angular和Vue。以下是关于近期使用handsontable过程中的一些总结。
1. 数据配置新建空白的表格
var container = document.getElementById('example');
var hot = new Handsontable(container, {
data: Handsontable.helper.createEmptySpreadsheetData(40, 26), //创建的是40行,26列的空白表格
minRows: 5, //最少行数
minCols: 6, //最少列数
rowHeaders: true,// 行头
colHeaders: true,// 列头
contextMenu: true,// 右键单元格菜单
manualColumnResize: true,// 列拖拽改变大小
manualRowResize: true,// 行拖拽改变大小
columnSorting: true,// 列排序
observeChanges: false, //启用observeChanges插件
mergeCells: true,// 合并单元格
comments: true, // 启用批注
search: true,// 查询
manualColumnMove: true,// 列移动
manualRowMove: true,// 行移动
currentRowClassName: 'currentRow', // 当前行的类名
currentColClassName: 'currentCol', // 当前列的类名
autoColumnSize: true, // 自适应列大小
customBorders: true, //自定义边框设置
headerTooltips:true, //工具栏启用
dropdownMenu: true,// 下拉菜单
filters:true, // 筛选条件
});
其中下拉菜单是表格表头的下拉菜单功能,只有在pro的文件引用下才能正常使用,筛选条件是只有在打开下拉菜单功能后正常使用。
2. 获取选中多个单元格的值
hot.getData(r,c,r2,c2);
r起始行索引,c起始列索引,r2终止行索引,c2终止列索引
3. 获取选中的某个单元格的值
hot.getDataAtCell(row,col);
row单元格所在的行,col单元格所在的列
4. 设置值到某个单元格
hot.setDataAtCell(row, col, value, source);
row单元格所在的行,col单元格所在的列,value为要设置的值,source为选填项(在onAfterChange或onBeforeChange回调中有用)
5. 设置单元格为选中状态
hot.selectCell(row, col,row1,col1);
row为选中的起始行,col为选中的起始列,row1为选中的终止行,col1为选中的终止列
hot.alter('insert_col',2); // 在第3列插入一列
hot.alter('insert_row',2); // 在第3行插入一行
hot.alter('remove_row'); // 删除行
hot.alter('remove_col'); // 删除列
8. 修改单元格的数据类型
Handsontable提供的单元格类型有:数字(numeric)、日期(date)、时间(time)、复选框(checkbox)、选择(select)、下拉框(dropdown)、自动匹配(autocomplete)、密码(password)、表格模式(Handsontable)、默认是文本(text)。
以设置第3行第3列的单元格数据类型是下拉框为例:
方法一:
hot.updateSettings({
cell: [
{row:2,col:2,type: ‘dropdown’,source:['Ben','Chris','Jessica','Kate','Michael','Monica','Omar','Paul','Samuel',]}
]
});
方法二:
此方法会遍历表格每一个格子进行匹配,有确定好的单元格也可以用这个方法实现,但对于要求自定义某一个单元格数据类型时,不建议使用此方法。切换某一个数据类型也会有影响其他单元格的数据类型。
hot.updateSettings({
cells: function(row, column) {
var cellMeta = {};
if (column === 2&&row===2) {
cellMeta.type = 'dropdown';
cellMeta.source = [
'Ben',
'Chris',
'Jessica',
'Kate',
'Michael',
'Monica',
'Omar',
'Paul',
'Samuel',
];
}
return cellMeta;
}
})
9. 修改列的数据类型
hot.updateSettings({
column: [{},{type: 'numeric'},{}]
});
设置列的数据类型时,默认从索引列为0开始,若不需要设置则为空,对需要修改的列进行相应的数据类型设置
hot.clear();
hot.getSelected(); // 取得选中单元格的起始行、起始列、终止行、终止列
更多推荐
所有评论(0)