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

合并jqgird 单元格

 
阅读更多
JScript code
/*
*  jQuery tui tablespan plugin 0.2
*
*  Copyright (c) 2010 china yewf
*
* Dual licensed under the MIT and GPL licenses:
*   http://www.opensource.org/licenses/mit-license.php
*   http://www.gnu.org/licenses/gpl.html
*
* Create: 2010-09-16 10:34:51 yewf $
* Revision: $Id: tui.tablespan.js  2010-09-21 10:08:36 yewf $
*
* Table rows or cols span
*/


/* 行合并。索引从0开始,包含隐藏列,注意jqgrid的自动序号列也是一列。
使用方法:
$("#jqGridId").tuiTableRowSpan("3, 4, 8");
*/
jQuery.fn.tuiTableRowSpan = function(colIndexs) {
    return this.each(function() {
        var indexs = eval("([" + colIndexs + "])");
        for (var i = 0; i < indexs.length; i++) {
            var colIdx = indexs[i];
            var that;
            $('tbody tr', this).each(function(row) {
                $('td:eq(' + colIdx + ')', this).filter(':visible').each(function(col) {
                    if (that != null && $(this).html() == $(that).html()) {
                        rowspan = $(that).attr("rowSpan");
                        if (rowspan == undefined) {

                            $(that).attr("rowSpan", 1);
                            rowspan = $(that).attr("rowSpan");
                        }
                        rowspan = Number(rowspan) + 1;
                        $(that).attr("rowSpan", rowspan); // do your action for the colSpan cell here
                        $(this).remove(); // .hide(); // do your action for the old cell here
                    } else {
                        that = this;
                    }
                    // that = (that == null) ? this : that; // set the that if not already set
                });

            });
        }
    });
};

/* 列表头合并。
索引从0开始,包含隐藏列,注意jqgrid的自动序号列也是一列。
  
使用方法:
$("#jqGridId").tuiJqgridColSpan({
    cols: [
        { indexes: "3, 4", title: "合并后的大标题" },
        { indexes: "6, 7", title: "合并后的大标题" },
        { indexes: "11, 12, 13", title: "合并后的大标题" }
    ]
});
注意事项:
1.没有被合并的rowSpan=2,即两行。列的拖拉有BUG,不能和jqgrid的显示层位置同步;   
2.jqgrid的table表头必须有aria-labelledby='gbox_tableid' 这样的属性;
3.只适用于jqgrid;
*/
var tuiJqgridColSpanInit_kkccddqq = false;
jQuery.fn.tuiJqgridColSpan = function(options) {
    options = $.extend({}, { UnbindDragEvent: true, cols: null }, options);

    if (tuiJqgridColSpanInit_kkccddqq) {
        return;
    }

    // 验证参数
    if (options.cols == null || options.cols.length == 0) {
        alert("cols参数必须设置");
        return;
    }

    // 传入的列参数必须是顺序列,由小到大排列,如3,4,5
    var error = false;
    for (var i = 0; i < options.cols.length; i++) {
        var colIndexs = eval("([" + options.cols[i].indexes + "])");

        for (var j = 0; j < colIndexs.length; j++) {
            if (j == colIndexs.length - 1) break;

            if (colIndexs[j] != colIndexs[j + 1] - 1) {
                error = true;
                break;
            }
        }

        if (error) break;
    }

    if (error) {
        alert("传入的列参数必须是顺序列,如:3,4,5");
        return;
    }

    // 下面是对jqgrid的表头进行改造
    var resizing = false,
    currentMoveObj, startX = 0;

    var tableId = $(this).attr("id");
    // thead
    var jqHead = $("table[aria-labelledby='gbox_" + tableId + "']");
    var jqDiv = $("div#gbox_" + tableId);

    var oldTr = $("thead tr", jqHead);
    var oldThs = $("thead tr:first th", jqHead);

    // 在原来的th上下分别增加一行,下面这行克隆,上面这行增加且height=0
    var ftr = $("<tr/>").css("height", "auto").addClass("ui-jqgrid-labels").attr("role", "rowheader").insertBefore(oldTr);
    var ntr = $("<tr/>").addClass("ui-jqgrid-labels").attr("role", "rowheader").insertAfter(oldTr);
    oldThs.each(function(index) {
        var cth = $(this);
        var cH = cth.css("height"), cW = cth.css("width"),
        nth = $("<th/>").css("height", cH),
        fth = $("<th/>").css("height", 0);
        // 在IE8或firefox下面,会出现多一条边线,因此要去掉。
        if (($.browser.msie && $.browser.version == "8.0") || $.browser.mozilla) {
            fth.css({ "border-top": "solid 0px #fff", "border-bottom": "solid 0px #fff" });
        }

        if (cth.css("display") == "none") {
            nth.css({ "display": "none", "white-space": "nowrap", "width": 0 });
            fth.css({ "display": "none", "white-space": "nowrap", "width": 0 });
        }
        else {
            nth.css("width", cW);
            fth.css("width", cW);

            // 这里增加一个事件,解决列的拖动
            var res = cth.children("span.ui-jqgrid-resize");
            res && res.bind("mousedown", function(e) {
                currentMoveObj = $(this);
                startX = getEventPos(e).x;

                resizing = true;
                document.onselectstart = new Function("return false");
            });
        }
        // 增加第一行
        fth.addClass(cth.attr("class")).attr("role", "columnheader").appendTo(ftr);

        // 增加第三行
        cth.children().clone().appendTo(nth);
        nth.addClass(cth.attr("class")).attr("role", "columnheader").appendTo(ntr);
    });

    // 列合并。注意:这里不放在上面的循环中处理,因为每个遍历都要执行下面的操作。
    for (var i = 0; i < options.cols.length; i++) {
        var colIndexs = eval("([" + options.cols[i].indexes + "])");
        var colTitle = options.cols[i].title;

        var isrowSpan = false;
        for (var j = 0; j < colIndexs.length; j++) {
            oldThs.eq(colIndexs[j]).attr({ "colSpan": colIndexs.length, "rowSpan": "1" });

            // 把被合并的列隐藏,不能remove,这样jqgrid的排序功能会错位。
            if (j != 0) {
                oldThs.eq(colIndexs[j]).attr("colSpan", "1").hide();
            }

            // 标记删除clone后多余的th
            $("thead tr:last th", jqHead).eq(colIndexs[j]).attr("tuidel", "false");

            // 增加列标题
            if (j == 0) {
                var div = oldThs.eq(colIndexs[j]).find("div.ui-jqgrid-sortable");
                var divCld = div.children();

                div.text(colTitle);
                div.append(divCld);
            }
        }
    }
    // 移除多余列
    $("thead tr:last th[tuidel!='false']", jqHead).remove();
    // 对不需要合并的列增加rowSpan属性
    oldThs.each(function() {
        if ($(this).attr("colSpan") == 1) {
            $(this).attr("rowSpan", 2);
        }
    });

    var jqBody = $(this);
    // 绑定拖动事件
    $(document).bind("mouseup", function(e) {
        var ret = true;
        if (resizing) {
            var parentTh = currentMoveObj.parent();
            var currentIndex = parentTh.parents("tr").find("th").index(parentTh);

            var width, diff;
            var tbodyTd = $("tbody tr td", jqBody);
            var currentTh = $("thead tr:first th", jqHead).eq(currentIndex);

            // 先使用td的宽度,如果td不存在,则使用事件宽度
            if (tbodyTd.length > 0) {
                diff = 0;
                width = parseInt(tbodyTd.eq(currentIndex).css("width"));
            }
            else {
                diff = getEventPos(e).x - startX;
                width = parseInt(currentTh.css("width"));
            }

            var lastWidth = diff + width;
            currentTh.css("width", lastWidth + "px");

            resizing = false;
            ret = false;
        }
        document.onselectstart = new Function("return true");
        return ret;
    });

    // 设置为已初始化
    tuiJqgridColSpanInit_kkccddqq = true;

    // 适应不同浏览器获取鼠标坐标
    getEvent = function(evt) {
        evt = window.event || evt;

        if (!evt) {
            var fun = getEvent.caller;
            while (fun != null) {
                evt = fun.arguments[0];
                if (evt && evt.constructor == Event)
                    break;
                fun = fun.caller;
            }
        }

        return evt;
    }

    getAbsPos = function(pTarget) {
        var x_ = y_ = 0;

        if (pTarget.style.position != "absolute") {
            while (pTarget.offsetParent) {
                x_ += pTarget.offsetLeft;
                y_ += pTarget.offsetTop;
                pTarget = pTarget.offsetParent;
            }
        }
        x_ += pTarget.offsetLeft;
        y_ += pTarget.offsetTop;
        return { x: x_, y: y_ };
    }

    getEventPos = function(evt) {
        var _x, _y;
        evt = getEvent(evt);
        if (evt.pageX || evt.pageY) {
            _x = evt.pageX;
            _y = evt.pageY;
        } else if (evt.clientX || evt.clientY) {
            _x = evt.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft) - (document.body.clientLeft || document.documentElement.clientLeft);
            _y = evt.clientY + (document.body.scrollTop || document.documentElement.scrollTop) - (document.body.clientTop || document.documentElement.clientTop);
        } else {
            return getAbsPos(evt.target);
        }
        return { x: _x, y: _y };
    }
};




分享到:
评论

相关推荐

    在Winfrom下的对DataGridView单元格合并

    Winform下DataGridView单元格合并技术详解 在Winform开发中,DataGridView控件是非常常用的控件之一,它可以用来显示和编辑数据。但是,在实际开发中,我们经常会遇到需要合并单元格的问题,例如,在DataGridView中...

    datagridview横向合并单元格

    标题"datagridview横向合并单元格"涉及到的是如何在`DataGridView`中实现列的合并,这在展示某些特定类型的数据时非常有用,比如汇总信息或者创建带有标题的复合单元格。下面将详细阐述`DataGridView`的列合并以及...

    gridControl根据条件合并单元格

    本文将深入探讨如何在GridControl中根据特定条件进行单元格的合并,以此来优化数据展示,提高用户体验。 GridControl是DevExpress提供的一种可视化组件,常用于构建数据密集型应用程序。它支持丰富的功能,如排序、...

    EasyExcel-合并单元格.doc

    EasyExcel-合并单元格技术详解 EasyExcel 是一个功能强大的 Excel 处理库,提供了许多便捷的 API 来处理 Excel 文件。在实际应用中,我们经常需要合并单元格,以便更好地展示数据。在本文中,我们将详细介绍如何...

    word NPOI合并单元格示例

    本示例将深入讲解如何利用NPOI库在Word文档中合并单元格,这对于创建报表、表格和其他格式化的文档非常有用。 NPOI是.NET平台上的一个强大的工具,它可以读取和写入Microsoft Office格式的文件。在Word处理方面,...

    jasperReport 动态合并单元格示例

    在jasperReport中,动态合并单元格是一项重要的功能,它能够根据数据的特性和需求灵活调整表格的布局,使得报告更加整洁且易于阅读。本示例将详细介绍如何在jasperReport中实现动态合并单元格。 首先,我们需要了解...

    DataGridView合并单元格(纵向合并及横向合并)

    在探讨“DataGridView合并单元格(纵向合并及横向合并)”这一主题时,我们首先需要理解DataGridView控件在Windows Forms中的重要性以及它如何为数据展示提供灵活且强大的功能。DataGridView是一个用于显示表格数据...

    C#合并EXCEL单元格

    "C#合并EXCEL单元格"的主题涉及到如何使用C#编程语言操作Microsoft Excel文档,特别是针对那些需要将相同内容的单元格进行纵向合并的需求。下面将详细介绍这个主题,并提供一些关键知识点。 首先,你需要引入能够...

    delphi dbgrid有条件合并单元格

    在某些场景下,我们可能需要根据特定条件合并DBGrid中的单元格,以提高数据展示的可读性和美观性。标题“delphi dbgrid有条件合并单元格”所涉及的知识点就是如何实现这个功能。DBGrid EhPro(通常简称为DBGridEh)...

    C# DataGridView 合并单元格

    当需要在表格中展示具有层次结构或汇总信息的数据时,合并单元格功能就显得尤为重要。本篇文章将深入探讨如何在C#的`DataGridView`中实现单元格的合并,以增强数据展示的效果。 首先,我们需要理解`DataGridView`的...

    poi获取合并单元格

    ### POI 获取合并单元格详解 #### 一、概述 Apache POI 是一个流行的 Java 库,用于处理 Microsoft Office 格式的文档,如 Word、Excel 和 PowerPoint。在本篇文章中,我们将详细介绍如何使用 POI 处理 Excel 文件...

    jquery datatable 单元格合并

    在某些场景下,我们可能需要对表格中的单元格进行合并,以便更好地展示数据,例如汇总或者分类。本篇将详细介绍如何使用jQuery DataTables结合JavaScript来实现相同内容单元格的动态合并。 首先,我们需要理解...

    excel计算合并单元格所占行数

    ### Excel计算合并单元格所占行数 #### 知识点概述 在Excel中处理大量数据时,常常需要对合并单元格进行各种操作,比如计算它们所占据的行数。这种需求常见于需要统计每组数据的具体行数,或者是在进行数据分析时...

    《java合并EXCEL单元格.rar》

    java合并EXCEL单元格.rarjava合并EXCEL单元格.rarjava合并EXCEL单元格.rarjava合并EXCEL单元格.rarjava合并EXCEL单元格.rarjava合并EXCEL单元格.rarjava合并EXCEL单元格.rarjava合并EXCEL单元格.rarjava合并EXCEL...

    仿Excel合并单元格实例点击合并表格单元格.zip

    "仿Excel合并单元格实例点击合并表格单元格"是一个这样的尝试,它旨在提供一个用户友好的界面,让用户能够在网页上的表格中实现类似于Excel的单元格合并功能。这一功能对于数据展示、报告生成以及自定义表单设计等...

    layui table合并单元格.zip

    另外,"2layui数据表格跨行自动合并 - 合并行.url" 和 "3layui 动态表格之合并单元格 - 合并列.url" 很可能是指向相关教程或示例的链接,分别指导如何实现跨行和跨列的合并。在跨列合并中,可能涉及到对每个单元格的...

    vue-easytable合并单元格

    在这个“vue-easytable合并单元格”的主题下,我们将深入探讨如何利用Vue Easytable实现表格中的单元格合并。 在传统的HTML表格中,合并单元格通常使用`&lt;td&gt;`的`colspan`和`rowspan`属性来完成,但在Vue Easytable...

    jxls2.0支持合并单元格

    jxls2.0支持合并单元格和合并单元格模板写入数据,jar包里已经包含了pom.xml,可以自行解压方便上传到maven私服,这种方式会带上依赖,否则要一个个手动添加依赖.pom在jar包里jxls-core\2.0\jxls-core-2.0\META-INF\...

    易语言合并单元格

    在易语言编程环境中,"合并单元格"是一个常见的操作,特别是在处理表格数据或者创建报表时。易语言,作为一款中国本土开发的、面向初学者的编程语言,以其简单易学的特点,深受广大编程爱好者的喜爱。下面将详细介绍...

Global site tag (gtag.js) - Google Analytics