/** * jqGrid complexGroupHeaders * name cj * email 85309651@qq.com * blog http://cjblog.iteye.com/ * version 0.2 * date 2012-06-03 **/ (function($){ $.jgrid.extend({ /** * 三级表头 by ljq * @参数 o : 三级表头参数 */ setComplexHeaders : function ( o ) { o = $.extend({ complexHeaders: { defaultStyle : true, threeLevel:[], twoLevel:[] } }, o || {}); return this.each(function(){ //三级表头和二级表头 var complexHeaders = o.complexHeaders, threeHeaders = complexHeaders["threeLevel"], twoHeaders = complexHeaders["twoLevel"]; if (threeHeaders.length === 0 || twoHeaders.length === 0) { return; } this.p.complexHeader = o; var ts = this, defaultStyle = complexHeaders.defaultStyle === undefined ? true : complexHeaders.defaultStyle, i, cmi, $thirdHeaderRow, $fourHeaderRow, $colHeader, th, $th, thStyle, iCol, tempInCol, inThreeCol, inTwoCol, threeLevelSkip = 0, twoLevelSkip = 0, hasTwoLevel = false, cghi, numberOfColumns, titleText, cVisibleColumns, colModel = ts.p.colModel, cml = colModel.length, ths = ts.grid.headers, $htable = $("table.ui-jqgrid-htable", ts.grid.hDiv), $secondHeaderRow = $htable.children("thead").children("tr.ui-jqgrid-labels:last").addClass("jqg-second-row-header"), $thead = $htable.children("thead"), $theadInTable, originalResizeStop, $firstHeaderRow = $htable.find(".jqg-first-row-header"); if ($firstHeaderRow[0] === undefined) { $firstHeaderRow = $('', {role: "row", "aria-hidden": "true"}).addClass("jqg-first-row-header").css("height", "auto"); } else { $firstHeaderRow.empty(); } var $firstRow, inColumnHeader = function (text, columnHeaders) { var i = 0, length = columnHeaders.length; for (; i < length; i++) { if (columnHeaders[i] && columnHeaders[i].startColumnName === text) { return i; } } return -1; }; $(ts).prepend($thead); $thirdHeaderRow = $('', {role: "rowheader"}).addClass("ui-jqgrid-labels jqg-third-row-header"); $fourHeaderRow = $('', {role: "rowheader"}).addClass("ui-jqgrid-labels jqg-four-row-header"); //循环模型每列 for (i = 0; i < cml; i++) { th = ths[i].el; $th = $(th); cmi = colModel[i]; // 给第一行添加单元格 thStyle = { height: '0px', width: ths[i].width +'px', display: (cmi.hidden ? 'none' : '')}; $("", {role: 'gridcell'}).css(thStyle).addClass("ui-first-th-"+ts.p.direction).appendTo($firstHeaderRow); //移除不需要的样式 th.style.width = ""; //是否在threeHeaders配置里面 inThreeCol = inColumnHeader(cmi.name, threeHeaders); if (inThreeCol >= 0) { cghi = threeHeaders[inThreeCol]; numberOfColumns = parseInt(cghi.numberOfColumns,10); titleText = cghi.titleText; // 计算显示的列长度 for (cVisibleColumns = 0, iCol = 0; iCol < numberOfColumns && (i + iCol < cml); iCol++) { if (!colModel[i + iCol].hidden) { cVisibleColumns++; } } $colHeader = $('').attr({role: "columnheader",noWrap:true}) .addClass("ui-state-default ui-th-column-header ui-th-"+ts.p.direction) .css({'height':'22px', 'border-top':'0px none','overflow':'hidden'}) .html(titleText); if(cVisibleColumns > 0) { $colHeader.attr("colspan", String(cVisibleColumns)); } if (ts.p.headertitles) { $colHeader.attr("title", $colHeader.text()); } //如果没有可见列则隐藏 if( cVisibleColumns === 0) { $colHeader.hide(); } $th.before($colHeader); threeLevelSkip = numberOfColumns; if (defaultStyle === false) { hasTwoLevel = false; //判断是否存在二层 for (var a=0;a=0) { cghi = twoHeaders[tempInCol]; numberOfColumns = parseInt(cghi.numberOfColumns,10); // 计算显示的列长度 for (iCol = 0; iCol < numberOfColumns && (a+i+iCol < cml); iCol++) { if (!colModel[a+i+iCol].hidden) { hasTwoLevel = true; break; } } if (hasTwoLevel === true) { break; } } } } } //是否在twoHeaders配置里面 inTwoCol = inColumnHeader(cmi.name, twoHeaders); if (threeLevelSkip >0 && inTwoCol >= 0) { cghi = twoHeaders[inTwoCol]; numberOfColumns = parseInt(cghi.numberOfColumns,10); titleText = cghi.titleText; // 计算显示的列长度 for (cVisibleColumns = 0, iCol = 0; iCol < numberOfColumns && (i + iCol < cml); iCol++) { if (!colModel[i + iCol].hidden) { cVisibleColumns++; } } $colHeader = $('').attr({role: "columnheader",noWrap:true}) .addClass("ui-state-default ui-th-column-header ui-th-"+ts.p.direction) .css({'height':'22px', 'border-top': '0px none','overflow':'hidden'}) .html(titleText); if(cVisibleColumns > 0) { $colHeader.attr("colspan", String(cVisibleColumns)); } if (ts.p.headertitles) { $colHeader.attr("title", $colHeader.text()); } //如果没有可见列则隐藏 if( cVisibleColumns === 0) { $colHeader.hide(); } $thirdHeaderRow.append($colHeader); twoLevelSkip = numberOfColumns; } //不在第三层 if (threeLevelSkip === 0) { $th.attr("rowspan", "3"); twoLevelSkip = 0; continue; } //在第三层不在第二层 if (threeLevelSkip > 0 && twoLevelSkip === 0) { if (defaultStyle) { $th.attr("rowspan", "2"); $thirdHeaderRow.append(th); } else { if (hasTwoLevel) { $th.attr("rowspan", "2"); $thirdHeaderRow.append(th); } else { $colHeader.attr("rowspan", "2"); $fourHeaderRow.append(th); } } threeLevelSkip--; continue; } //在第三层也在第二层 if (threeLevelSkip > 0 && twoLevelSkip > 0) { $fourHeaderRow.append(th); threeLevelSkip--; twoLevelSkip--; } } $theadInTable = $(ts).children("thead"); $theadInTable.prepend($firstHeaderRow); $thirdHeaderRow.insertAfter($secondHeaderRow); $fourHeaderRow.insertAfter($thirdHeaderRow); $htable.append($theadInTable); $htable.find("span.ui-jqgrid-resize").each(function () { var $parent = $(this).parent(); if ($parent.is(":visible")) { this.style.cssText = 'height: ' + ($parent.height()/*+4*/) + 'px !important; cursor: col-resize;'; } }); $htable.find("div.ui-jqgrid-sortable").each(function () { var $ts = $(this), $parent = $ts.parent(); if ($parent.is(":visible") && $parent.is(":has(span.ui-jqgrid-resize)")) { $ts.css('top', ($parent.height() - $ts.outerHeight()) / 2 + 'px'); } }); $firstRow = $theadInTable.find("tr.jqg-first-row-header"); $(ts).bind('jqGridResizeStop.setGroupHeaders', function (e, nw, idx) { $firstRow.find('th').eq(idx).width(nw); }); }); }, /** * 构造多表头冻结表格 by ljq * @参数 maxfrozen : 冻结的列index * @参数 htbl : 表格 */ createFrozenHtable : function(maxfrozen, htbl) { var ts = this[0], complexHeader = ts.p.complexHeader, complexHeaders = complexHeader["complexHeaders"], defaultStyle = complexHeaders.defaultStyle, threeHeaders = complexHeaders["threeLevel"], twoHeaders = complexHeaders["twoLevel"], tableid = ts.p.id, colModel = ts.p.colModel, cml = maxfrozen+1, ths = ts.grid.headers, threeLevelSkip = 0, twoLevelSkip = 0, hasTwoLevel = false, i, cmi, thStyle, th, $th, cn, $tempTh, iCol, $colHeader, cghi, tempInCol, inThreeCol, inTwoCol, numberOfColumns, titleText, cVisibleColumns, height = ts.grid.fhDiv.height(), $fhTable = $("
"), $thead = $(""), $firstHeaderRow = $('', {role: "row", "aria-hidden": "true"}).addClass("jqg-first-row-header").css("height", "auto"), $secondHeaderRow = $('', {role: "rowheader"}).addClass("ui-jqgrid-labels jqg-second-row-header"), $thirdHeaderRow = $('', {role: "rowheader"}).addClass("ui-jqgrid-labels jqg-third-row-header"), $fourHeaderRow = $('', {role: "rowheader"}).addClass("ui-jqgrid-labels jqg-four-row-header"), inColumnHeader = function (text, columnHeaders) { var i = 0, length = columnHeaders.length; for (; i < length; i++) { if (columnHeaders[i] && columnHeaders[i].startColumnName === text) { return i; } } return -1; }; //循环模型每列 for (i = 0; i < cml; i++) { cmi = colModel[i]; cn = cmi.name; $th = $("#"+tableid+"_"+cn,htbl); // 给第一行添加单元格 thStyle = { height: '0px', width: ths[i].width +'px', display: (cmi.hidden ? 'none' : '')}; $("", {role: 'gridcell'}).css(thStyle).addClass("ui-first-th-"+ts.p.direction).appendTo($firstHeaderRow); //是否在threeHeaders配置里面 inThreeCol = inColumnHeader(cmi.name, threeHeaders); if (inThreeCol >= 0) { cghi = threeHeaders[inThreeCol]; numberOfColumns = parseInt(cghi.numberOfColumns,10); if (numberOfColumns+i-1>maxfrozen) { numberOfColumns = maxfrozen-i+1; } titleText = cghi.titleText; // 计算显示的列长度 for (cVisibleColumns = 0, iCol = 0; iCol < numberOfColumns && (i + iCol < cml); iCol++) { if (!colModel[i + iCol].hidden) { cVisibleColumns++; } } $colHeader = $('').attr({role: "columnheader",noWrap:true}) .addClass("ui-state-default ui-th-column-header ui-th-"+ts.p.direction) .css({'height':'22px', 'border-top':'0px none','overflow':'hidden'}) .html(titleText); if(cVisibleColumns > 0) { $colHeader.attr("colspan", String(cVisibleColumns)); } if (ts.p.headertitles) { $colHeader.attr("title", $colHeader.text()); } //如果没有可见列则隐藏 if( cVisibleColumns === 0) { $colHeader.hide(); } $colHeader.appendTo($secondHeaderRow); threeLevelSkip = numberOfColumns; if (defaultStyle === false) { hasTwoLevel = false; //判断是否存在二层 for (var a=0;a=0) { cghi = twoHeaders[tempInCol]; numberOfColumns = parseInt(cghi.numberOfColumns,10); if (numberOfColumns+a+i-1>maxfrozen) { numberOfColumns = maxfrozen-(a+i)+1; } // 计算显示的列长度 for (iCol = 0; iCol < numberOfColumns && (a+i+iCol < cml); iCol++) { if (!colModel[a+i+iCol].hidden) { hasTwoLevel = true; break; } } } if (hasTwoLevel === true) { break; } } } } //是否在twoHeaders配置里面 inTwoCol = inColumnHeader(cmi.name, twoHeaders); if (threeLevelSkip >0 && inTwoCol >= 0) { cghi = twoHeaders[inTwoCol]; numberOfColumns = parseInt(cghi.numberOfColumns,10); if (numberOfColumns+i-1>maxfrozen) { numberOfColumns = maxfrozen-i+1; } titleText = cghi.titleText; // 计算显示的列长度 for (cVisibleColumns = 0, iCol = 0; iCol < numberOfColumns && (i + iCol < cml); iCol++) { if (!colModel[i + iCol].hidden) { cVisibleColumns++; } } $colHeader = $('').attr({role: "columnheader",noWrap:true}) .addClass("ui-state-default ui-th-column-header ui-th-"+ts.p.direction) .css({'height':'22px', 'border-top': '0px none','overflow':'hidden'}) .html(titleText); if(cVisibleColumns > 0) { $colHeader.attr("colspan", String(cVisibleColumns)); } if (ts.p.headertitles) { $colHeader.attr("title", $colHeader.text()); } //如果没有可见列则隐藏 if( cVisibleColumns === 0) { $colHeader.hide(); } $colHeader.appendTo($thirdHeaderRow); twoLevelSkip = numberOfColumns; } //不在第三层 if (threeLevelSkip === 0) { $th.attr("rowspan", "3"); $th.appendTo($secondHeaderRow); twoLevelSkip = 0; continue; } //在第三层不在第二层 if (threeLevelSkip > 0 && twoLevelSkip === 0) { if (defaultStyle) { $th.attr("rowspan", "2"); $th.appendTo($thirdHeaderRow); } else { if (hasTwoLevel) { $th.attr("rowspan", "2"); $th.appendTo($thirdHeaderRow); } else { $colHeader.attr("rowspan", "2"); $th.appendTo($fourHeaderRow); } } threeLevelSkip--; continue; } //在第三层也在第二层 if (threeLevelSkip > 0 && twoLevelSkip > 0) { $th.appendTo($fourHeaderRow); threeLevelSkip--; twoLevelSkip--; } } var thirdLen = $thirdHeaderRow.children().length, fourLen = $fourHeaderRow.children().length; if (thirdLen=== 0 && fourLen === 0) { $secondHeaderRow.height(height); } if (defaultStyle) { //默认渲染样式处理 if (thirdLen > 0 && fourLen === 0) { $thirdHeaderRow.height(height-23); } } else { if (thirdLen === 0 && fourLen > 0) { $secondHeaderRow.height(height-23); $secondHeaderRow.find("th").each(function(){ var rowspan = $(this).attr("rowspan"); if (rowspan) { $(this).attr("rowspan",String(parseInt(rowspan,10)-1)); } }); } } $firstHeaderRow.appendTo($thead); $secondHeaderRow.appendTo($thead); thirdLen && $thirdHeaderRow.appendTo($thead); fourLen && $fourHeaderRow.appendTo($thead); $thead.appendTo($fhTable); return $fhTable; } }); })(jQuery);