jqgrid表头合并和行合并,基于jquery脚本插件.docx

/* jQuery tui tablespan plugin 0.2* Copyright (c) 2010 china yewf* Dual licensed under the MIT and GPL licenses:* /licenses/mit-license.php* /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 = indexsi; 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.colsi.indexes + ); for (var j = 0; j colIndexs.length; j+) if (j = colIndexs.length - 1) break; if (colIndexsj != colIndexsj + 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 = $(tablearia-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 = $().css(height, auto).addClass(ui-jqgrid-labels).attr(role, rowheader).insertBefore(oldTr); var ntr = $().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 = $().css(height, cH), fth = $().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.colsi.indexes + ); var colTitle = options.colsi.title; var isrowSpan = false; for (var j = 0; j 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.arguments0; 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.clien