`
madbluesky
  • 浏览: 83038 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jqGrid合并表头

阅读更多

依赖前一个博客中的jquery合并单元格插件

http://madbluesky.iteye.com/admin/blogs/538305

 

resizeStop:调用

function headerAliagn(newWidth,index,id){
        var selector = "#"+id+"_xxx th:eq("+index+")";
                          var th = $(selector);
                          var colspan = parseInt(th.attr("colspan"));
                          if(colspan){
                              for(var i=1;i<colspan;i++){
                                  selector = "#"+id+"_xxx th:eq("+(index+i)+")";
                                   th.css("width",(parseInt(th.css("width"))+parseInt($(selector).css("width"))));
                              }
                          }
                          th.css("width",parseInt(th.width())+5*(colspan-1));
}
表格加载完时调用
function jqGridSpan(id){
    loaded = typeof(loaded)==="undefined"?[]:loaded;
     var tables = $("table");
                          var table_head = tables.filter(function(index){
                               if($(tables[index+1]).attr("id")==id){
                                   $(tables[index]).attr("id",id+"_xxx");
                                   return tables[index];
                               }
                           });
                          $.tableSpan.table_colspan("#"+id+"_xxx",1);
                          $("#"+id+"_xxx tr:first th:visible").each(function(){
                              var colspan = parseInt($(this).attr("colspan"));
                              if(colspan && !loaded[id]){
                                  $(this).css("width",parseInt($(this).css("width"))+5*(colspan-1));
                              }
                          });
                          loaded[id] = true;
}

0
0
分享到:
评论

相关推荐

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

    在这个项目中,我们将探讨如何实现jqGrid的三级表头功能,并且支持冻结列以及拖动列的功能。 首先,让我们了解什么是三级表头。在标准的表格中,我们通常有单一或双层的表头,而在三级表头中,列标题被分为了三个...

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

    jqgrid合并行、合并列 先看示例图片最终效果: jqgrid合并单元格 .jqgrid { width: 80%; margin: 0 auto; } /* 这个代码是解决表头有一点点错位的问题 */ .ui-state-default, .ui-widget-content .ui-state...

    数据表格JqGrid自适应列宽度

    JqGrid是一款基于jQuery的数据表格插件,它提供了一种高效、可定制的方式来展示和操作表格数据。本文将深入探讨“数据表格JqGrid自适应列宽度”这一主题,以帮助开发者更好地理解和实现这一功能。 首先,JqGrid允许...

    jqgrid 分组 合计 例子

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

    jqGrid绘制表格

    这通常用于合并表头,以便更好地组织和展示信息。你需要在定义列模型时指定`rowspan`属性,并在数据加载时正确计算合并的行数。 接下来,我们讨论“添加行”。在jqGrid中,可以使用`addRowData`方法动态地向表格中...

    jqgrid表格

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

    jqgridtoExcel.rar

    此外,我们还将探讨JqGrid如何处理行和列的合并,确保在导出后仍保持原样。 首先,我们需要理解JqGrid导出到Excel的基本原理。JqGrid通过生成一个模拟Excel格式的HTML表格,然后利用浏览器的`data:` URL和`window....

    jqgrid checkbox 合并

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

    jqGrid 实例

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

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

    1. Flexigrid:这是个类似于ExtGrid的jQuery表格控件,具备调整列宽、合并列标题、分页、排序、显示/隐藏表格等功能。Flexigrid可以使用Ajax获取数据或转换普通表格。 2. Yahoo! UI Library: DataTable:此控件提供...

Global site tag (gtag.js) - Google Analytics