用于固定grid的表头,竖向滚动条,如图:
var str = '<style>.wrapper{width:960px;margin:20px auto}.clear{clear:both}.gridView{width:100%;clear:both;margin:10px 0;border:medium none!important;border-collapse:collapse}.gridView tr td{vertical-align:top}.gridView thead tr,.footer{font:bold 11px Arial;vertical-align:middle;text-decoration:none;text-align:center}.gridView thead tr{color:#333;background:#fff;vertical-align:middle;height:25px}.gridView thead tr th{border-top:1px solid #e2e6e6;border-bottom:3px solid #e5e5e5;vertical-align:middle}.gridView thead tr a{font:bold 11px Arial,Verdana;color:#333;padding:0 0 0 10px;text-decoration:underline;vertical-align:middle}.gridView thead tr a:hover{color:#06c}.footer{height:20px;width:auto;margin:0 auto;text-align:center;padding:5px}.footer a,.footer span{color:#555;padding:2px 6px 2px 6px;border:1px solid #bcbcbc;text-decoration:none}.footer a:hover{color:#c40b17;background-color:#fff;background-image:none;border:1px solid #890812}.footer span{color:#fff;border:1px solid #890812}.grid,.gridAlternada,.gridDestacada{font:11px Arial,Verdana;text-align:left;text-align:center;vertical-align:middle}.grid:hover,.gridAlternada:hover,.gridDestacada:hover{color:#000}.grid{background-color:#fff}.gridAlternada{background-color:#eee}.gridDestacada{background-color:#ffe082;color:#333}.grid a,.gridAlternada a,.gridDestacada a{color:#384249;text-decoration:none}.grid a:hover,.gridAlternada a:hover,.gridDestacada a:hover{color:#000;text-decoration:underline}</style>'
$('body',me.container).append(str);
(function ($) {
var TABLE_ID = 0;
$.fn.freezeHeader = function (params) {
var copiedHeader = false;
function freezeHeader(elem) {
var idObj = elem.attr('id') || ('tbl-' + (++TABLE_ID));
if (elem.length > 0 && elem[0].tagName.toLowerCase() == "table") {
var obj = {
id: idObj,
grid: elem,
container: null,
header: null,
divScroll: null,
openDivScroll: null,
closeDivScroll: null,
scroller: null
};
if (params && params.height !== undefined) {
obj.divScroll = '<div id="hdScroll' + obj.id + '" style="height: ' + params.height + '; overflow-y: scroll">';
obj.closeDivScroll = '</div>';
}
obj.header = obj.grid.find('thead');
if (params && params.height !== undefined) {
if ($('#hdScroll' + obj.id).length == 0) {
obj.grid.wrapAll(obj.divScroll);
}
}
obj.scroller = params && params.height !== undefined
? $('#hdScroll' + obj.id)
: $(window);
if (params && params.scrollListenerEl !== undefined) {
obj.scroller = params.scrollListenerEl;
}
obj.scroller.on('scroll', function () {
if ($('#hd' + obj.id).length == 0) {
obj.grid.before('<div id="hd' + obj.id + '"></div>');
}
obj.container = $('#hd' + obj.id);
if (obj.header.offset() != null) {
if (limiteAlcancado(obj, params)) {
if (!copiedHeader) {
cloneHeaderRow(obj);
$("#cloneHead").parent().addClass("cloneWrap").removeClass("tm-extgrid");
$("#initHead").parent().addClass("initWrap");
$("#initHead").appendTo(".cloneWrap");
$("#cloneHead").appendTo(".initWrap");
copiedHeader = true;
}
}
else {
if (($(document).scrollTop() > obj.header.offset().top)) {
obj.container.css("position", "absolute");
obj.container.css("top", (obj.grid.find("tr:last").offset().top - obj.header.height()) + "px");
//obj.container.css("top", "0px");
}
else {
obj.container.css("visibility", "hidden");
obj.container.css("top", "0px");
obj.container.width(0);
}
copiedHeader = false;
}
}
});
}
}
function limiteAlcancado(obj, params) {
if (params && (params.height !== undefined || params.scrollListenerEl !== undefined)) {
return (obj.header.offset().top <= obj.scroller.offset().top);
}
else {
return ($(document).scrollTop() > obj.header.offset().top && $(document).scrollTop() < (obj.grid.height() - obj.header.height() - obj.grid.find("tr:last").height()) + obj.header.offset().top);
}
}
function cloneHeaderRow(obj) {
obj.container.html('');
obj.container.val('');
var tabela = $('<table style="margin: 0 0;"></table>');
var atributos = obj.grid.prop("attributes");
$.each(atributos, function () {
if (this.name != "id") {
tabela.attr(this.name, this.value);
}
});
obj.header.attr("id","initHead");
tabela.append('<thead id="cloneHead">' + obj.header.html() + '</thead>');
obj.container.append(tabela);
obj.container.width(obj.header.width());
obj.container.height(obj.header.height);
obj.container.find('th').each(function (index) {
if(index==0||index==1){
$(this).css('width', '24px');
}else{
var cellWidth = obj.grid.find('th').eq(index).width();
$(this).css('width', cellWidth);
}
});
obj.container.css("z-index", "99");
obj.container.css("visibility", "visible");
if (params && params.height !== undefined) {
if(params.offset !== undefined){
obj.container.css("top", obj.scroller.offset().top + (params.offset.replace("px","") * 1) + "px");
}
else
{
//obj.container.css("top", obj.scroller.offset().top + "px");
}
obj.container.css("position", "absolute");
} else if (params && params.scrollListenerEl!== undefined) {
obj.container.css("top", obj.scroller.find("thead > tr").innerHeight() + "px");
obj.container.css("position", "absolute");
obj.container.css("z-index", "2");
} else if (params && params.offset !== undefined) {
obj.container.css("top", params.offset);
obj.container.css("position", "fixed");
} else {
obj.container.css("top", "0px");
obj.container.css("position", "fixed");
}
}
return this.each(function (i, e) {
freezeHeader($(e));
});
};
})(jQuery);
使用:
$("#grid .table",me.container).freezeHeader({ 'height': '300px' });