html 文件:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>固定table的行和列案例</title>
<script src="http://libs.baidu.com/jquery/1.6.4/jquery.min.js"></script>
<script src="FixTable.js" type="text/javascript"></script>
<style type="text/css">
.body{
padding:0px;
margin:0px;
font-size:12px;
}
.common-table{ width:100%; color:#174b73; border-collapse:collapse;border:solid 1px #cdddf6;}
.common-table caption{padding:10px 2px;font-size:14px; text-align:center; background-color:#DFEAF0;color:#486CA3;border:solid 1px #cdddf6;font-weight:bold;border-bottom:none;}
/*.common-table th{padding:5px 2px; text-align:center; background-color:#DFEAFB;color:#486CA3;border:solid 1px #cdddf6;}*/
.common-table th{padding:5px; text-align:center;/* background-color:#DFEAFB;*/border:solid 1px #cdddf6;/*color:#3fade7;*/border-bottom: 1px solid #d0e3f1;
background: #e7f1fa;line-height:20px;}
.common-table td{background-color:#FFF;border:solid 1px #dedede;padding:5px;line-height:20px;}
.common-table tr:hover td {}
.common-table tr.alter-item td {background-color:#f9f9f9; border:solid 1px #dedede; }
.common-table tr.pager-item{border: 1px solid #dedede;border-top:1px solid #018fd9;background:#e7f1fa;}
.common-table tr.pager-item td {background:none;text-align: right;padding: 3px;border:none;}
.common-table tr.pager-item td a {margin-left:5px;}
.common-table a:link,.common-table a:active,.common-table a:visited{text-decoration:underline;}
</style>
<script type="text/javascript">
var isloadFixtable = false;
function fixTable() {
if (isloadFixtable == false) {
//横向和纵向都有滚动条
$("#fixTable").fixTable({
fixColumn: 1,//固定列数
});
//重新生成滚动条
$("#fixTable").fixTable({
fixColumn: 1,//固定列数
});
//自动求解只有横向
$("#fixTableH").fixTable({
fixColumn: 1,//固定列数
width: 700,//显示宽度
height: 350//显示高度
});
//确定只有横向
$("#fixTableH2").fixColumn({
fixColumn: 1,//固定列数
width: 700,//显示宽度
height: 350//显示高度
});
//自动求解只有纵向
$("#fixTableZ").fixTable({
fixColumn: 1,//固定列数
width:1020,//显示宽度
height: 350//显示高度
});
//确定只有纵向
$("#fixTableZ2").fixThead({
width: 1020,//显示宽度
height: 350//显示高度
});
//无滚动条
$("#fixTableW").fixTable({
fixColumn: 1,//固定列数
width: 1000,//显示宽度
height: 350//显示高度
});
isloadFixtable = true;
}
}
window.onload = function () {
if ($(window).width() > 100) {//在某些场景下获取不到table等页面元素的宽高
fixTable();
}
}
window.onresize = function () {
fixTable();
}
</script>
</head>
<body>
<h2>场景1：横向和纵向都有滚动条</h2>
<div style="width:900px;height:350px;">
<table id="fixTable" class="common-table" style="width:1000px">
<thead>
<tr>
<th>Month</th>
<th>Savings1</th>
<th>Savings2</th>
<th>Savings3</th>
<th>Savings4</th>
<th>Savings5</th>
<th>Savings6</th>
<th>Savings7</th>
</tr>
</thead>
<tbody>
<tr>
<td>January1</td>
<td>$100</td>
<td>January</td>
<td>$100</td>
<td>January</td>
<td>$100</td>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February2</td>
<td>$80</td>
<td>February换行换行换行换行换行换行换行换行换行换行换行换行换行</td>
<td>$80</td>
<td>February</td>
<td>$80</td>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February3</td>
<td>$80</td>
<td>February</td>
<td>$80</td>
<td>February</td>
<td>$80</td>
<td>January</td>
<td>$100</td>
</tr>
</tbody>
</table>
</div>
<h2>场景2：自动求解，只有横向滚动条</h2>
<div style="width:900px;height:150px;">
<table id="fixTableH" class="common-table" style="width:1000px">
<thead>
<tr>
<th>Month</th>
<th>Savings1</th>
<th>Savings2</th>
<th>Savings3</th>
<th>Savings4</th>
<th>Savings5</th>
<th>Savings6</th>
<th>Savings7</th>
</tr>
</thead>
<tbody>
<tr>
<td>January1</td>
<td>$100</td>
<td>January</td>
<td>$100</td>
<td>January</td>
<td>$100</td>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February2</td>
<td>$80</td>
<td>February换行换行换行换行换行换行换行换行换行换行换行换行换行</td>
<td>$80</td>
<td>February</td>
<td>$80</td>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February3</td>
<td>$80</td>
<td>February</td>
<td>$80</td>
<td>February</td>
<td>$80</td>
<td>January</td>
<td>$100</td>
</tr>
</tbody>
</table>
</div>
<h2>场景2：确定只有横向滚动条</h2>
<div style="width:900px;height:150px;">
<table id="fixTableH2" class="common-table" style="width:1000px">
<thead>
<tr>
<th>Month</th>
<th>Savings1</th>
<th>Savings2</th>
<th>Savings3</th>
<th>Savings4</th>
<th>Savings5</th>
<th>Savings6</th>
<th>Savings7</th>
</tr>
</thead>
<tbody>
<tr>
<td>January1</td>
<td>$100</td>
<td>January</td>
<td>$100</td>
<td>January</td>
<td>$100</td>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February2</td>
<td>$80</td>
<td>February换行换行换行换行换行换行换行换行换行换行换行换行换行</td>
<td>$80</td>
<td>February</td>
<td>$80</td>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February3</td>
<td>$80</td>
<td>February</td>
<td>$80</td>
<td>February</td>
<td>$80</td>
<td>January</td>
<td>$100</td>
</tr>
</tbody>
</table>
</div>
<h2>场景3：自动求解，只有纵向滚动条</h2>
<div style="width:900px;height:350px;">
<table id="fixTableZ" class="common-table" style="width:1000px">
<thead>
<tr>
<th>Month</th>
<th>Savings1</th>
<th>Savings2</th>
<th>Savings3</th>
<th>Savings4</th>
<th>Savings5</th>
<th>Savings6</th>
<th>Savings7</th>
</tr>
</thead>
<tbody>
<tr>
<td>January1</td>
<td>$100</td>
<td>January</td>
<td>$100</td>
<td>January</td>
<td>$100</td>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February2</td>
<td>$80</td>
<td>February</td>
<td>$80</td>
<td>February</td>
<td>$80</td>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February3</td>
<td>$80</td>
<td>February</td>
<td>$80</td>
<td>February</td>
<td>$80</td>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February4</td>
<td>$80</td>
<td>February</td>
<td>$80</td>
<td>February</td>
<td>$80</td>
<td>January</td>
<td>$100</td>
</tr>
</tbody>
</table>
</div>
<h2>场景3：确定只有纵向滚动条</h2>
<div style="width:1200px;height:350px;">
<table id="fixTableZ2" class="common-table" style="width:1000px">
<thead>
<tr>
<th>Month</th>
<th>Savings1</th>
<th>Savings2</th>
<th>Savings3</th>
<th>Savings4</th>
<th>Savings5</th>
<th>Savings6</th>
<th>Savings7</th>
</tr>
</thead>
<tbody>
<tr>
<td>January1</td>
<td>$100</td>
<td>January</td>
<td>$100</td>
<td>January</td>
<td>$100</td>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February2</td>
<td>$80</td>
<td>February</td>
<td>$80</td>
<td>February</td>
<td>$80</td>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February3</td>
<td>$80</td>
<td>February</td>
<td>$80</td>
<td>February</td>
<td>$80</td>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February4</td>
<td>$80</td>
<td>February</td>
<td>$80</td>
<td>February</td>
<td>$80</td>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February5</td>
<td>$80</td>
<td>February</td>
<td>$80</td>
<td>February</td>
<td>$80</td>
<td>January</td>
<td>$100</td>
</tr>
</tbody>
</table>
</div>
<h2>场景4：无滚动条</h2>
<div style="width:900px;height:150px;">
<table id="fixTableW" class="common-table" style="width:1000px">
<thead>
<tr>
<th>Month</th>
<th>Savings1</th>
<th>Savings2</th>
<th>Savings3</th>
<th>Savings4</th>
<th>Savings5</th>
<th>Savings6</th>
<th>Savings7</th>
</tr>
</thead>
<tbody>
<tr>
<td>January1</td>
<td>$100</td>
<td>January</td>
<td>$100</td>
<td>January</td>
<td>$100</td>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February2</td>
<td>$80</td>
<td>February</td>
<td>$80</td>
<td>February</td>
<td>$80</td>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February3</td>
<td>$80</td>
<td>February</td>
<td>$80</td>
<td>February</td>
<td>$80</td>
<td>January</td>
<td>$100</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
FixTable.js文件:
/*==================================================固定table的行和列=====================================================================*/
(function ($) {
"use strict";
/*====固定table的行和列=====*/
$.fn.fixTable = function (options) {
var defaults = {
fixColumn: 0,
width: 0,
height: 0,
fixColumnWidth: 0,
fixTheadHeight: 0
};
var opts = $.extend(defaults, options);
$(this)._fixTable(defaults);
};
/*====固定table的行=====*/
$.fn.fixThead = function (options) {
var defaults = {
ixFixHeader: true,
height: 0,
fixTheadHeight: 0
};
$.extend(defaults, options);
$(this)._fixTable(defaults);
};
/*====固定table的列=====*/
$.fn.fixColumn = function (options) {
var defaults = {
fixColumn: 0,
fixColumnWidth: 0,
};
$.extend(defaults, options);
$(this)._fixTable(defaults);
};
/*====内部使用=====*/
$.fn._fixTable = function (options) {
var defaults = {
isDebug: true,
ixFixHeader: false,
fixColumn: 0,
width: 0,
height: 0,
fixColumnWidth: 0,
fixTheadHeight: 0
};
try {
$.extend(defaults, options);
var _this = $(this);
if (_this.size() != 1) { alert("固定行列功能运行错误，执行对象应该是单个table"); return; }
//如果当前元素已经执行过此方法，则清空还原
var _top = _this.parent().parent();
var _topId = _top.attr("id");
if (!!_topId && _topId && _topId.indexOf("_fixTable") > -1) {
_this.parent().nextAll().remove();
_this.unwrap();
_this.unwrap();
}
//兼容，移动头信息
if (_this.children("thead").size() == 0) {
_this.prepend("<thead></thead>");
_this.children("tbody").find("th").parent().prependTo(_this.children("thead:eq(0)"));
}
if (defaults.isDebug) { console.log('固定table的行和列，ID：' + _this.attr("id")); }
//如果是用%来布局的，则不需设置值，其值默认取其父元素的宽度
if (defaults.width == 0) { defaults.width = _this.parent().width(); }
if (defaults.height == 0) { defaults.height = _this.parent().height(); }
//如果table宽度和高度都小于设定值，则不需要固定行和列
if (defaults.width >= _this.width() && defaults.height >= _this.height()) {
if (defaults.isDebug) { console.log('不需要固定行和列'); }
return;
}
//如果table宽度+滚动条（17px）小于设定宽度，则将其值设置为设定宽度度
var scroll_x = true;
if (defaults.width > _this.width() + 18) {
defaults.width = _this.width() + 18;
scroll_x = false;
if (defaults.isDebug) { console.log('不需要横向滚动条'); }
}
//如果table高度+滚动条高度（20px）小于设定高度，则将其值设置为设定高度
var scroll_y = true;
if (defaults.height > _this.height() + 20) {
defaults.height = _this.height() + 20;
scroll_y = false;
if (defaults.isDebug) { console.log('不需要纵向滚动条'); }
}
//不需要固定行和列
if (scroll_x == false && scroll_y == false) {
if (defaults.isDebug) { console.log('不需要固定行和列'); }
return;
}
//求解列宽行头高
if (defaults.fixColumnWidth == 0) {
var _fixColumnWidth = 10;
_this.find("thead tr:eq(0)").find("th:lt(" + defaults.fixColumn + ")").each(function () {
_fixColumnWidth += $(this).width() + 3;
});
//兼容
if (_fixColumnWidth < 40) { _fixColumnWidth = defaults.fixColumn * 90 + 10; }
defaults.fixColumnWidth = _fixColumnWidth;
}
if (defaults.fixTheadHeight == 0) {
var _fixTheadHeight = _this.find("thead").height() + 3;
if (_fixTheadHeight < 35) {
var trcount = _this.children("thead").children("tr").size();
_fixTheadHeight = trcount * 35 + 3;
}
defaults.fixTheadHeight = _fixTheadHeight;
}
//定义ID名称
var _randomCode = new Date().valueOf();
var _id = _this.attr("id");
var _idBody = "_fixTableBody" + _randomCode;
var _idTop = "_fixTableTop" + _randomCode;
//增加原table外层的div，滚动条的宿主
_this.wrap(function () {
return $("<div id='" + _idBody + "' style='overflow:auto;position:relative;z-index:100;width:100%;'></div>");
});
$("#" + _idBody).css({ "height": defaults.height });
//增加最外层的div
$("#" + _idBody).wrap(function () {
return $("<div id='" + _idTop + "' style='overflow:hidden;position:relative;'></div>");
});
$("#" + _idTop).css({ "width": defaults.width });
$("#" + _idTop).css({ "height": defaults.height });
if (defaults.fixFixHeader || scroll_y) {
var _idHeader = "_fixTableHeader" + _randomCode;
var _cloneHeader = _this.clone();
$(_cloneHeader).attr("id", _id + _idHeader);
$("#" + _idTop).append("<div id='" + _idHeader + "' style='overflow:hidden;position:absolute;width:100%;top:0;z-index:100;'></div>");
$("#" + _idHeader).css({ "width": defaults.width - 17 });
$("#" + _idHeader).css({ "height": defaults.fixTheadHeight });
$("#" + _idHeader).append(_cloneHeader);
$("#" + _idBody).scroll(function (e) {
$("#" + _idHeader).scrollLeft($(this).scrollLeft());
});
}
if (defaults.fixColumn > 0 && scroll_x) {
var _idColumn = "_fixTableColumn" + _randomCode;
var _idColumnHeader = "_fixTableColumnHeader" + _randomCode;
var _idColumnBody = "_fixTableColumnBody" + _randomCode;
var _columnHeaderClone = _this.clone();
$(_columnHeaderClone).attr("id", _id + _idColumnHeader);
var _columnBodyClone = _this.clone();
$(_columnBodyClone).attr("id", _id + _idColumnBody);
$("#" + _idTop).append("<div id='" + _idColumn + "' style='overflow:hidden;position:absolute;top:0;left:0;z-index:100;'></div>");
$("#" + _idColumn).css({
"width": defaults.fixColumnWidth,
"height": defaults.height - 18
});
$("#" + _idColumn).append("<div id='" + _idColumnHeader + "' style='overflow:hidden;position:absolute;z-index:100;'></div>");
$("#" + _idColumnHeader).css({
"width": defaults.fixColumnWidth,
"height": defaults.fixTheadHeight
});
$("#" + _idColumnHeader).append(_columnHeaderClone);
$("#" + _idColumn).append("<div id='" + _idColumnBody + "' style='overflow:hidden;position:absolute;top:0;'></div>");
$("#" + _idColumnBody).css({
"width": defaults.fixColumnWidth,
"height": defaults.height - 18
});
$("#" + _idColumnBody).append(_columnBodyClone);
$("#" + _idBody).scroll(function (e) {
$("#" + _idColumnBody).scrollTop($(this).scrollTop());
});
}
} catch (e) {
console.log(e);
}
}
})(jQuery);效果:
扫一扫
7611
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
