淘先锋技术网

首页 1 2 3 4 5 6 7

jquery 首行首列冻结

在很多网站应用中，都需要对表格进行冻结操作，而jquery可以给我们有效的帮助采取首行和首列冻结的方式来解决。

首先，我们需要明确这个功能的实现方式是基于CSS的。通过jQuery添加/删除CSS样式类，我们可以有效地协调表格中的行和列，以实现第一行和第一列的冻结效果。

下面是prototype模板，我们可以根据它来注册我们的jQuery函数：

(function($){
$.fn.freezeheader = function(options){
options = $.extend({
scrollableArea: null,
"fixedCols": 1,
"width": null,
"height": null,
}, options);
this.each(function(){
var $tbl = $(this),
$tblWrapper = $("
").addClass("fht-table-wrapper"),
$cloneTbl = $tbl.clone(true),
wrapperWidth,
wrapperHeight;
//处理表格
handleTable($tbl, $cloneTbl, options.fixedCols);
//处理表格容器
handleWrapper($tblWrapper, options.width, options.height, $tbl.outerWidth(), $tbl.outerHeight());
//处理滚动容器
handleScrollableArea(options.scrollableArea, $tblWrapper);
//将表格添加到容器中
$tbl.before($tblWrapper);
//根据调整大小或旋转调整表格大小
$(window).on("resize orientationchange", function(){
handleWrapper($tblWrapper, options.width, options.height, $tbl.outerWidth(), $tbl.outerHeight());
handleTable($tbl, $cloneTbl, options.fixedCols);
wrapperWidth = $tblWrapper.outerWidth();
$(".fht-scroll").width(wrapperWidth >$tbl.outerWidth() + 20 ? $tblWrapper.width() : $tbl.outerWidth() + 20 );
wrapperHeight = $tblWrapper.outerHeight();
$(".fht-scroll").height(wrapperHeight >$tbl.outerHeight() ? $tbl.outerHeight() : wrapperHeight);
});
});
};
})(jQuery);
这是一个freezeheader的模板，它可以根据应用程序的需要来进行定制化，比如设置“fixedCols”选项表示冻结前几列。
下面是代码，它可以帮助您使用jquery实现首行首列冻结的效果：
.table {
height: auto;
overflow: hidden;
position: relative;
width: auto;
}
.table th:first-child, .table td:first-child {
background-color: #fff;
position: absolute;
top: auto;
width: 50px;
}
.table td, .table th {
width: auto !important;
}
.table td:first-child {
padding-left: 50px;
}
.table th:first-child, .table td:first-child {
left: 0;
z-index: 10;
}
对于自定义应用程序，您可能需要从包含jquery库和样式表的外部资源中加载代码。请记得在编写代码时加入代码注释，以便维护更容易。