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);
*/
);

参考技术A mergecells:true追问

就是初始化的时候进入页面表格就是合并好的那种效果

[转]Handsontable对单元格的操作

原文地址:http://blog.csdn.net/mafan121/article/details/46119905

1.自动填充单元格数据

fillHandle:true/false    //当值为true时,允许拖动单元格右下角,将其值自动填充到选中的单元格


2.合并单元格

初始化配置:mergeCells:[{row:起始行数,cols:起始列数,rowspan:合并的行数,colspan:合并的列数},...]

或者初始化声明:mergeCells:true   //表示允许单元格合并

但单元格合并的操作,需如下操作:

 

[javascript] view plain copy print?
  1. if(key == "merge") {    
  2.     if(hot.mergeCells.mergedCellInfoCollection.length > 0) {    
  3.         for(var k=0; k<hot.mergeCells.mergedCellInfoCollection.length; k++) {    
  4.             if(hot.mergeCells.mergedCellInfoCollection[k].row == row &&    
  5.                  hot.mergeCells.mergedCellInfoCollection[k].col == col) {    
  6.                     hot.mergeCells.mergedCellInfoCollection.splice(k,1);    
  7.                     return;    
  8.             }else{    
  9.                 hot.mergeCells.mergedCellInfoCollection.push({"row": row, "col": col,     
  10.                     "rowspan": rowspan, "colspan": colspan});    
  11.                     break;    
  12.             }    
  13.         }    
  14.     } else {    
  15.         hot.mergeCells.mergedCellInfoCollection.push({"row": row, "col": col, "rowspan": rowspan, "colspan": colspan});    
  16.     }    


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.渲染比对结果

示例代码如下:

[javascript] view plain copy print?
  1. var  
  2.    data = [  
  3.      [‘Nissan‘, 2012, ‘black‘, ‘black‘],  
  4.      [‘Nissan‘, 2013, ‘blue‘, ‘blue‘],  
  5.      [‘Chrysler‘, 2014, ‘yellow‘, ‘black‘],  
  6.      [‘Volvo‘, 2015, ‘yellow‘, ‘gray‘]  
  7.    ],  
  8.    example = document.getElementById(‘example1‘),  
  9.    searchFiled = document.getElementById(‘search_field‘),  
  10.    hot;  
  11.   
  12.  hot = new Handsontable(example, {  
  13.    data: data,  
  14.    colHeaders: true,  
  15.    search: true  
  16.  });  
  17.   
  18.  function onlyExactMatch(queryStr, value) {  
  19.    return queryStr.toString() === value.toString();  
  20.  }  
  21.   
  22.  Handsontable.Dom.addEvent(searchFiled, ‘keyup‘, function (event) {  
  23.    var queryResult = hot.search.query(this.value);  
  24.   
  25.    console.log(queryResult);  
  26.    hot.render();  
  27.  });  

 

7.评论

comments:true/false    //当值为true时可以显示评论,右键菜单可添加删除评论。

当值为true时,可设置单元格的评论内容,格式为:

cell:[

         {

             row:行数,

             col:列数,

             comment:评论内容

         }

]

以上是关于Handsontable 怎么实现自动合并单元格,而不是用mergecells属性写死?的主要内容,如果未能解决你的问题,请参考以下文章

在 Handsontable 上,如果有类似的列标题,则第一列单元格的值会自动复制到其他类似的单元格

Excel 向下拖动单元格,实现公式自动计算

R Shiny Handsontable 更改单个单元格后自动更新功能

选择 Handsontable 标题单元格

请问,jQuery Handsontable控件如何像excel一样,设置公式,让某个单元格的值自动算出来?

EasyExcel填充时合并单元格