handsontable 属性汇总

  • 常规属性:

1.固定行列位置

fixedRowsTop:行数 //固定顶部多少行不能垂直滚动

fixedColumnsLeft:列数 //固定左侧多少列不能水平滚动

 

2.拖拽行头或列头改变行或列的大小

manualColumnResize:true/false//当值为true时,允许拖动,当为false时禁止拖动

manualRowResize:true/false//当值为true时,允许拖动,当为false时禁止拖动

 

3.延伸列的宽度

stretchH:last/all/none       //last:延伸最后一列,all:延伸所有列,none默认不延伸。

 

4.手动固定某一列

manualColumnFreeze: true/false  

//当值为true时,选中某 一列,右键菜单会出现freeze this column选项,该选项的作用是固定这一列不可水平滚动,并会将这一列移动到非固定列的前面。再次右键菜单会出现unfreeze this column,意思是取消该列的固定,并将其还原到初始位置。

 

5.拖动行或列到某一行或列之后

manualColumnMove:true/false 当值为true时,列可拖拽移动到指定列

manualRowMove:true/false 当值为true时,行可拖拽至指定行

当属性的值为true时,行头或列头可以被拖拽移动,移动后该行或列将会被移动到指定位置,原先该行或列的后面部分自动上移或后退。移动的时候鼠标需选中行线或列线才行。

 

6.设置当前行或列的样式

currentRowClassName:当前行样式的名称

currentColClassName:当前列样式的名称

 

7.行分组或列分组

groups:[{cols:[0,2]},{cols:[3,5]},{rows:[0,4]},{rows:[5,7]}]

上面的例子介绍了4个分组,第0-2列为一组,第3-5列为第二组,第0-4行为一组,第5-7列为第二组。分组可在行头或列头看见,分组可被展开或隐藏。

 

8.允许排序

columnSorting:true/false/对象 //当值为true时,表示启用排序插件

当值为true时,排序插件的使用可通过点击列头文字实现。当值为false时表示禁用排序。当值为对象时,该对象包含两个属性:column:列数。sortOrder:true/false,升序或降序,true为升序排列。当用对象启动插件后可用如下方式禁用插件:

hot.updateSettings({

    columnSorting:false

});

 

排序的使用也可已直接调用sort()方法实现。如下操作:

if(hot.sortingEnabled){

    hot.sort(行数,true/false); //true为升序,false为降序

}

 

9.显示行头列头

colHeaders:true/fals/数组 //当值为true时显示列头,当值为数组时,列头为数组的值

例如:colHeaders: ['日期', '地点', '商品', '单价', '销量']

rowHeaders:true/false/数组 //当值为true时显示行头,当值为数组时,行头为数组的值

例如:rowHeaders: [1, 2, 3, 4, 5, 6]

 

 

10.表格数据

data:[[第一行数据],[第二行数据],...[第n行数据]]/对象数组

获取数据的方法:hot.getData()。

加载数据的方法:hot.loadData(data)。

当不需要显示某一列的时候可用如下格式设置:

columns:[

   {data:0},

   {data:2}

]

这里就不显示第二列数据,只有第1、3列数据

 

data可以有两种格式。

第一种是二维数组:

data: [
	['日期','销售地点','销售商品','单价','销量'],
	['2017-01', '北京', '冰箱', '3399', 530],
	['2017-01', '天津', '空调', '4299', 522],
	['2017-01', '上海', '洗衣机', '1299', 544],
	['2017-01', '广州', '彩电', '4599', 562],
	['2017-01', '深圳', '热水器', '1099', 430],
	['2017-02', '重庆', '笔记本电脑', '4999', 666],
	['2017-02', '厦门', '油烟机', '2899', 438],
	['2017-02', '青岛', '饮水机', '899', 620],
	['2017-02', '大连', '手机', '1999', 500]
];

第二种是对象数组:如果使用该方式渲染数据,则不能使用插入列方法:insert_col和remove_col

data: [
	{'date': '2017-01', 'place':'北京', 'goods':'冰箱', 'price':3399, '销量':530},
	{'date': '2017-01', 'place':'天津', 'goods':'空调', 'price':4299, '销量':522},
	{'date': '2017-01', 'place':'上海', 'goods':'洗衣机', 'price':1299, '销量':544},
	{'date': '2017-01', 'place':'广州', 'goods':'彩电', 'price':4599, '销量':562},
	{'date': '2017-01', 'place':'深圳', 'goods':'热水器', 'price':1099, '销量':430},
	{'date': '2017-02', 'place':'重庆', 'goods':'笔记本电脑', 'price':4999, '销量':666},
	{'date': '2017-02', 'place':'厦门', 'goods':'油烟机', 'price':2899, '销量':438},
	{'date': '2017-02', 'place':'青岛', 'goods':'饮水机', 'price':1099, '销量':620},
	{'date': '2017-02', 'place':'大连', 'goods':'手机', 'price':1999, '销量':500}
]


11.右键菜单展示

contextMenu:true/false/自定义数组 //当值为true时,启用右键菜单,为false时禁用

例如:contextMenu: ["row_above", "row_below", "col_left", "col_right", "remove_row", "remove_col", "---------", "undo", "redo", "Read Only", "alignment", "Merge Cells"]

 

 

12.自适应列大小

autoColumnSize:true/false //当值为true且列宽未设置时,自适应列大小

 

13.minCols:最小列数

    minRows:最小行数

    minSpareCols:最小列空间,不足则添加空列

    maxCols:最大列数

    maxRows:最大行数

    minSpareRows:最小行空间,不足则添加空行

 

14.observeChanges:true/false //当值为true时,启用observeChanges插件

 

15.colWidths:[列宽1,列宽2,...]/列宽值

 

例如:

var hot = new Handsontable(container, {  
    data: data,  
    observeChanges: true,  
    colHeaders: true,  
    rowHeaders: true,  
    colWidths: 70,  //colWidths: [100, 200, 300, 200, 100]
    contextMenu: false,  
    manualRowResize: true,  
    manualColumnResize: true,  
    minSpareRows: 30,  
    cells: function(row, col, prop) {//单元格渲染  
            this.renderer = myRenderer;  
    },  
    mergeCells: true  
});  

  

 

 

16.自定义边框设置,可以进行初始化配置,如下:

customBorders:[{range:{from:{row:行数,col:列数},to:{row:行数,col:列数},上下左右设置}]

hot = Handsontable(container, {  
    data: Handsontable.helper.createSpreadsheetData(200, 20),  
    rowHeaders: true,  
    fixedColumnsLeft: 2,  
    fixedRowsTop: 2,  
    colHeaders: true,  
    customBorders: [  
      {  
        range: {//多个单元格  
          from: {//起始位置  
            row: 1,  
            col: 1  
          },  
          to: {  
            row: 3,  
            col: 4  
          }  
        },  
        top: {//结束位置  
          width: 2,  
          color: '#5292F7'  
        },  
        left: {  
          width: 2,  
          color: 'orange'  
        },  
        bottom: {  
          width: 2,  
          color: 'red'  
        },  
        right: {  
          width: 2,  
          color: 'magenta'  
        }  
      },  
      {//单一单元格  
        row: 2,  
        col: 2,  
        left: {  
          width: 2,  
          color: 'red'  
        },  
        right: {  
          width: 1,  
          color: 'green'  
        }  
      }]  
  });  

也可以声明customBorder:true,表示允许自定义单元格边框。

 

用range指定一个范围,或者直接使用row、col指定单元格位置,用top、right、bottom、left分别设置单元格上下左右边框的属性。

customBorders: [
	{
		range: {
			from: {row: 1, col:1},
			to: {row: 3, col:3}
		},
		top: {width: 2, color: '#25e825'},
		right: {width: 2, color: '#25e825'},
		bottom: {width: 2, color: '#25e825'},
		left: {width: 2, color: '#25e825'}
	},
	{
		row: 2,
		col: 2,
		top: {width: 2, color: '#7687c5'},
		right: {width: 2, color: '#7687c5'},
		bottom: {width: 2, color: '#7687c5'},
		left: {width: 2, color: '#7687c5'}
	}
]

 


17.单元格合并可以进行初始化配置,如下:

mergeCells: [{row: 起始行数, col: 起始列数, rowspan: 合并行数, colspan:合并列数 },...],

例如:

mergeCells: [

{row:0, col:0, rowspan:5, colspan:1},

{row:5, col:0, rowspan:4, colspan:1}

]

 

也可以先声明单元格允许合并,mergeCells:true,再利用合并方法操作。

hot = new Handsontable(container, {  
    data: data,  
    observeChanges: true,  
    colHeaders: true,  
    rowHeaders: true,  
    colWidths: 70,  
    contextMenu: false,  
    manualRowResize: true,  
    manualColumnResize: true,  
    // minSpareRows: 30,  
   cells: function(row, col, prop) {  
         this.renderer = myRenderer;       
   },  
   mergeCells: true,  

 

         

18 className:容器单元格的class属性(htCenter,htLeft,htRight,htJustify,htTop,htMiddle,htBottom),默认值undefined,这些属性将作为容器单元格内容的对齐方式

 

19 cell:指定单元格的某些属性(数组),如下:

cell: [
    {row:0, col:0, className: 'htRight htMiddle', editor: false}, // 右对齐垂直居中,只读
    {row:1, col:1, className: 'htLeft'} // 左对齐
]

       

 

20 startRows:初始行数

 

 

21 startCols:初始列数

 

 

22 wordWrap:自动换行

默认true

 

 

23 copyable:是否允许键盘复制

默认true,如下面的官网说明,这个只适用于键盘上CTRL + C的复制,不适用于拖动复制。

Make cell copyable (pressing CTRL + C on your keyboard moves its value to system clipboard).

Note: this setting is false by default for cells with type password.

 

 

 

24 fillHandle:是否允许拖动复制

默认true,也可以控制方向:fillHandle: 'vertical'

如果设置为false,则选中单元格后,在右下方不会出现可以拖动的点。

 

 

 

 

25 renderAllRows:是否呈现所有行

 

如果键入true,将禁用handsontable的虚拟呈现机制。

也就是说如果键入true,则当你用键盘上下移动数据时,handsontable中的数据不会随着焦点的下移或上移同步移动;

如果是false,则当你用键盘上下移动数据时,滚动条也会随着焦点上下移动。

 

 

By QJL

 

 

posted @ 2017-06-07 14:12  风一样的大叔  阅读(26620)  评论(9编辑  收藏  举报