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

  

 

posted @ 2017-06-07 16:31  风一样的大叔  阅读(6882)  评论(0编辑  收藏