精华内容
下载资源
问答
  • 2022-02-11 17:16:10
     Merger(thisGrid, 'paraName', 'paraCode');
    
                            //JgGrid合并列
                            function Merger(curGrid, CellName, Na) {
                                //得到显示到界面的id集合
                                var mya = curGrid.getDataIDs();
                                //当前显示多少条
                                var length = mya.length;
                                for (var i = 0; i < length; i++) {
                                    //从上到下获取一条信息
                                    var before = curGrid.jqGrid('getRowData', mya[i]);
                                    //定义合并行数
                                    var rowSpanTaxCount = 1;
    
                                    if (before[CellName] == before[Na]) {
    
                                        rowSpanTaxCount++;
                                        curGrid.setCell(mya[i], Na, '', {
                                            display: 'none'
                                        });
                                        curGrid.setCell(mya[i], CellName, '', { color: 'black' }, { colspan: rowSpanTaxCount });
                                        debugger
                                    } else {
                                        rowSpanTaxCount = 1;
                                        break;
                                    }
    
                                }
                            }

     

    更多相关内容
  • jqgrid合并行、合并列 先看示例图片最终效果: jqgrid合并单元格 .jqgrid { width: 80%; margin: 0 auto; } /* 这个代码是解决表头有一点点错位的问题 */ .ui-state-default, .ui-widget-content .ui-state...
  • 表头列合并代码: 效果图 2、jqgrid表头合并和行合并,基于jquery脚本插件 下面的js是近期写的一个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. };  











    展开全文
  • 关键设定: cmTemplate: {  resizable:false,  sortable: false }, gridComplete: function() { var $grid = $("#ID");...// 第一的宽度 = 三宽度总和 var newWidth = $("#kijituMeisaiGrid_startTimeH").w


    关键设定:

    cmTemplate: {
            resizable:false,
            sortable: false
    },

    gridComplete: function() {

    var $grid = $("#ID");

    // 第一列的宽度 = 三列宽度总和

    var newWidth = $("#kijituMeisaiGrid_startTimeH").width() +
              $("#kijituMeisaiGrid_semiMarkStart").outerWidth(true) +
              $("#kijituMeisaiGrid_startTimeM").outerWidth(true);
    $grid.jqGrid("setLabel", "startTimeH", lblColStartTime, "", {
       style: "width: " + newWidth + "px;",
       colspan: "3"

    });

    // 第二,三列标题隐藏

    $grid.jqGrid("setLabel", "semiMarkStart", "", "", {style: "display: none"});
    $grid.jqGrid("setLabel", "startTimeM", "", "", {style: "display: none"});
    newWidth = $("#kijituMeisaiGrid_endTimeH").width() +
           $("#kijituMeisaiGrid_semiMarkEnd").outerWidth(true) +
           $("#kijituMeisaiGrid_endTimeM").outerWidth(true);
    $grid.jqGrid("setLabel", "endTimeH", lblColEndTime, "", {
       style: "width: " + newWidth + "px;",
       colspan: "3"
    });
    $grid.jqGrid("setLabel", "semiMarkEnd", "", "", {style: "display: none"});
    $grid.jqGrid("setLabel", "endTimeM", "", "", {style: "display: none"});
    }
    展开全文
  • jqgrid合并单元格(亲测有效)

    千次阅读 2020-01-16 09:36:24
    1、jqgrid官方的事件和方法 http://www.trirand.com/jqgridwik … %5B%5D=gridcomplete http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods 2、Demo如下: 代码看下面: 代码可以直接copy到一个....

    1、jqgrid官方的事件和方法

    http://www.trirand.com/jqgridwik … %5B%5D=gridcomplete
    http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods

    2、Demo如下:

    在这里插入图片描述

    3、代码截图如下:

    在这里插入图片描述
    在这里插入图片描述

    4、完整代码如下:

    代码可以直接copy到一个.html文件里就可以运行

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Just simple local grid</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/redmond/jquery-ui.css" />
        <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.0.0/css/ui.jqgrid.css" />
     
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
     
        <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.0.0/js/i18n/grid.locale-en.js"></script>
     
        <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.0.0/js/jquery.jqGrid.src.js"></script>
     
        <script type="text/javascript">
            //<![CDATA[
            $(document).ready(function() {
                var mydata = [
                        { id: "1", invdate: "2007-10-01", name: "test_test_test_test_test", note: "note", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
                        { id: "2", invdate: "2007-10-02", name: "test2222222222222222", note: "note2", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                        { id: "3", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
                        { id: "4", invdate: "2007-10-04", name: "test4444444444444444", note: "note4", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
                        { id: "5", invdate: "2007-10-31", name: "test5", note: "note5", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                        { id: "6", invdate: "2007-09-06", name: "test6", note: "note6", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
                        { id: "7", invdate: "2007-10-04", name: "test7", note: "note7", amount: "300.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
                        { id: "8", invdate: "2007-10-03", name: "test8", note: "note8", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                        { id: "9", invdate: "2007-09-01", name: "test9", note: "note9", amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },
                        { id: "10", invdate: "2007-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true, ship_via: "TN", total: "530.00" },
                        { id: "11", invdate: "2007-09-08", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
                        { id: "12", invdate: "2007-09-10", name: "test12", note: "note12", amount: "300.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
                        { id: "13", invdate: "2007-10-01", name: "test_test_test_test_test", note: "note", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
                        { id: "14", invdate: "2007-10-02", name: "test2222222222222222", note: "note2", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                        { id: "15", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
                        { id: "16", invdate: "2007-10-04", name: "test4444444444444444", note: "note4", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
                        { id: "17", invdate: "2007-10-31", name: "test5", note: "note5", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                        { id: "18", invdate: "2007-09-06", name: "test6", note: "note6", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
                        { id: "19", invdate: "2007-10-04", name: "test7", note: "note7", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
                        { id: "20", invdate: "2007-10-03", name: "test8", note: "note8", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                        { id: "21", invdate: "2007-09-01", name: "test9", note: "note9", amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },
                        { id: "22", invdate: "2007-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true, ship_via: "TN", total: "530.00" },
                        { id: "23", invdate: "2007-09-08", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
                        { id: "24", invdate: "2007-09-10", name: "test12", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }
                    ],
                    grid = $("#list");
     
                grid.jqGrid({
                    datatype: 'local',
                    data: mydata,
                    colNames: ['Inv No', 'Date', 'Client A', 'Client B', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'],
                    colModel: [
                        { name: 'id', index: 'id', width: 70, align: 'center', sorttype: 'int' },
                        { name: 'invdate', index: 'invdate', width: 80, align: 'center', sorttype: 'date',
                            formatter: 'date', formatoptions: { newformat: 'd-M-Y' }, datefmt: 'd-M-Y'
                        },
                        { name: 'name', index: 'name', width: 70,
                            cellattr: function(rowId, tv, rawObject, cm, rdata) {
                                //合并单元格
                                return 'id=\'name' + rowId + "\'";
                                //if (Number(rowId) < 5) { return ' colspan=2' }
                            }
                        },
                        { name: 'nameB', index: 'nameB', width: 70,
                            cellattr: function(rowId, tv, rawObject, cm, rdata) {
                                //if (Number(rowId) < 5) { return ' style="display:none;"' }
                            }
                        },
                        { name: 'amount', index: 'amount', width: 100, formatter: 'number', align: 'right',
                            cellattr: function(rowId, tv, rawObject, cm, rdata) {
                                //合并单元格
                                return 'id=\'amount' + rowId + "\'";
                            }
                        },
                        { name: 'tax', index: 'tax', width: 70, formatter: 'number', align: 'right',
                            cellattr: function(rowId, tv, rawObject, cm, rdata) {
                                //合并单元格
                                return 'id=\'tax' + rowId + "\'";
                            }
                        },
                        { name: 'total', index: 'total', width: 120, formatter: 'number', align: 'right',
                            cellattr: function(rowId, tv, rawObject, cm, rdata) {
                                //合并单元格
                                return 'id=\'total' + rowId + "\'";
                            }
                        },
                        { name: 'closed', index: 'closed', width: 110, align: 'center', formatter: 'checkbox',
                            edittype: 'checkbox', editoptions: { value: 'Yes:No', defaultValue: 'Yes' }
                        },
                        { name: 'ship_via', index: 'ship_via', width: 120, align: 'center', formatter: 'select',
                            edittype: 'select', editoptions: { value: 'FE:FedEx;TN:TNT;IN:Intim', defaultValue: 'Intime' },
                            //①给当前想合并的单元格设置id
                            cellattr: function(rowId, tv, rawObject, cm, rdata) {
                                return 'id=\'ship_via' + rowId + "\'";
                            }
                        },
                        { name: 'note', index: 'note', width: 100, sortable: false }
                    ],
                    rowNum: 15,
                    rowList: [10, 15, 20, 30],
                    pager: '#pager',
                    gridview: true,
                    rownumbers: true,
                    sortname: 'invdate',
                    viewrecords: true,
                    sortorder: 'desc',
                    caption: 'Just simple local grid',
                    height: '100%',
                    gridComplete: function() {
                        //②在gridComplete调用合并方法
                        var gridName = "list";
                        Merger(gridName, 'amount');
                        Merger(gridName, 'tax');
                        Merger(gridName, 'total');
                        Merger(gridName, 'name');
                        Merger(gridName, 'ship_via');
                    }
     
                });
     
                //公共调用方法
                function Merger(gridName, CellName) {
                    //得到显示到界面的id集合
                    var mya = $("#" + gridName + "").getDataIDs();
                    //当前显示多少条
                    var length = mya.length;
                    for (var i = 0; i < length; i++) {
                        //从上到下获取一条信息
                        var before = $("#" + gridName + "").jqGrid('getRowData', mya[i]);
                        //定义合并行数
                        var rowSpanTaxCount = 1;
                        for (j = i + 1; j <= length; j++) {
                            //和上边的信息对比 如果值一样就合并行数+1 然后设置rowspan 让当前单元格隐藏
                            var end = $("#" + gridName + "").jqGrid('getRowData', mya[j]);
                            if (before[CellName] == end[CellName]) {
                                rowSpanTaxCount++;
                                $("#" + gridName + "").setCell(mya[j], CellName, '', { display: 'none' });
                            } else {
                                rowSpanTaxCount = 1;
                                break;
                            }
                            $("#" + CellName + "" + mya[i] + "").attr("rowspan", rowSpanTaxCount);
                        }
                    }
                }
            });
            
            
            //]]>
     
        </script>
     
    </head>
    <body>
        <table id="list">
            <tr>
                <td />
            </tr>
        </table>
        <div id="pager">
        </div>
    </body>
    </html>
    
    展开全文
  • JqGridjqGrid动态合并列

    千次阅读 2016-11-28 11:39:40
    代码如下: [html] view plain copy 在CODE上查看代码片派生到我的代码片 $("#cbhzList").jqGrid({ url: "${pageContext.request.contextPath}/cbfx/getCbhzList.do", datatype: "json",
  • JqGrid合并列

    2019-09-30 07:17:40
    JqGrid合并列,一中同值的多个单元格合并成1格 //JgGrid合并列 Merger:function(curGrid, CellName) { //得到显示到界面的id集合 var mya = curGrid.getDataIDs(); //当前显示多少条 ...
  • 在开发过程中遇到一个需求,根据供应商合并证照到期提醒天数,感觉还不错,所以就分享给大家
  • jqgrid实现表头合并功能

    千次阅读 2019-09-09 21:03:23
    在使用jqgrid的过程中,难免要用到表头合并的功能,下面为大家提供一个简单的操作方式。 首先,jqgrid列表的使用与之前的无二。 $("#jqGrid").jqGrid({ url: baseURL + 'user/list', datatype: "json", colModel:...
  • jqGrid动态合并列

    2015-04-14 10:02:00
    $("#cbhzList").jqGrid({ url: "${pageContext.request.contextPath}/cbfx/getCbhzList.do", datatype: "json", mtype: 'GET', colName...
  • jqgrid合并单元格.rar

    2020-04-07 20:06:22
    完美实现jqgrid合并单元格,可实现合并行、合并列,具体使用方法有注释说明。
  • BUG的表现形式是当前合并属性mergeRow设为true后,当前列相同数据行无法合并,只会影响前一行属性。 merge属性:当前重复属性是否可合并,默认为false,设置为true设置合并 sorttype属性:定义排序的方式,...
  • jqGrid合并单元格

    2018-06-23 18:56:15
    "../js/jqGrid/ui.jqgrid.css" /> <!-- 在 jqgrid/css/css 这个目录下还有其他的主题包,可以尝试更换看效果 --> < link rel= "stylesheet" href= "../js/jqGrid/jquery-ui-1.8.16.custom.css" /> <!-- ...
  • 合并单元格代码示例   表头列合并代码示例 效果图
  • jqGrid 合并值相同的多行 jeesite function setRowSpan () { var obj = $("#dataGrid"); var rowIds = obj.getDataIDs(); var count = 0;//要合并的单元格数 var index = 0; //起始行数 var rowData = obj...
  • 1、设置colModel属性,增加cellattr cellattr = function ...2、列表加载完成后调用合并单元格方法 // 设置需要合并的单元格 let mergeColumnList = ['areaName', 'areaId', 'siteName', 'siteId']; gridCompl
  • jqgrid 有的需求某 上下行相同的数据进行合并 1: 先在表里面定义一下这个字段得ID { name: ‘name’, index: ‘name’, width: 120, label: ‘局房’, align: “center”, cellattr: function (rowId, tv, ...
  • JqGrid合并单元格的效率问题解决 大部分的代码方式 function MergerRowspan(gridName, CellName) { //得到显示到界面的id集合 var mya = $("#" + gridName + “”).getDataIDs(); //当前显示多少条 var length = mya...
  • jqGrid合并表头

    2020-07-27 14:00:00
    jqGrid是一款常用的制表软件,最近开发刚好用到。记录一下常用功能留着以后查找顺便发扬一下开源精神。 二级表头是一种经常会... useColSpanStyle : true ,//没有表头的是否与表头所在行的空单元格合并 groupHeader
  • JqGrid标题合并

    千次阅读 2016-07-19 09:36:30
    jQuery("#tab2list").jqGrid('setGroupHeaders', {  useColSpanStyle: true,  groupHeaders:[  {startColumnName: 'gNoteUploadedName', numberOfColumns:4, titleText: '发票数据'}  ]   });
  • jqgrid单元格合并

    2018-04-07 15:08:00
    http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.0.0/js/jquery.jqGrid.src.js " ></script> --%> " text/javascript " > // <![CDATA[ $(document).ready(function() { var mydata = [ { id...
  • 滑动时此冻结设置 } View Code // 初始化所有grid function initAllGrid(){ var colModel = [{label:'省(区、市)',name:'provice',index:'provice', width:90,align:"center",frozen: ...
  • JqGrid纵向合并单元格

    2019-05-26 16:25:00
    在项目开发中,前端页面经常会遇到一些表格数据需要合并单元格的操作,尤其是各类统计报表,下面我就介绍一种单元格纵向合并的方法: 举个栗子: 姓名 工作时间 工作内容 张三 ...
  • 1、参考jqgrid官方的事件和方法http://www.trirand.com/jqgridwik ... %5B%5D=gridcompletehttp://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods 2、Demo如下: 代码看下面: 3.在项目中的应用 ...
  • 使用jqgrid过程中、遇到窗体大小改变后、需要重新渲染表头及数据、我注册了一个窗体大小改变的监听事件、在里面重新设置列表的宽度和高度、最关键的一步:销毁合并表头内容、再次设置表头合并、该事件完整代码如下...
  • //固定表头合并 var groupHeaders = [ { startColumnName: 'Qty', numberOfColumns: 3, titleText: ' 所有仓库' } ]; //动态表头 if (1 == 1) { groupHeaders.push({ startColumnName: 'SHQty', numberOfColumns:...

空空如也

空空如也

1 2 3 4 5 ... 19
收藏数 371
精华内容 148
关键字:

jqgrid列合并