【JqGrid】JqGrid单元格合并及表头列合并,jqgrid单元格合并

1、合并单元格代码示例


表头列合并代码:


效果图



2、jqgrid表头合并和行合并,基于jquery脚本插件

下面的js是近期写的一个jqgrid表头与行合并脚本。jqgrid也真是,表头合并的功能都不提供,用起来好尴尬。

 

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

 

[javascript]  view plain  copy
  1. /* 
  2. *  <a href="http://lib.csdn.net/base/jquery" class='replace_word' title="jQuery知识库" target='_blank' style='color:#df3434; font-weight:bold;'>jQuery</a> tui tablespan plugin 0.2 
  3. * 
  4. *  Copyright (c) 2010 china yewf 
  5. * 
  6. * Dual licensed under the MIT and GPL licenses: 
  7. *   http://www.opensource.org/licenses/mit-license.<a href="http://lib.csdn.net/base/php" class='replace_word' title="PHP知识库" target='_blank' style='color:#df3434; font-weight:bold;'>PHP</a> 
  8. *   http://www.gnu.org/licenses/gpl.html 
  9. * 
  10. * Create: 2010-09-16 10:34:51 yewf $ 
  11. * Revision: $Id: tui.tablespan.js  2010-09-21 10:08:36 yewf $  
  12. * 
  13. * Table rows or cols span 
  14. */  
  15. /* 行合并。索引从0开始,包含隐藏列,注意jqgrid的自动序号列也是一列。 
  16. 使用方法: 
  17. $("#jqGridId").tuiTableRowSpan("3, 4, 8"); 
  18. */  
  19. jQuery.fn.tuiTableRowSpan = function(colIndexs) {  
  20.     return this.each(function() {  
  21.         var indexs = eval("([" + colIndexs + "])");  
  22.         for (var i = 0; i < indexs.length; i++) {  
  23.             var colIdx = indexs[i];  
  24.             var that;  
  25.             $('tbody tr'this).each(function(row) {  
  26.                 $('td:eq(' + colIdx + ')'this).filter(':visible').each(function(col) {  
  27.                     if (that != null && $(this).html() == $(that).html()) {  
  28.                         rowspan = $(that).attr("rowSpan");  
  29.                         if (rowspan == undefined) {  
  30.                             $(that).attr("rowSpan", 1);  
  31.                             rowspan = $(that).attr("rowSpan");  
  32.                         }  
  33.                         rowspan = Number(rowspan) + 1;  
  34.                         $(that).attr("rowSpan", rowspan); // do your action for the colSpan cell here  
  35.                         $(this).remove(); // .hide(); // do your action for the old cell here  
  36.                     } else {  
  37.                         that = this;  
  38.                     }  
  39.                     // that = (that == null) ? this : that; // set the that if not already set  
  40.                 });  
  41.             });  
  42.         }  
  43.     });  
  44. };  
  45. /* 列表头合并。 
  46. 索引从0开始,包含隐藏列,注意jqgrid的自动序号列也是一列。 
  47.     
  48. 使用方法: 
  49. $("#jqGridId").tuiJqgridColSpan({  
  50.     cols: [ 
  51.         { indexes: "3, 4", title: "合并后的大标题" }, 
  52.         { indexes: "6, 7", title: "合并后的大标题" }, 
  53.         { indexes: "11, 12, 13", title: "合并后的大标题" } 
  54.     ] 
  55. }); 
  56. 注意事项:  
  57. 1.没有被合并的rowSpan=2,即两行。列的拖拉有BUG,不能和jqgrid的显示层位置同步;     
  58. 2.jqgrid的table表头必须有aria-labelledby='gbox_tableid' 这样的属性; 
  59. 3.只适用于jqgrid; 
  60. */  
  61. var tuiJqgridColSpanInit_kkccddqq = false;  
  62. jQuery.fn.tuiJqgridColSpan = function(options) {  
  63.     options = $.extend({}, { cols: null }, options);  
  64.     if (tuiJqgridColSpanInit_kkccddqq) {  
  65.         return;  
  66.     }  
  67.     // 验证参数  
  68.     if (options.cols == null || options.cols.length == 0) {  
  69.         alert("cols参数必须设置");  
  70.         return;  
  71.     }  
  72.     // 传入的列参数必须是顺序列,由小到大排列,如3,4,5  
  73.     var error = false;  
  74.     for (var i = 0; i < options.cols.length; i++) {  
  75.         var colIndexs = eval("([" + options.cols[i].indexes + "])");  
  76.         for (var j = 0; j < colIndexs.length; j++) {  
  77.             if (j == colIndexs.length - 1) break;  
  78.             if (colIndexs[j] != colIndexs[j + 1] - 1) {  
  79.                 error = true;  
  80.                 break;  
  81.             }  
  82.         }  
  83.         if (error) break;  
  84.     }  
  85.     if (error) {  
  86.         alert("传入的列参数必须是顺序列,如:3,4,5");  
  87.         return;  
  88.     }  
  89.     // 下面是对jqgrid的表头进行改造  
  90.     var resizing = false,  
  91.     currentMoveObj, startX = 0;  
  92.     var tableId = $(this).attr("id");  
  93.     // thead  
  94.     var jqHead = $("table[aria-labelledby='gbox_" + tableId + "']");  
  95.     var jqDiv = $("div#gbox_" + tableId);  
  96.     var oldTr = $("thead tr", jqHead);  
  97.     var oldThs = $("thead tr:first th", jqHead);  
  98.     // 在原来的th上下分别增加一行,下面这行克隆,上面这行增加且height=0  
  99.     var ftr = $("<tr/>").css("height""auto").addClass("ui-jqgrid-labels").attr("role""rowheader").insertBefore(oldTr);  
  100.     var ntr = $("<tr/>").addClass("ui-jqgrid-labels").attr("role""rowheader").insertAfter(oldTr);  
  101.     oldThs.each(function(index) {  
  102.         var cth = $(this);  
  103.         var cH = cth.css("height"), cW = cth.css("width"),  
  104.         nth = $("<th/>").css("height", cH),  
  105.         fth = $("<th/>").css("height", 0);  
  106.         // 在IE8或firefox下面,会出现多一条边线,因此要去掉。  
  107.         if (($.browser.msie && $.browser.version == "8.0") || $.browser.mozilla) {  
  108.             fth.css({ "border-top""solid 0px #fff""border-bottom""solid 0px #fff" });  
  109.         }  
  110.         if (cth.css("display") == "none") {  
  111.             nth.css({ "display""none""white-space""nowrap""width": 0 });  
  112.             fth.css({ "display""none""white-space""nowrap""width": 0 });  
  113.         }  
  114.         else {  
  115.             nth.css("width", cW);  
  116.             fth.css("width", cW);  
  117.             // 这里增加一个事件,解决列的拖动  
  118.             var res = cth.children("span.ui-jqgrid-resize");  
  119.             res && res.bind("mousedown"function(e) {  
  120.                 currentMoveObj = $(this);  
  121.                 startX = getEventPos(e).x;  
  122.                 resizing = true;  
  123.                 document.onselectstart = new Function("return false");  
  124.             });  
  125.         }  
  126.         // 增加第一行  
  127.         fth.addClass(cth.attr("class")).attr("role""columnheader").appendTo(ftr);  
  128.         // 增加第三行  
  129.         cth.children().clone().appendTo(nth);  
  130.         nth.addClass(cth.attr("class")).attr("role""columnheader").appendTo(ntr);  
  131.     });  
  132.     // 列合并。注意:这里不放在上面的循环中处理,因为每个遍历都要执行下面的操作。  
  133.     for (var i = 0; i < options.cols.length; i++) {  
  134.         var colIndexs = eval("([" + options.cols[i].indexes + "])");  
  135.         var colTitle = options.cols[i].title;  
  136.         var isrowSpan = false;  
  137.         for (var j = 0; j < colIndexs.length; j++) {  
  138.             oldThs.eq(colIndexs[j]).attr({ "colSpan": colIndexs.length, "rowSpan""1" });  
  139.             // 把被合并的列隐藏,不能remove,这样jqgrid的排序功能会错位。  
  140.             if (j != 0) {  
  141.                 oldThs.eq(colIndexs[j]).attr("colSpan""1").hide();  
  142.             }  
  143.             // 标记删除clone后多余的th  
  144.             $("thead tr:last th", jqHead).eq(colIndexs[j]).attr("tuidel""false");  
  145.             // 增加列标题  
  146.             if (j == 0) {  
  147.                 var div = oldThs.eq(colIndexs[j]).find("div.ui-jqgrid-sortable");  
  148.                 var divCld = div.children();  
  149.                 div.text(colTitle);  
  150.                 div.append(divCld);  
  151.             }  
  152.         }  
  153.     }  
  154.     // 移除多余列  
  155.     $("thead tr:last th[tuidel!='false']", jqHead).remove();  
  156.     // 对不需要合并的列增加rowSpan属性  
  157.     oldThs.each(function() {  
  158.         if ($(this).attr("colSpan") == 1) {  
  159.             $(this).attr("rowSpan", 2);  
  160.         }  
  161.     });  
  162.     var jqBody = $(this);  
  163.     // 绑定拖动事件  
  164.     $(document).bind("mouseup"function(e) {  
  165.         var ret = true;  
  166.         if (resizing) {  
  167.             var parentTh = currentMoveObj.parent();  
  168.             var currentIndex = parentTh.parents("tr").find("th").index(parentTh);  
  169.             var width, diff;  
  170.             var tbodyTd = $("tbody tr td", jqBody);  
  171.             var currentTh = $("thead tr:first th", jqHead).eq(currentIndex);  
  172.             // 先使用td的宽度,如果td不存在,则使用事件宽度  
  173.             if (tbodyTd.length > 0) {  
  174.                 diff = 0;  
  175.                 width = parseInt(tbodyTd.eq(currentIndex).css("width"));  
  176.             }  
  177.             else {  
  178.                 diff = getEventPos(e).x - startX;  
  179.                 width = parseInt(currentTh.css("width"));  
  180.             }  
  181.             var lastWidth = diff + width;  
  182.             currentTh.css("width", lastWidth + "px");  
  183.             resizing = false;  
  184.             ret = false;  
  185.         }  
  186.         document.onselectstart = new Function("return true");  
  187.         return ret;  
  188.     });  
  189.     // 设置为已初始化  
  190.     tuiJqgridColSpanInit_kkccddqq = true;  
  191.     // 适应不同浏览器获取鼠标坐标  
  192.     getEvent = function(evt) {  
  193.         evt = window.event || evt;  
  194.         if (!evt) {  
  195.             var fun = getEvent.caller;  
  196.             while (fun != null) {  
  197.                 evt = fun.arguments[0];  
  198.                 if (evt && evt.constructor == Event)  
  199.                     break;  
  200.                 fun = fun.caller;  
  201.             }  
  202.         }  
  203.         return evt;  
  204.     }  
  205.     getAbsPos = function(pTarget) {  
  206.         var x_ = y_ = 0;  
  207.         if (pTarget.style.position != "absolute") {  
  208.             while (pTarget.offsetParent) {  
  209.                 x_ += pTarget.offsetLeft;  
  210.                 y_ += pTarget.offsetTop;  
  211.                 pTarget = pTarget.offsetParent;  
  212.             }  
  213.         }  
  214.         x_ += pTarget.offsetLeft;  
  215.         y_ += pTarget.offsetTop;  
  216.         return { x: x_, y: y_ };  
  217.     }  
  218.     getEventPos = function(evt) {  
  219.         var _x, _y;  
  220.         evt = getEvent(evt);  
  221.         if (evt.pageX || evt.pageY) {  
  222.             _x = evt.pageX;  
  223.             _y = evt.pageY;  
  224.         } else if (evt.clientX || evt.clientY) {  
  225.             _x = evt.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft) - (document.body.clientLeft || document.documentElement.clientLeft);  
  226.             _y = evt.clientY + (document.body.scrollTop || document.documentElement.scrollTop) - (document.body.clientTop || document.documentElement.clientTop);  
  227.         } else {  
  228.             return getAbsPos(evt.target);  
  229.         }  
  230.         return { x: _x, y: _y };  
  231.     }  
  232. };  











已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付 19.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值