zoukankan      html  css  js  c++  java
  • 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');
    });
    

      

  • 相关阅读:
    shell加载配置文件
    Shell四种运行方式(启动方式)
    Linux下Fork与Exec使用
    ln -snf 的个人理解
    利用python3将已有的某几个pptx文件的某些slides来生成新的pptx文件的范例
    如何在centos7中安装python3
    ng-include
    ng-class细说 by破狼
    AngularJS的Filter用法详解
    理解angularjs中的$emit,$broadcast和$on by Four
  • 原文地址:https://www.cnblogs.com/QiuJL/p/6957751.html
Copyright © 2011-2022 走看看