-3
(function ($) {
// ***********************************************
//The main fixedTable function
$.fn.fixedTable = function (opts) {
//default options defined in $.fn.fixedTable.defaults - at the bottom of this file.
var options = $.extend({}, $.fn.fixedTable.defaults, opts);
var mainid = "#" + options.outerId;
var tbl = this;
var layout = buildLayout(tbl, opts);
//see the buildLayout() function below
var fixedArea = $(".fixedArea").width() - 150;
//alert($.fn.fixedTable.defaults);
//we need to set the width (in pixels) for each of the tables in the fixedContainer area
//but, we need to subtract the width of the fixedColumn area.
var w = options.width - options.fixedColumnWidth;
//sanity check
if (w <= 0) { w = options.width; }
//alert(options.width);
$(".fixedContainer", layout).width(w);
$(".fixedContainer ." + options.classHeader, layout).css({
//width: (w) + "px",
width: "100%",
"float": "left",
"overflow": "hidden"
});
$(".fixedContainer .fixedTable", layout).css({
"float": "left",
//width: (w + 8) + "px",
width: "100%",
"overflow": "auto"
});
$(".fixedContainer", layout).css({
//width: w - 1,
//width: "68%",
"float": "left"
});
//adjust the main container to be just larger than the fixedTable
$(".fixedContainer ." + options.classFooter, layout).css({
width: (w) + "px",
"float": "left",
"overflow": "hidden"
});
$("." + options.classColumn + " > .fixedTable", layout).css({
"width": options.fixedColumnWidth,
"overflow": "hidden",
"border-collapse": $(tbl).css("border-collapse"),
"padding": "0"
});
$("." + options.classColumn, layout).width(options.fixedColumnWidth);
$("." + options.classColumn, layout).height(options.height);
$("." + options.classColumn + " ." + options.classHeader + " table tbody tr td", layout).width(options.fixedColumnWidth);
$("." + options.classColumn + " ." + options.classFooter + " table tbody tr td", layout).width(options.fixedColumnWidth);
//adjust the table widths in the fixedContainer area
var fh = $(".fixedContainer > ." + options.classHeader + " > table", layout);
var ft = $(".fixedContainer > .fixedTable > table", layout);
var ff = $(".fixedContainer > ." + options.classFooter + " > table", layout);
var maxWidth = fh.width();
if (ft.length > 0 && ft.width() > maxWidth) { maxWidth = ft.width(); }
if (ff.length > 0 && ff.width() > maxWidth) { maxWidth = ff.width(); }
if (fh.length) { fh.width(maxWidth); }
if (ft.length) { ft.width(maxWidth); }
if (ff.length) { ff.width(maxWidth); }
//adjust the widths of the fixedColumn header/footer to match the fixed columns themselves
$("." + options.classColumn + " > ." + options.classHeader + " > table > tbody > tr:first > td", layout).each(function (pos) {
var tblCell = $("." + options.classColumn + " > .fixedTable > table > tbody > tr:first > td:eq(" + pos + ")", layout);
var tblFoot = $("." + options.classColumn + " > ." + options.classFooter + " > table > tbody > tr:first > td:eq(" + pos + ")", layout);
var maxWidth = $(this).width();
if (tblCell.width() > maxWidth) { maxWidth = tblCell.width(); }
if (tblFoot.length && tblFoot.width() > maxWidth) { maxWidth = tblFoot.width(); }
$(this).width(maxWidth);
$(tblCell).width(maxWidth);
if (tblFoot.length) { $(tblFoot).width(maxWidth); }
});
//set the height of the table area, minus the heights of the header/footer.
// note: we need to do this after the other adjustments, otherwise these changes would be overwrote
var h = options.height - parseInt($(".fixedContainer > ." + options.classHeader, layout).height()) - parseInt($(".fixedContainer > ." + options.classFooter, layout).height());
var diff = $(".fixedArea").width() - options.fixedColumnWidth - w;
var diffadd = $(".fixedContainer").width() + diff;
$(".fixedContainer", layout).css("width", diffadd);
// Fix Hight:Left and right Header table
var leftTable = $(".fixedColumn .fixedHead table").height();
var rightTable = $("#fixeddiv .fixedHead table").height();
$(".fixedColumn .fixedHead table").height(rightTable);
$("#fixeddiv .fixedHead table").height(rightTable);
//sanity check
if (h < 0) { h = options.height; }
$(".fixedContainer > .fixedTable", layout).height(h);
$("." + options.classColumn + " > .fixedTable", layout).height(h);
//Adjust the fixed column area if we have a horizontal scrollbar on the main table
// - specifically, make sure our fixedTable area matches the main table area minus the scrollbar height,
// and the fixed column footer area lines up with the main footer area (shift down by the scrollbar height)
var tblWidth = $("#Open_Text_General").width();
if (diffadd >= tblWidth) {
var h = $(".fixedContainer > .fixedTable", layout)[0].offsetHeight;
} else {
var h = $(".fixedContainer > .fixedTable", layout)[0].offsetHeight - 17;
}
$("." + options.classColumn + " > .fixedTable", layout).height(h); //make sure the row area of the fixed column matches the height of the main table, with the scrollbar
// Apply the scroll handlers
//$(".fixedContainer > .fixedTable", layout).scroll(function() {
//handleScroll(mainid, options);
//});
//the handleScroll() method is defined near the bottom of this file.
//$.fn.fixedTable.adjustSizes(mainid);
adjustSizes(options);
return tbl;
}
//function to support scrolling of title and first column
fnScroll = function() {
$('#divHeader').scrollLeft($('#table_div').scrollLeft());
$('#firstcol').scrollTop($('#table_div').scrollTop());
}
function buildLayout(src, options) {
//create a working area and add it just after our table.
//The table will be moved into this working area
var area = $("<div class=\"fixedArea\" style=\"float: left;width:100%;\"></div>").appendTo($(src).parent());
//fixed column items
var fc = $("<div class=\"" + options.classColumn + "\" style=\"float: left;\"></div>").appendTo(area);
var fch = $("<div class=\"" + options.classHeader + "\"></div>").appendTo(fc);
var fct = $("<div class=\"fixedTable\" id=\"firstcol\"></div>").appendTo(fc);
var fcf = $("<div class=\"" + options.classFooter + "\"></div>").appendTo(fc);
//fixed container items
var fcn = $("<div class=\"fixedContainer\" id=\"fixeddiv\"></div>").appendTo(area);
var fcnh = $("<div class=\"" + options.classHeader + "\" id=\"divHeader\"></div>").appendTo(fcn);
var fcnt = $("<div class=\"fixedTable\" id=\"table_div\" style=\"position: relative; overflow: scroll\" onscroll=\"fnScroll()\"></div>").appendTo(fcn);
var fcnf = $("<div class=\"" + options.classFooter + "\"></div>").appendTo(fcn);
//create the fixed column area
if (options.fixedColumns > 0 && !isNaN(options.fixedColumns)) {
buildFixedColumns(src, "thead", options.fixedColumns, fch);
buildFixedColumns(src, "tbody", options.fixedColumns, fct);
buildFixedColumns(src, "tfoot", options.fixedColumns, fcf);
//see the buildFixedColumns() function below
}
//Build header/footer areas
buildFixedTable(src, "thead", fcnh);
buildFixedTable(src, "tfoot", fcnf);
//see the buildFixedTable() function below
//Build the main table
//we'll cheat here - the src table should only be a tbody section, with the remaining columns,
//so we'll just add it to the fixedContainer table area.
fcnt.append(src);
return area;
}
/* ******************************************************************** */
// duplicate a table section (thead, tfoot, tbody), but only for the desired number of columns
function buildFixedColumns(src, section, cols, target) {
//TFOOT - get the needed columns from the table footer
if ($(section, src).length) {
var colHead = $("<table width=\"100%\" cellpadding=\"3\" cellspacing=\"0\" border=\"0\" class=\"leftcol\"></table>").appendTo(target);
//If we have a thead or tfoot, we're looking for "TH" elements, otherwise we're looking for "TD" elements
var cellType = "td"; //deafault cell type
if (section.toLowerCase() == "thead" || section.toLowerCase() == "tfoot") { cellType = "th"; }
//check each of the rows in the thead
$(section + " tr", src).each(function() {
var tr = $("<tr></tr>").appendTo(colHead);
$(cellType + ":lt(" + cols + ")", this).each(function() {
$("<td>" + $(this).html() + "</td>").addClass(this.className).attr("id", this.id).appendTo(tr);
//Note, we copy the class names and ID from the original table cells in case there is any processing on them.
//However, if the class does anything with regards to the cell size or position, it could mess up the layout.
//Remove the item from our src table.
$(this).remove();
});
});
}
}
/* ******************************************************************** */
// duplicate a table section (thead, tfoot, tbody)
function buildFixedTable(src, section, target) {
if ($(section, src).length) {
var th = $("<table width=\"100%\" id=\"addcols\" cellpadding=\"3\" cellspacing=\"0\" border=\"0\" align=\"left\" class=\"\"></table>").appendTo(target);
var tr = null;
//If we have a thead or tfoot, we're looking for "TH" elements, otherwise we're looking for "TD" elements
var cellType = "td"; //deafault cell type
if (section.toLowerCase() == "thead" || section.toLowerCase() == "tfoot") { cellType = "th"; }
$(section + " tr", src).each(function() {
var tr = $("<tr></tr>").appendTo(th);
$(cellType, this).each(function() {
$("<td class=\'header\'>" + $(this).html() + "</td>").appendTo(tr);
});
});
//The header *should* be added to our head area now, so we can remove the table header
$(section, src).remove();
}
}
// ***********************************************
// Handle the scroll events
function handleScroll(mainid, options) {
//Find the scrolling offsets
var tblarea = $(mainid + " .fixedContainer > .fixedTable");
var x = tblarea[0].scrollLeft;
var y = tblarea[0].scrollTop;
$(mainid + " ." + options.classColumn + " > .fixedTable")[0].scrollTop = y;
$(mainid + " .fixedContainer > ." + options.classHeader)[0].scrollLeft = x;
$(mainid + " .fixedContainer > ." + options.classFooter)[0].scrollLeft = x;
}
// ***********************************************
// Reset the heights of the rows in our fixedColumn area
function adjustSizes(options) {
var Id = options.outerId;
var maintbheight = options.height;
var backcolor = options.Contentbackcolor;
var hovercolor = options.Contenthovercolor;
var fixedColumnbackcolor = options.fixedColumnbackcolor;
var fixedColumnhovercolor = options.fixedColumnhovercolor;
// row height
$("#" + Id + " ." + options.classColumn + " .fixedTable table tbody tr").each(function (i) {
var maxh = 0;
var fixedh = $(this).height();
var contenth = $("#" + Id + " .fixedContainer .fixedTable table tbody tr").eq(i).height();
if (contenth > fixedh) {
maxh = contenth;
}
else {
maxh = fixedh;
}
//$(this).height(contenth);
$(this).children("td").height(maxh);
$("#" + Id + " .fixedContainer .fixedTable table tbody tr").eq(i).children("td").height(maxh);
});
//adjust the cell widths so the header/footer and table cells line up
var ccount = $("#" + Id + " .fixedContainer ." + options.classHeader + " table tr:first td").size();
var widthArray = new Array();
var totall = 0;
$("#" + Id + " .fixedContainer ." + options.classHeader + " table tr:first td").each(function (pos) {
var cwidth = $(this).width();
$("#" + Id + " .fixedContainer .fixedTable table tbody td").each(function (i) {
if (i % ccount == pos) {
if ($(this).width() > cwidth) {
cwidth = $(this).width();
}
}
});
widthArray[pos] = cwidth;
totall += (cwidth + 2);
});
var contentH = $("#" + Id + " .fixedContainer .fixedTable table").height();
var addwidth = widthArray.length;
var ww = addwidth * 3 + addwidth;
if (contentH > 610) {
if ($.browser.msie && $.browser.version.substr(0, 1) > 7) {
var newwidth = $("#fixeddiv").width() - (17 + ww);
} else {
var newwidth = $("#fixeddiv").width() - 17;
}
} else {
var newwidth = $("#fixeddiv").width();
}
//More column added
$("#" + Id + " .fixedContainer ." + options.classHeader + " table").width(newwidth);
$("#" + Id + " .fixedContainer .fixedTable table").width(newwidth);
var widthTdArray = new Array();
for (i = 0; i < widthArray.length; i++) {
var headtdWd = $(this).width();
$("#" + Id + " .fixedContainer ." + options.classHeader + " table tr td").each(function (j) {
if (j % ccount == i) { headtdWd = $(this).width(); }
}); // Get Header Section width value
widthTdArray[i] = headtdWd;
}
for (i = 0; i < widthArray.length; i++) {
$("#" + Id + " .fixedContainer ." + options.classHeader + " table tr:last td").each(function (j) {
if (j % ccount == i) { // Fix width for Header section
$(this).css("width", widthTdArray[i] + "px");
$(this).css("min-width", widthTdArray[i] + "px");
$("#addcols table tr:last td span").css("width", widthTdArray[i] + "px");
if ($.browser.msie && $.browser.version.substr(0, 1) > 7) {
$("#fixeddiv table tr td span").css("width", (widthTdArray[i] - 3) + "px");
} else {
$("#fixeddiv table tr td span").css("min-width", widthTdArray[i] + "px");
}
//if ($.browser.msie && $.browser.version.substr(0,1) > 7 || $.browser.mozilla){
// $("#addcols table tr:last td span").css("min-width", widthTdArray[i] + "px");
//}
}
});
$("#" + Id + " .fixedContainer .fixedTable table tr:nth-child(3) td").each(function (j) {
if (j % ccount == i) { // Fix width for Content section
$(this).css("width", widthTdArray[i] + "px");
$(this).css("min-width", widthTdArray[i] + "px");
$("#fixeddiv table tr td span").css("width", widthTdArray[i] + "px");
if ($.browser.msie && $.browser.version.substr(0, 1) > 7) {
$("#fixeddiv table tr td span").css("width", (widthTdArray[i] - 3) + "px");
} else {
$("#fixeddiv table tr td span").css("min-width", widthTdArray[i] + "px");
}
//if ($.browser.msie && $.browser.version.substr(0,1) > 7 || $.browser.mozilla){
// $("#fixeddiv table tr td span").css("min-width", widthTdArray[i] + "px");
//}
}
});
}
if (contentH > 610) {
$("#fixeddiv .fixedHead table tr:first td:last").css("padding-left", 19);
$("#fixeddiv .fixedHead table tr:last td:last").css("padding-left", 19);
}
// mouse in/out fixedColumn's fixedtable, change background color.
$("#" + Id + " ." + options.classColumn + " .fixedTable table tr").each(function (i) {
$(this).mouseover(function() {
$(this).children("td").css({
"background-color": fixedColumnhovercolor
});
var obj = $("#" + Id + " .fixedContainer .fixedTable table tr").eq(i);
obj.children("td").css({
"background-color": hovercolor
});
obj.children("td").children("pre").css({
"background-color": hovercolor
});
});
$(this).mouseout(function() {
$(this).children("td").css({
"background-color": fixedColumnbackcolor
});
var obj = $("#" + Id + " .fixedContainer .fixedTable table tr").eq(i);
obj.children("td").css({
"background-color": backcolor
});
obj.children("td").children("pre").css({
"background-color": backcolor
});
});
});
// mouse in/out fixedContainer's fixedtable, change background color.
$("#" + Id + " .fixedContainer .fixedTable table tr").each(function (i) {
$(this).mouseover(function() {
$(this).children("td").css({
"background-color": hovercolor
});
$(this).children("td").children("pre").css({
"background-color": hovercolor
});
var obj = $("#" + Id + " ." + options.classColumn + " .fixedTable table tr").eq(i);
obj.children("td").css({
"background-color": fixedColumnhovercolor
});
});
$(this).mouseout(function() {
$(this).children("td").css({
"background-color": backcolor
});
$(this).children("td").children("pre").css({
"background-color": backcolor
});
var obj = $("#" + Id + " ." + options.classColumn + " .fixedTable table tr").eq(i);
obj.children("td").css({
"background-color": fixedColumnbackcolor
});
});
});
var contenttbH = $("#" + Id + " .fixedContainer .fixedTable table").height();
if (contenttbH < maintbheight) {
$("#" + Id + " ." + options.classColumn + " .fixedTable").height(contenttbH + 20);
$("#" + Id + " .fixedContainer .fixedTable").height(contenttbH + 20);
$("#" + Id + " .fixedContainer ." + options.classHeader).width($("#" + Id + " .fixedContainer ." + options.classHeader).width());
$("#" + Id + " .fixedContainer ." + options.classFooter).width($("#" + Id + " .fixedContainer ." + options.classHeader).width());
}
else {
//offset the footer by the height of the scrollbar so that it lines up right.
$("#" + Id + " ." + options.classColumn + " > ." + options.classFooter).css({
"position": "relative",
"top": 16
});
}
// Set .header class css style
var header_bgcolor = $(".header").css("background-color");
var color_head = $(".header").css("color");
$(".fixedHead td").css("background-color", header_bgcolor);
$(".fixedHead td").css("color", color_head);
$(".fixedHead a").css("color", color_head);
}
window.onunload = null;
})(jQuery);
在执行上面的脚本我得到错误的IE“停止此脚本” 6 & IE 7，行无287 for循环创建这个错误，我认为，请建议我所以我可以修复这个问题for循环给停止脚本错误在IE
* 任何人都可以帮我解决这个问题吗？ *
NOPE>对不起。我们阅读代码。不是代码的墙。告诉确切的问题在哪里。 – 2011-06-06 11:11:34
我不确定更糟糕的是，发布超过400行代码，没有任何解释，并希望人们解决您认为*的问题，或者不包括标记。不，事实上这不是一场比赛，而是前者。 – davin 2011-06-06 11:18:41
你的问题是你在jQuery中过多使用类选择器。重新指定您的选择器，理想情况下通过ID或标记名称。 – 2011-09-12 12:46:20