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');
});