handsontable的使用实例

最新推荐文章于 2024-09-12 08:20:40 发布

wpy_ice

最新推荐文章于 2024-09-12 08:20:40 发布

阅读量4.1k

点赞数

分类专栏： javascript 插件文章标签： handsontable

本文链接：https://blog.csdn.net/wpy_ice/article/details/84945532

版权

javascript 插件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍了Handsontable表格组件的配置方法与实际应用案例，包括自定义渲染器、响应式布局、列宽自动调整、列隐藏、单元格事件监听等功能。通过实例展示了如何在网页中使用Handsontable实现复杂的数据展示与交互。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>handsontable-demo</title>
	<link rel="stylesheet" type="text/css" href="css/handsontable.full.css">
	<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
	<script src="js/handsontable/handsontable.full.min.js" type="text/javascript"></script>
	<script src="js/handsontable/zh-CN.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="/SL_LEM/grown/grown_resource/js/lem/lem.js"></script>
	<script type="text/javascript" src="js/FIXTABLE.js"></script>
	<script type="text/javascript" src="js/canEdit.js"></script>
</head>
<body>
	<!-- <div id="tableTitle">1111</div> -->
	<div id="example"></div>
<script type="text/javascript">
	var param=window.location.search;
  	var container = document.getElementById('example');
  	var hot;
	var objs;
	var objHeader;
	var viewTypeCol;
	var userIdCol;
	var viewIdCol;
     function negativeValueRenderer(instance, td, row, col, prop, value, cellProperties) {
    	  Handsontable.renderers.TextRenderer.apply(this, arguments);
    	   if (prop == '罐子区分') {
    		viewTypeCol=col;
    	   }
    	   if(prop=='邀请人'){
    		   if(value != null){
    		   	  td.innerHTML = '<a href="javascript:void(0);" onclick="toInviter('+row+')" style="cursor:pointer">'+value+'</a>'; 
    		   }
    	   } 
    	}
     Handsontable.renderers.registerRenderer('negativeValueRenderer', negativeValueRenderer);
     $(function(){
    	 $.ajax({
     		type: "POST",
             url: "http://localhost:8080?"+param+"&r="+ new Date().getTime(),
             async: false,
             success: function(data){
            	 objs=data;
             	obj=data.Data;
             	var header=data.Header;
             	objHeader=data.Header;
             	userIdCol=objs.cnTitles.length-2;
             	viewIdCol=objs.cnTitles.length-3;
             	
                hot = new Handsontable(container, {
                  data: obj,
                  rowHeaders: true,
//                  colWidths: 100,//定义列宽度
                  colWidths: function(index){
                	  if(index==5){
                		  return 280;
                	  }else if(index==objs.cnTitles.length-5){
                		  return 150
                	  }else if(index==objs.cnTitles.length-7){
                		  return 130
                	  }else{
                		  return 120;
                	  }
                  },
                  columns:getReadOnlyCols(), 
                  rowHeights:40 ,//定义行高度
                  autoColumnSize:true,
                  autoRowSize:true,
                  colHeaders: data.cnTitles,
                  
                  autoWrapRow: true,//自动换行
                  language:'zh-CN',
                  className: "htCenter htMiddle",//居中
                  fixedColumnsLeft:2,//滚动时左侧固定列
                  filters: true,
                  dropdownMenu: ['filter_by_condition', 'filter_by_value', 'filter_action_bar'],
                  nestedHeaders: [
                     [{label: header[0],colspan: 2},
                      '当月加保人数',header[1],
                      '当月金额',header[2]
                      ],[
						'本月完成规划人数',header[3],
						'上月完成规划人数',header[4],
						'用户退保','完成当月目标',''
                      ],
                     data.cnTitles
                  ],
                  hiddenColumns: {//影藏列
                	    columns: [data.cnTitles.length-1,data.cnTitles.length-2,data.cnTitles.length-3],
                	    indicators: true
                  },  
                   cells: function (row, col, prop) {
                      var cellProperties = {};
                      cellProperties.renderer = "negativeValueRenderer";
                      return cellProperties;
                  }, 
                  afterChange:function(changes, source){ //单元格值更改事件
//                		debugger;
						/*
							changes[0][0] 行索引
							changes[0][1] 列标题id(eg:昵称)
							changes[0][2] 单元格旧值
							changes[0][3] 单元格新值
							hot.propToCol(prop)将列标题id转换为所在列索引
						*/
                      if(changes!=null){
                    	  var row=changes[0][0]; //行
                          var col=hot.propToCol('__________画像__________');
                          var prop=changes[0][1];
                          if(col !=hot.propToCol(prop)){
                        	  return;
                          }
                    	  var oldValue=changes[0][2];
                          var newValue=changes[0][3];
                          if(oldValue != newValue  ){
                            if(!(oldValue==null && newValue.trim()=='')){
                        	  if(confirm("确定要修改么？")){
                            	var userId=hot.getDataAtCell(row,userIdCol);
                        	    var viewId=hot.getDataAtCell(row,viewIdCol);
                                updatePersistCellValue(newValue,userId,viewId);
                        	  }/* else{
                        		  hot.setDataAtCell(row,col,oldValue);
                        	  } */
                            }
                          }
                      }
                  }
                });
             	
             }
    	 });
    	 
        //点击标题行(多行)跳转
    	 hot.rootElement.onclick=function(e){
    		 if("用户退保"==e.toElement.textContent){
    			 var href=""
    			 window.location.href="http://localhost:8080";
    		 }else if("完成当月目标"==e.toElement.textContent){
    			 var keyName = LEM.util.getUrlParam("key");
    			
    			 if(keyName == "RPT_LEM_DS_2"){
                         window.location.href="http://www.jd.com";
    		        } else{
    					 window.location.href="http://www.baidu.com";
    		        }
    		
    		 }
    	 }
    	 
    	 //标题行
    	 var div=hot.rootElement.childNodes[0];
    	 var theads=div.getElementsByTagName("thead");
    	 var thead0=theads[0];
    	 var trs=thead0.getElementsByTagName("tr");
    	 var trHead2=trs[1];
    	 //trHead2[1].style.backgroundColor="#ff00000";
    	 trHead2[1].innerHtml="<button>群名</button>";
    	 for(var i=0;i<=trs.length-1;i++){
    		 console.log(trs[i]);
    	 }
    	  
    	   for(var i = 0; i <= obj.length; i++){
    		  var m=objs.cnTitles.length-1;
    		   m=viewTypeCol;
    		  if(hot.getSourceDataAtCell(i,m)=='大富翁'){
    			  for(var j=0;j<=objs.cnTitles.length-1;j++){
    				  hot.setCellMeta(i,j,'className','area-pink');
    			  }
    		  }
    	    }  
    	   
    	   //单击事件的回调函数  
    	     function callBack(event,coords,td){  
    	         var row = coords.row;  
    	         var col = coords.col;  
   	              if(col ==1){
   	            	if(hot.getSourceDataAtCell(row,viewTypeCol) !='大富翁'){
   	            	  setRowColor(row); 
   	            	}
   	              }
    	     }  
    	     //单击事件
    	     Handsontable.hooks.add('afterOnCellMouseDown',callBack,hot);  

    	 hot.render();
    	 
    	 
    }); 
	
     //设置指定列不可编辑
  	 function getReadOnlyCols(){
  		 var readOnlyCols=[];
  		 for(var i=0;i<=objs.cnTitles.length-1;i++){
  			 if(i !=5){
  				 readOnlyCols.push({data:objs.cnTitles[i],readOnly:true});
  			 }else{
  				 readOnlyCols.push({data:objs.cnTitles[i]});
  			 }
  		 }
  		 return readOnlyCols;
  	 }
     
     //设置行颜色
     function setRowColor(row){
   		  var m=objs.cnTitles.length-1;
   		  if(hot.getCellMeta(row,0).className =='area-yellow'){
	   		  for(var j=0;j<=objs.cnTitles.length-1;j++){
				  hot.setCellMeta(row,j,'className','area-noColor');
			  }
   		  }else{
   			for(var j=0;j<=objs.cnTitles.length-1;j++){
				  hot.setCellMeta(row,j,'className','area-yellow');
			  } 
   		  }
		  hot.render();
     }

     function updatePersistCellValue(msg,tagUser,tagView){
    	console.log('userId: '+tagUser);
    	console.log('viewId: '+tagView);
    	 $.ajax({
    			type: "POST",
    			url:  "/SL_LEM/groupMsgController/remark.do",
    			dataType: "json",
    			data: "userId=" + tagUser+"&remark="+msg+"&viewId="+tagView,
    			async: false,
    			success: function(data) {
    				var result = data.result;
    				if(result == 1){
    					alert("修改成功");
    				}else{
    					alert("修改失败")
    				}
    			}
    		});
     }
     
     function toInviter(row){
    	 var inviterId=hot.getDataAtCell(row,objs.cnTitles.length-1);
    	 
    	 if(param.indexOf("RPT_LEM_DS_2") != -1){
			window.location.href ="http://wwww.baidu.com";
		}else{
			window.location.href ="http://jd.com";
		}
     }

</script>
</html>

可自行修改handsontable.full.css：

/*可自行添加td单元格背景色   wpy begin*/
.handsontable td.area-pink{
	text-align: center;
	vertical-align: middle;
	background-color:pink;
}
.handsontable td.area-noColor{
	text-align: center;
	vertical-align: middle;
}
.handsontable td.area-yellow{
	text-align: center;
	vertical-align: middle;
	background-color:yellow;
}
/*wpy end*/

/* 默认只读单元格背景色#777，可自行更改 */
.handsontable .htDimmed {
  /* color: #777; */
  color: #000;
}