[easyui]复合表头隐藏列时表头出现错位的修复

悠悠 2022-09-19 01:53 168阅读 0赞

/**
     * 重写方法：datagrid的[hideColumn,showColumn]
     * 解决问题：复合表头隐藏列时表头出现错位
     * 
     * 需要引入上一篇中的jquery.table2tree.js
     * @author 	attwice@qq.com
     * @date 	2013/12/11
     */
    (function($){
    	$.extend($.fn.datagrid.methods, {
    		hideColumn:function (jq, field){
    			return jq.each(function(){
    				if($(this).datagrid("getColumnOption",field).hidden){
    					return;
    				}
    				
    				var panel = $(this).datagrid("getPanel");
    				panel.find("td[field=\""+field+"\"]").hide();
    				
    				var thiscell = getFieldTh(jq, field);
    				if(!jq.data('table2tree')){
    					jq.table2tree({container:'thead'});
    				}
    				var upcells = jq.table2tree('getParentCells', thiscell);
    				for(var i = 0; i < upcells.length; i++){
    					var uptd = panel.find('.datagrid-view2 tr.datagrid-header-row:eq(' + upcells[i].row + ') td:eq(' + upcells[i].col + ')');
    					var colspan = uptd.attr('colspan') || 1;
    					if(colspan == 1){
    						uptd.css('display','none');
    					}else{
    						uptd.attr('colspan',Number(colspan)-1);
    					}
    				}
    				
    				$(this).datagrid("getColumnOption",field).hidden=true;
    				$(this).datagrid("fitColumns");
    			});
    		},showColumn:function (jq, field){
    			return jq.each(function(){
    				if(!$(this).datagrid("getColumnOption",field).hidden){
    					return;
    				}
    				var panel=$(this).datagrid("getPanel");
    				panel.find("td[field=\""+field+"\"]").show();				
    				
    				var thiscell = getFieldTh(jq, field);
    				if(!jq.data('table2tree')){
    					jq.table2tree({container:'thead'});
    				}
    				var upcells = jq.table2tree('getParentCells', thiscell);
    				for(var i = 0; i < upcells.length; i++){
    					var uptd = panel.find('.datagrid-view2 tr.datagrid-header-row:eq(' + upcells[i].row + ') td:eq(' + upcells[i].col + ')');
    					var colspan = uptd.attr('colspan') || 1;
    					if(uptd.css('display') == 'none'){
    						uptd.css('display','');
    					}else{
    						uptd.attr('colspan',Number(colspan)+1);
    					}
    				}		
    				
    				$(this).datagrid("getColumnOption",field).hidden=false;
    				$(this).datagrid("fitColumns");
    			});
    		} 
    	});
    	
    	//获取field所在单元格dom
    	function getFieldTh(jq, field){
    		var trs =  jq.find("thead tr");
    		//表头只有一行时直接返回
    		if(trs.length <= 1) return;
    		//该单元格坐标
    		var rowIndex = 0, colIndex = 0, computedColIndex = 0;
    		outer:for(var i = 0; i < trs.length; i++){
    			var ths = $(trs.get(i)).find("th");
    			var totalColspan = 0;
    			for(var j = 0; j < ths.length; j++){
    				var th = $(ths.get(j));
    				var colspan = th.attr('colspan') || 1;
    				totalColspan += Number(colspan);
    				var dataOptions = th.attr('data-options');
    				if(dataOptions && dataOptions.indexOf("field:'" + field + "'") != -1 || th.attr('field') == field){
    					return th.get(0);
    					//break outer;
    				}
    			}
    		}
    	}	
    })(jQuery);