handsontable 渲染实例

单元格选择完成后将触发事件afterSelectionEnd，

 

然后在js中：

hot.addHook('afterSelectionEnd', function(r, c, r2, c2){
	// 清除所有扩展的样式
	for(var i = 0; i < hot.countRows(); i++){
		for(var j = 0; j < hot.countCols(); j++){
			// 在这里只需移除扩展样式selected-td就行，保留表格原有样式
			var className = hot.getCellMeta(i, j).className;
			if(className && className.lastIndexOf('selected-td') > 0){
				var index = className.indexOf('selected-td');
				hot.setCellMeta(i, j, 'className', className.substring(0, index) + className.substring(index+1, className.length));
			}
		}
	}
	// 给选择范围的单元格添加样式
	for(var i = r; i <= r2; i++){
		for(var j = c; j <= c2; j++){
			hot.setCellMeta(i, j, 'className', hot.getCellMeta(i, j).className + ' selected-td');
		}
	}
	// 重新渲染网格
	hot.render();
})

　　

同时，CSS中添加：

.selected-td{ background: #8ef98e; }

 

就可以实现下面的效果了：

 

  这种方法去渲染网格的话，它的样式不会被改变，之前在做一个项目的时候，用到了类似这样的东西，那时候还不知道可以给网格渲染样式，只会用jquery动态给表格里的某个单元格添加样式，但是这样做的话，样式并没有被加载到单元格的属性对象中，由于handsontable页面数据是实时加载的，所以当表格带有滚动条的时候，一旦滚动由外部添加的样式马上会被清除掉，在这里是有setCellMeta方法进行设置就不会出现那种问题了。通过方法hot.getCellMeta(r, c).className我们就可以直接看到某个单元格被渲染的class样式。

 

由此我们得到afterOnCellMouseDown 事件，在这个事件之后我们还是一样会做一些操作。

// 鼠标按下时触发
hot.addHook('afterOnCellMouseDown', function(event, coords){
	this.removeClass('clk-td');
	hot.setCellMeta(coords.row, coords.col, 'className', hot.getCellMeta(coords.row, coords.col).className + ' clk-td');
});