jquery 合併相鄰且內容相同單元格

公用的方法:

   1. //合併內容相同單元格  
   2. function mergeTableCell(table_id, table_colnum) {  
   3.     _w_table_firsttd = "";  
   4.     _w_table_currenttd = "";  
   5.     _w_table_SpanNum = 0;  
   6.     _w_table_Obj = $("#" + table_id + " tr td:nth-child(" + table_colnum + ")");  
   7.     _w_table_Obj.each(function(i) {  
   8.         if (i == 0) {  
   9.             _w_table_firsttd = $(this);  
  10.             _w_table_SpanNum = 1;  
  11.         } else {  
  12.             _w_table_currenttd = $(this);  
  13.             if (_w_table_firsttd.text() == _w_table_currenttd.text()) {  
  14.                 _w_table_SpanNum++;  
  15.                 _w_table_currenttd.hide();  
  16.                 _w_table_firsttd.attr("rowSpan", _w_table_SpanNum);  
  17.             } else {  
  18.                 _w_table_firsttd = $(this);  
  19.                 _w_table_SpanNum = 1;  
  20.             }  
  21.         }  
  22.     });  
  23. }  

 

使用方法:

在jsp頁面中調用如下代碼段:

# <script type="text/javascript">  
# /第一個參數代表table的ID,第二個參數表示要合併的列,從1開始  
#                      mergeTableCell("powergrid",1);  
# lt;/script>

 

合併列的公用方法:

function mergeTableRow(id,row,hide){

  var tds=$("#"+id).find("tr").eq(row-1).children();

  var first=null;

  var colspan=-1;

  var current=null;

  tds.each(function(i){

    if(i==0){

      first=$(this);

      colspan=1;

    }else{

      current=$(this);

      if(first.text()==current.text()){

      colspan++;

      if(hide)

       current.hide();

      else

       current.remove();

      first.attr("colspan",colspan);

      }else{

        first=$(this);

        colspan=1;

      }

    }

  })

}

使用方法:

在body中調用如下方法:

   1. <script type="text/javascript">   
   2.   try  
   3.   {  
   4.       mergeTableRow("summaryTable",2,false);  
   5.       mergeTableRow("summaryTable",1,false);  
   6.       
   7.       var len=800+300*(${fn:length(taskItemList)}*1);  
   8.       $("#summaryTable").css("width",len+"px");  
   9.   }  
  10.   catch(e)  
  11.   {  
  12.   }    
  13. </script>  

有以下參考：

http://blog.csdn.net/caojin723/article/details/3875949

原貼：http://blog.csdn.net/SaRoot/archive/2010/09/30/5916120.aspx

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

 

 

解決jqgrid中rowspan

原文地址：http://keko-boy-163-com.iteye.com/blog/1139423

# //jqGrid-ttable-rowspan  
# ////////////////////////////////////////////////////////////////////////////////////////////////////////////////  
# /*用法 
# * $("#tableId").jqGridTableRowSpan("13,14,15");//要合併的列序號,散列形式 
# * 僅僅只適用於jqGrid 
# *  
# *  
#  * */  
# jQuery.fn.jqGridTableRowSpan = function(colIndexs) {    
#      return this.each(function() {    
#       var indexs = eval("([" + colIndexs + "])");    
#  for (var i = 0; i < indexs.length; i++) {    
#                                      var colIdx = indexs[i];   
#                                         var that=new Array();  
#                                         var firstrowspan=0;  
#     $('tbody tr', this).each(function(row) {  
#     for(var k=0;k<colIdx.length;k++){  
#  $('td:eq(' + colIdx[k] + ')', this).filter(':visible').each(  
#       function(col) {   
#     if (that[k] != null && $(this).html() == $(that[k]).html()) {   
#     rowspan = $(that[k]).attr("rowSpan");   
#      if (rowspan == undefined) {    
#         $(that[k]).attr("rowSpan", 1);    
#          rowspan = $(that[k]).attr("rowSpan");    
#                                      }  
#     rowspan = Number(rowspan) + 1;  
#       if(k==0){  
#      $(that[k]).attr("rowSpan", rowspan);   
#                      $(this).hide();                                     
# firstrowspan=rowspan;  
#   }  
#      if(k!=0&&rowspan<=firstrowspan){  
#      $(that[k]).attr("rowSpan", rowspan);      
#     $(this).hide();   }  
#      } else {  
#      if(k==0){  
# //if it is the first of the group then set others null ,  
#      that=new Array();  
#      that[0]=this;  
#      }else{  
#        that[k] = this;  
#          }  
#       }    
#                });    
#      }      
#  });   
#   }      });    
#      };  

 

JSON 數據和顯示多個列合併爲單個列的 jqGrid

原文地址：http://d2100.com/questions/29375

我想要合併某些數據 （3 到 1 列的地址列） 的我檢索通過融合表從 JSONP 到 jqGrid。

誰知道這是否可能如何去做？不幸的是融合表 SQL API 目前不支持 CONCAT 通過選擇命令。

奧列格 · 提供的代碼基本上 colspan ing 2 列如果一個有長時間的數據，但我真的希望能多個列中的數據，目前它只是一個jqGrid 中的列

先謝謝

編輯、 添加代碼片段：

datatype: "jsonp", // "json" or "jsonp"
colNames: ["id","lat","long","Name","Address","","","Postcode"],
colModel:[
    {name:'id',index:'id',key:true,sorttype:'int',hidden:true,sortable:true},
    {name:'latitude',index:'latitude',hidden:true},
    {name:'longitude',index:'longitude',hidden:true},
    {name:'name',index:'name',width:170,sortable:false,sorttype:'text'},
    {name:'address_line_1',index:'address_line_1',width:400,formatter:function (cellvalue, options, rowObject) {
        addPart1 = rowObject[4];
        addPart2 = rowObject[5];
        addPart3 = rowObject[6];
        fullAddress = addPart1 + addPart2 + addPart3;
        return fullAddress;},sortable:false,sorttype:'text'},
    {name:'address_line_2',index:'address_line_2',sortable:false,sorttype:'text',hidden:true},
    {name:'address_line_3',index:'address_line_3',sortable:false,sorttype:'text',hidden:true},
    {name:'postcode',label:'postcode',width:80,sortable:false,sorttype:'text'}      
],
jsonReader: {
    cell: "", // the same as cell: function (obj) { return obj; }
    root: "table.rows",
    page: function (obj) { return 1; },
    total: function (obj) { return 1; },
    records: function (obj) { return obj.table.rows.length; }
},

這裏是通用公共數據示例從.gov 表 （我的桌子基本上是相同的設置）。所以人們可以輕鬆地看到提問: 我將整理後的問題

<script type="text/javascript"> 
var queryText = "SELECT * FROM 185189";
jQuery(document).ready(function() {
    jQuery("#rTable").jqGrid({
        url: 'http://www.google.com/fusiontables/api/query?sql=' +
              encodeURI(queryText) + '&jsonCallback=?',
        postData: "",
        datatype: "jsonp",
        colNames: ["col1","col2","col3","col4"],
        colModel:[
            {name:'FACID',index:'FACID',key:true,sorttype:'int',sortable:true},
            {name:'FACNAME',index:'FACNAME'},
            {name:'FAC_ADDRESS1',index:'FAC_ADDRESS1',sortable:false,sorttype:'text'},
            {name:'FAC_ADDRESS2',index:'FAC_ADDRESS2',sortable:false,sorttype:'text'}
        ],
        jsonReader: {
            cell: "",
            root: "table.rows",
            page: function (obj) { return 1; },
            total: function (obj) { return 1; },
            records: function (obj) { return obj.table.rows.length; }
        },
        rowNum:10,
        rowList:[10,20,30],
        pager: '#pager2',
        sortname: 'name',
        sortorder: "asc",
        viewrecords: true,
        loadonce: true,
        height: "100%",
        multiselect: true,
        caption: ""
    }); // END CREATE GRID
    jQuery("#rTable").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false}); // paging options
});
</script>

您可以使用自定義格式化程序來構造列包含基於任何輸入的數據的行。rowObject參數表示的數據從服務器返回的行。通過自定義格式化程序返回的字符串是文本或 HTML 文本將顯示在單元格中。

如果你要執行上的問題應開機自檢與融合表使用該 URL。

更新： 您可以以不同的方式解決組成列的問題。第一個舊版本的 jqGrid 工作，只重寫 formatter 以下函數：

formatter: function (cellvalue, options, rowObject) {
    var rowObject = arguments[2];
    if ($.isArray(rowObject)) {
        return rowObject[4] + rowObject[5] + rowObject[6];
    } else {
        return rowObject.address_line_1 +
            rowObject.address_line_2 +
            rowObject.address_line_3;
    }
}

 

小方式的缺點是你將會有不必要的隱藏列 address_line_2 和 address_line_3 ，你不會真的使用。

更優雅的解決方案將使用新 beforeProcessing 回調函數 （事件） （見我原本的建議，該功能在這裏）。唯一的情況下將數據從服務器加載，將調用該函數。它允許您修改從 jqGrid 數據將被處理之前，服務器返回的數據。在此案中可以事件使用默認值 jsonReader ：

colNames: ["lat", "long", "Name", "Address", "Postcode"],
colModel:[
    {name: 'latitude', hidden: true},
    {name: 'longitude', hidden: true},
    {name: 'name', width: 170},
    {name: 'address_line', width: 400},
    {name: 'postcode', width: 80}
],
cmTemplate: { sortable: false },
beforeProcessing: function (data) {
    var rows = data.table.rows, length = rows.length, i = 0, row;
    data.page = 1;
    data.total = 1;
    data.records = length;
    data.rows = [];
    for (; i < length; i += 1) {
        row = rows[i];
        data.rows.push({
            id: row[0],
            cell: [row[1], row[2], row[3], row[4] + row[5] + row[6], row[7]]
        });
    }
    delete data.table;
}

我不具有原始 JSON 數據，不要測試上面的代碼，但代碼顯示了您可以如何構建基於從服務器返回的原始數據的新數據。