//此方法在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();
}
}
}
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
分享到:
相关推荐
在标准的表格中,我们通常有单一或双层的表头,而在三级表头中,列标题被分为了三个层次,这有助于对复杂数据进行更细致的分类和组织。例如,一级表头可能表示大类别,二级表头表示子类别,而三级表头则进一步细化为...
jqgrid合并行、合并列 ... /* 这个代码是解决表头有一点点错位的问题 */ .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 2px solid #e2e2e2; }
在IT领域,尤其是在Web开发中,数据展示是一个关键部分,特别是在处理大量结构化数据时。JqGrid是一款基于jQuery的数据表格插件,它提供了一种高效、可定制的方式来展示和操作表格数据。本文将深入探讨“数据表格...
在本例中,我们关注的是jqGrid的分组、合计以及表头合并的功能,这些都是在处理大数据表格时非常实用的特性。 首先,让我们了解**分组**的概念。在jqGrid中,分组允许我们将数据根据某个字段进行分类,使得同类数据...
在本场景中,"jqgrid checkbox 合并"可能指的是在jqGrid中实现复选框(checkbox)的合并操作,比如多选行或单元格合并。在C++11标签下,虽然jqGrid是JavaScript库,但可能涉及前后端交互或者数据处理的上下文。 ...
在这个主题中,我们将深入探讨如何使用jqGrid实现行的合并、添加行、删除行以及添加日期等功能。 首先,关于“行的合并”,在jqGrid中,可以使用`rowspan`属性来实现。例如,如果你有一组具有相同数据的连续行,你...
1. **单元格合并**:jqGrid允许在表格中合并单元格,这在显示具有层次结构的数据时非常有用。通过设置`cellattr`或`formatter`函数,可以控制单元格的样式,实现跨行或跨列的合并。例如,当某一列的值相同,我们可以...
在这个"jqGrid 实例"中,我们将探讨如何实现隐藏列、合并单元格、合并表头以及如何传递参数。 1. **隐藏列**:jqGrid 允许用户根据需求动态地显示或隐藏列。这可以通过设置列模型(colModel)中的 `hidden` 属性来...
JqGrid是一款强大的JavaScript表格插件,用于在Web页面中展示和操作数据。它提供了丰富的功能,如排序、分页、搜索以及自定义列等。本教程主要关注JqGrid如何实现前端JS导出到Excel,并且兼容多种浏览器,包括IE、...
1. Flexigrid:基于jQuery的轻量级表格插件,它提供了类似Ext Grid的功能,如调整列宽、合并列标题、分页和排序。Flexigrid可以从Ajax获取数据或直接从HTML表格转换。 2. Yahoo! UI Library: DataTable:DataTable...