`
寻觅一只耳朵
  • 浏览: 35654 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

解决jqgrid中合并表头

阅读更多

//此方法在IE中能正常显示,在火狐中就会出现一些瑕疵,表头和内容会出现对不齐的情况

//jqGrid-htable-colspan
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/*用法
* options={
*     colspan:[
*         {cols:'14,15,16',title:'一级指标体系' },
*         {cols:'17,18,19',title:'二级指标体系' }
*        ]
*      }
* $("#tableId").jqGridTableTHColSpan(options);
* 
* 
* 仅仅只适用于jqGrid
* */
jQuery.fn.jqGridTableTHColSpan = function(options){
	                                    var id="gbox_"+$(this).attr("id");
							   var colspan=eval(options.colspan);
var thead_tr=$("#"+id+" table thead tr:first");
						
thead_tr.before(thead_tr.clone());
						
$("#"+id+" table thead tr:nth-child(1)").hide();
						
thead_tr.after(thead_tr.clone());
 var th_size= $("#"+id+" table thead tr:nth-child(2) th").length;
							
 var allcolspanths=new Array();
		
 for(var i=0;i<colspan.length;i++){
 var cols=eval("([" + colspan[i].cols + "])");
								var title=colspan[i].title;
							
       var ths=new Array();
	 var width=0;
							
for(var k=0;k<cols.length;k++){
						allcolspanths.push(cols[k]);
							
ths[k]=$("#"+id+" table thead tr:nth-child(2) 
th:nth-child("+cols[k]+")");
							 width+=(Number)(ths[k].attr("style").substring(ths[k].attr("style").lastIndexOf(":")+1,ths[k].attr("style").lastIndexOf("px")));
									if(k!=0){
									 ths[k].hide();
									   }
									   }
								 var h=ths[0].html();
								 var s=ths[0].children(".ui-jqgrid-sortable").html();
	 var t=s.substring(0,s.indexOf("<"));
	 var be=h.substring(0,h.indexOf(t));
		var af=h.substring(h.indexOf(t)+t.length,h.length);
								 ths[0].html(be+title+af);
	ths[0].attr("style","width:"+width+"px;");
	 ths[0].attr("colspan",cols.length);
										 }
	 //删除不需要合并的列rowspan
	for(var m=1;m<=th_size;m++){
								 for(var n=0;n<allcolspanths.length;n++){
								 if(allcolspanths[n]==m){
									  break;
									 }else if(n==allcolspanths.length-1){
								 $("#"+id+" table thead tr:nth-child(2) th:nth-child   ("+m+")").attr("rowspan",2);
 $("#"+id+" table thead tr:nth-child(3) th:nth-child("+m+")").hide();
									 }
											 }
										 }
									 }
////////////////////////////////////////////////////////////////////////////////////////////////////////////////	
							

分享到:
评论
2 楼 寻觅一只耳朵 2011-09-20  
不会吧。你看一下你的你合并的那些列是从1开始的还是从0开始的
1 楼 podie881111 2011-09-07  
牛人好 用了您的代码 需要合并的是被合并了  但是,其他的 都出现了 两个。如何解决啊?

相关推荐

    实现jqGrid三级表头功能,支持冻结,拖动

    在标准的表格中,我们通常有单一或双层的表头,而在三级表头中,列标题被分为了三个层次,这有助于对复杂数据进行更细致的分类和组织。例如,一级表头可能表示大类别,二级表头表示子类别,而三级表头则进一步细化为...

    jqgrid合并单元格,合并行、合并列

    jqgrid合并行、合并列 ... /* 这个代码是解决表头有一点点错位的问题 */ .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 2px solid #e2e2e2; }

    数据表格JqGrid自适应列宽度

    在IT领域,尤其是在Web开发中,数据展示是一个关键部分,特别是在处理大量结构化数据时。JqGrid是一款基于jQuery的数据表格插件,它提供了一种高效、可定制的方式来展示和操作表格数据。本文将深入探讨“数据表格...

    jqgrid 分组 合计 例子

    在本例中,我们关注的是jqGrid的分组、合计以及表头合并的功能,这些都是在处理大数据表格时非常实用的特性。 首先,让我们了解**分组**的概念。在jqGrid中,分组允许我们将数据根据某个字段进行分类,使得同类数据...

    jqgrid checkbox 合并

    在本场景中,"jqgrid checkbox 合并"可能指的是在jqGrid中实现复选框(checkbox)的合并操作,比如多选行或单元格合并。在C++11标签下,虽然jqGrid是JavaScript库,但可能涉及前后端交互或者数据处理的上下文。 ...

    jqGrid绘制表格

    在这个主题中,我们将深入探讨如何使用jqGrid实现行的合并、添加行、删除行以及添加日期等功能。 首先,关于“行的合并”,在jqGrid中,可以使用`rowspan`属性来实现。例如,如果你有一组具有相同数据的连续行,你...

    jqgrid表格

    1. **单元格合并**:jqGrid允许在表格中合并单元格,这在显示具有层次结构的数据时非常有用。通过设置`cellattr`或`formatter`函数,可以控制单元格的样式,实现跨行或跨列的合并。例如,当某一列的值相同,我们可以...

    jqGrid 实例

    在这个"jqGrid 实例"中,我们将探讨如何实现隐藏列、合并单元格、合并表头以及如何传递参数。 1. **隐藏列**:jqGrid 允许用户根据需求动态地显示或隐藏列。这可以通过设置列模型(colModel)中的 `hidden` 属性来...

    jqgridtoExcel.rar

    JqGrid是一款强大的JavaScript表格插件,用于在Web页面中展示和操作数据。它提供了丰富的功能,如排序、分页、搜索以及自定义列等。本教程主要关注JqGrid如何实现前端JS导出到Excel,并且兼容多种浏览器,包括IE、...

    整理了12款Javascript 表格控件(DataGrid)

    1. Flexigrid:基于jQuery的轻量级表格插件,它提供了类似Ext Grid的功能,如调整列宽、合并列标题、分页和排序。Flexigrid可以从Ajax获取数据或直接从HTML表格转换。 2. Yahoo! UI Library: DataTable:DataTable...

Global site tag (gtag.js) - Google Analytics