日期:2014-05-16  浏览次数:20402 次

通过js控制表格第一行不动以及表格全屏显示
fixTable.js
------------
function FixTable() {
var that = this;
/// <summary>
///     锁定表头和列
///     <para> sorex.cnblogs.com </para>
/// </summary>
/// <param name="TableID" type="String">
///     要锁定的Table的ID
/// </param>
/// <param name="FixColumnNumber" type="Number">
///     要锁定列的个数
/// </param>
/// <param name="width" type="Number">
///     显示的宽度
/// </param>
/// <param name="height" type="Number">
///     显示的高度
/// </param>
this.FixTable = function(TableID,FixHeadCol) {
if ($("#" + TableID + "_tableLayout").length != 0) {
$("#" + TableID + "_tableLayout").before($("#" + TableID));
$("#" + TableID + "_tableLayout").empty();
} else {
$("#" + TableID).after(
"<div id='" + TableID
+ "_tableLayout' style='overflow:hidden;height:100%; width:100%;'></div>");
}

$('<div id="' + TableID + '_tableFix"></div>' + '<div id="'
+ TableID + '_tableHead"></div>' + '<div id="'
+ TableID + '_tableColumn"></div>' + '<div id="'
+ TableID + '_tableData"></div>').appendTo(
"#" + TableID + "_tableLayout");

var oldtable = $("#" + TableID);

var tableFixClone = oldtable.clone(true);
tableFixClone.attr("id", TableID + "_tableFixClone");
$("#" + TableID + "_tableFix").append(tableFixClone);//固定头和固定列的交集区域

var tableHeadClone = oldtable.clone(true);
tableHeadClone.attr("id", TableID + "_tableHeadClone");
$("#" + TableID + "_tableHead").append(tableHeadClone);//固定头部区域
var tableColumnClone = oldtable.clone(true);
tableColumnClone.attr("id", TableID + "_tableColumnClone");
$("#" + TableID + "_tableColumn").append(tableColumnClone);//固定列区域

$("#" + TableID + "_tableData").append(oldtable);//主题数据区域

$("#" + TableID + "_tableLayout table").each(function() {
$(this).css("margin", "0");
});
var HeadHeight=0;
//alert(FixHeadCol);
if(FixHeadCol){
}else{
FixHeadCol=1;
}
//for(var j=1;j<FixHeadCol+1;j++){
//  alert($("#" + TableID + "_tableHead tr:lt(5)").html());
HeadHeight= $("#" + TableID + "_tableHead tr:lt(2)").height();
//}
//alert(HeadHeight);
HeadHeight += 2;
$("#" + TableID + "_tableHead").css("height", HeadHeight);
$("#" + TableID + "_tableFix").css("height", HeadHeight);
var ColumnsWidth = 0;
var ColumnsNumber = 0;
var ColumnsWidthList="";
$("#" + TableID + "_tableColumn [name=fixcol]")
.each(function() {
ColumnsWidth += $(this).outerWidth(false);
ColumnsNumber++;
ColumnsWidthList=ColumnsWidthList+$(this).outerWidth(false)+',';
});

ColumnsWidth += 2;

if ($.browser.msie) {
switch ($.browser.version) {
case "7.0":
if (ColumnsNumber >= 3)
ColumnsWidth--;
break;
case "8.0":
if (ColumnsNumber >= 2)
ColumnsWidth--;
break;
}
}
$("#" + TableID + "_tableColumn").css("width", ColumnsWidth);//固定列宽度,以取最后一行每列的宽度为准
$("#" + TableID + "_tableFix").css("width", ColumnsWidth);

$("#" + TableID + "_tableFix").css( {
"overflow" : "hidden",
"position" : "relative",
"z-index" : "50",
//"background-color" : "#f9e3d6",
"font-size" : "12px"
});
$("#" + TableID + "_tableHead").css( {
"overflow" : "hidden",
"width" : "100%",