Handsontable 怎么实现自动合并单元格,而不是用mergecells属性写死?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Handsontable 怎么实现自动合并单元格,而不是用mergecells属性写死?相关的知识,希望对你有一定的参考价值。
function excelTable(data)
var hot = new Handsontable(document.getElementById('excelTable'),
data: data,
colHeaders: ['ID','项目', '子项目', '评分细则', '级差', '投标文件ID','投标文件呈现'], // 使用自定义列头
rowHeaders: true,
editor: false, // 禁用所有单元格编辑
stretchH: 'all', /* 自适应拉伸 */
colWidths: [0.1, 200, 200, 300, 200, 0.1, 300], // 设置所有列宽为150像素
contextMenu: false, // 禁用右键菜单
/* contextMenu:
items:
"row_above":
name: '向上插入一行',
,
"row_below":
name: '向下插入一行',
,
"remove_row":
name: '删除行',
,
"mergeCells":
name: '合并单元格',
,
, */
minSpareRows: 1,
className: "htCenter htMiddle",
mergeCells: [
row:0, col:1, rowspan:1, colspan:1,
row:0, col:2, rowspan:1, colspan:1
],
/* afterLoadData()
calculateRow();
console.log(counts);
*/
);
就是初始化的时候进入页面表格就是合并好的那种效果
[转]Handsontable对单元格的操作
原文地址:http://blog.csdn.net/mafan121/article/details/46119905
1.自动填充单元格数据
fillHandle:true/false //当值为true时,允许拖动单元格右下角,将其值自动填充到选中的单元格
2.合并单元格
初始化配置:mergeCells:[{row:起始行数,cols:起始列数,rowspan:合并的行数,colspan:合并的列数},...]
或者初始化声明:mergeCells:true //表示允许单元格合并
但单元格合并的操作,需如下操作:
- if(key == "merge") {
- if(hot.mergeCells.mergedCellInfoCollection.length > 0) {
- for(var k=0; k<hot.mergeCells.mergedCellInfoCollection.length; k++) {
- if(hot.mergeCells.mergedCellInfoCollection[k].row == row &&
- hot.mergeCells.mergedCellInfoCollection[k].col == col) {
- hot.mergeCells.mergedCellInfoCollection.splice(k,1);
- return;
- }else{
- hot.mergeCells.mergedCellInfoCollection.push({"row": row, "col": col,
- "rowspan": rowspan, "colspan": colspan});
- break;
- }
- }
- } else {
- hot.mergeCells.mergedCellInfoCollection.push({"row": row, "col": col, "rowspan": rowspan, "colspan": colspan});
- }
3.初始化单元格或列的对齐方式
水平样式:htLeft,htCenter,htRight,htJustify
垂直样式:htTop,htMiddle,htBottom
4.只读模式
列只读,设置列属性:readOnly:true
单元格只读:cellProperties.readOnly = true
5.设置单元格的编辑类型
columns:[{type:类型}]
主要的类型有:
text:字符串
numeric:数字类型
date:日期框
checkbox:单选框
password:密码框
下面几种类型的使用比较特殊
select:下拉编辑器
columns:[
{editor:‘select‘,
selectOption:[选项1,选项2,...]},
.......
]
dropdown:下拉选择
columns:[
{type:‘dropdown‘,
source:[选项1,选项2,...]},
......
]
autocomplete:自动匹配模式
columns:[
{type:‘autocomplete‘,
source:[选项1,选项2,...],
strict:true/false, //值为true,严格匹配
allowInvalid:true/false //值为true时,允许输入值作为匹配内容,只能在strict为true时使用
},
......
]
handsontable:表格模式
columns:[
{type:‘handsontable‘,
handsontable:{...},
......
]
自定义模式
data=[{
title:html标签,
description:描述,
comments:评论,
cover:封面
},
......
]
自定义边界
customBorders:[
range:{
form:{row:行数,col:列数}, //起始行列
to:{row:行数,col:列数}, //终止行列
top/bottom/right/left:{ //上下右左边线
width:像数,
color:颜色
}
}
]
6.查询单元格的值
查询单元格的值需要3个步骤:
a.设置hot的属性search为true
b.创建比对函数
c.渲染比对结果
示例代码如下:
- var
- data = [
- [‘Nissan‘, 2012, ‘black‘, ‘black‘],
- [‘Nissan‘, 2013, ‘blue‘, ‘blue‘],
- [‘Chrysler‘, 2014, ‘yellow‘, ‘black‘],
- [‘Volvo‘, 2015, ‘yellow‘, ‘gray‘]
- ],
- example = document.getElementById(‘example1‘),
- searchFiled = document.getElementById(‘search_field‘),
- hot;
- hot = new Handsontable(example, {
- data: data,
- colHeaders: true,
- search: true
- });
- function onlyExactMatch(queryStr, value) {
- return queryStr.toString() === value.toString();
- }
- Handsontable.Dom.addEvent(searchFiled, ‘keyup‘, function (event) {
- var queryResult = hot.search.query(this.value);
- console.log(queryResult);
- hot.render();
- });
7.评论
comments:true/false //当值为true时可以显示评论,右键菜单可添加删除评论。
当值为true时,可设置单元格的评论内容,格式为:
cell:[
{
row:行数,
col:列数,
comment:评论内容
}
]
以上是关于Handsontable 怎么实现自动合并单元格,而不是用mergecells属性写死?的主要内容,如果未能解决你的问题,请参考以下文章
在 Handsontable 上,如果有类似的列标题,则第一列单元格的值会自动复制到其他类似的单元格
R Shiny Handsontable 更改单个单元格后自动更新功能