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

/*

*  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) {

returnthis.each(function() {

varindexs = eval("(["+ colIndexs +"])");

for(vari = 0; i 

varcolIdx = indexs[i];

varthat;

$('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；

*/

vartuiJqgridColSpanInit_kkccddqq =false;

jQuery.fn.tuiJqgridColSpan = function(options) {

options = $.extend({}, { cols: null}, options);

if(tuiJqgridColSpanInit_kkccddqq) {

return;

}

// 验证参数

if(options.cols ==null|| options.cols.length == 0) {

alert("cols参数必须设置");

return;

}

// 传入的列参数必须是顺序列，由小到大排列，如3,4,5

varerror =false;

for(vari = 0; i 

varcolIndexs = eval("(["+ options.cols[i].indexes +"])");

for(varj = 0; 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的表头进行改造

varresizing =false,

currentMoveObj, startX = 0;

vartableId = $(this).attr("id");

// thead

varjqHead = $("table[aria-labelledby='gbox_"+ tableId +"']");

varjqDiv = $("div#gbox_"+ tableId);

varoldTr = $("thead tr", jqHead);

varoldThs = $("thead tr:first th", jqHead);

// 在原来的th上下分别增加一行，下面这行克隆，上面这行增加且height=0

varftr = $("

").css("height","auto").addClass("ui-jqgrid-labels").attr("role","rowheader").insertBefore(oldTr);

varntr = $("

").addClass("ui-jqgrid-labels").attr("role","rowheader").insertAfter(oldTr);

oldThs.each(function(index) {

varcth = $(this);

varcH = cth.css("height"), cW = cth.css("width"),

nth = $("

").css("height", cH),

fth = $("

").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);

// 这里增加一个事件，解决列的拖动

varres = cth.children("span.ui-jqgrid-resize");

res && res.bind("mousedown",function(e) {

currentMoveObj = $(this);

startX = getEventPos(e).x;

resizing = true;

document.onselectstart = newFunction("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(vari = 0; i 

varcolIndexs = eval("(["+ options.cols[i].indexes +"])");

varcolTitle = options.cols[i].title;

varisrowSpan =false;

for(varj = 0; 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) {

vardiv = oldThs.eq(colIndexs[j]).find("div.ui-jqgrid-sortable");

vardivCld = 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);

}

});

varjqBody = $(this);

// 绑定拖动事件

$(document).bind("mouseup",function(e) {

varret =true;

if(resizing) {

varparentTh = currentMoveObj.parent();

varcurrentIndex = parentTh.parents("tr").find("th").index(parentTh);

varwidth, diff;

vartbodyTd = $("tbody tr td", jqBody);

varcurrentTh = $("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"));

}

varlastWidth = diff + width;

currentTh.css("width", lastWidth +"px");

resizing = false;

ret = false;

}

document.onselectstart = newFunction("return true");

returnret;

});

// 设置为已初始化

tuiJqgridColSpanInit_kkccddqq = true;

// 适应不同浏览器获取鼠标坐标

getEvent = function(evt) {

evt = window.event || evt;

if(!evt) {

varfun = getEvent.caller;

while(fun !=null) {

evt = fun.arguments[0];

if(evt && evt.constructor == Event)

break;

fun = fun.caller;

}

}

returnevt;

}

getAbsPos = function(pTarget) {

varx_ = 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;

} elseif(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{

returngetAbsPos(evt.target);

}

return{ x: _x, y: _y };

}

};