公用的方法:
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 };
}
};
原文地址: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 数据,不要测试上面的代码,但代码显示了您可以如何构建基于从服务器返回的原始数据的新数据。