下面的js是近期寫的一個jqgrid表頭與行合併指令碼。jqgrid也真是，表頭合併的功能都不提供，用起來好尷尬。

使用方法：在jqgrid的loadComplete或者gridComplete事件中使用。

程式碼不是最優化的，希望大家一起改進它。謝謝

/* * 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({}, { 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 }; } };