1. 程式人生 > >jquery 合併相鄰且內容相同單元格

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>  


有以下參考:

/*
*  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-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

我想要合併某些資料 (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_2address_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 資料,不要測試上面的程式碼,但程式碼顯示了您可以如何構建基於從伺服器返回的原始資料的新資料。