在编码时多写一个固定的表头

来源:http://www.4008831535.com 作者:手机购彩app官方网站-服务器运维 人气:191 发布时间:2020-03-28
摘要:表头固定应该是一个用得比较多的功能,参考了网上几个例子,在几个常用浏览器下显示不是很完美。而且很多都是基于固定的表格,在编码时多写一个固定的表头,对于动态生成的不

表头固定应该是一个用得比较多的功能,参考了网上几个例子,在几个常用浏览器下显示不是很完美。而且很多都是基于固定的表格,在编码时多写一个固定的表头,对于动态生成的不知道多少列的表格就无从下手。而且例子中大多只能满足限定高度的情况,如果限定宽度,出现横向滚动条就无能为力了。 我的目的就是要像jquery-ui那样,找到页面上存在的表格,调用一个方法就可以实现固定表头的功能。趁着动手学习写jquery插件的机会,自己写了一个表头固定的插件。 使用方式和jquery-ui中的插件一样,只需要一行代码 $.fixHeader; 下列浏览器测试通过 IE7 IE8 firefox16.0 chrome22.0 目前已知IE9下列不能对齐,手头暂时没有IE9来调试,以后再想法解决。 说明: 1 需要jquery,开发测试用的jquery-1.8.2,其他版本应该不大 2 表头部分的

需要写在

里 3 不限定宽度情况下,自动适应表格宽度(假设滚动条宽度为20px,实际宽度为表格宽度+20px) 4 支持多行表头固定 5 通常表格所有列都显示,无横向滚动条,只需要竖向滚动条的功能。该插件支持限定宽度条件下的表头固定。 6 限定宽度和高度的条件下固定表头显示时,表头固定功能无法单纯通过css来实现,需要通过js实现,会有轻微闪烁 7 已经考虑table和th,td的border-width设置成不同值的情况 8 已经考虑了表头中绑定的事件,原表头中绑定的事件仍然保留 特别注意:IE浏览器下,一定要设置表格中td和th的border-width,否则无法正确设置列宽,表头和数据部分会错位 使用方法: 限定高度:$.fixHeader; 限定高度和宽度:$.fixHeader({height:100,width:500}); 下面为完整代码复制代码 代码如下:/*! * fixHeader 1.0.0 * Copyright 2012 chokobo * * make table header fixed * * notice: set th,id border-width in IE * * tested browser: IE7 IE8 firefox16.0 chrome22.0 */ (function { $.fn.fixHeader = function{ var defaults = { width: '', height: '' }; options = $.extend({}, defaults, options); var elem = this; if{ return this; } var thead = elem.find; var fixTable = elem.clone.removeAttr; //set head default background-color if(fixTable.css == 'transparent' || fixTable.css == ''){ fixTable.css('background-color', '#fff'); } fixTable.css({ 'position': 'absolute', 'top': '0px', 'border-bottom': $.find.css('border-bottom-width') }); $.find.each{ var col = $; if{ col.width; } else if{ var colBorderWidth = parseInt(col.css; col.width+colBorderWidth); } else if{ var colBorderWidth = parseInt(col.css; if{ col.width+colBorderWidth+colBorderWidth/2);//IE7?? } } }); //make head var dummyHead = thead.clone(); thead.appendTo; dummyHead.prependTo; var tbodyWrapper = elem.wrap.parent(); var tableWrapper = tbodyWrapper.wrap('

').parent; setWrapperSize(); fixTable.prependTo; return this; function setTableWidth(){ if{ elem.width; fixTable.css('width',elem.css; } else if{ elem.width; fixTable.width; } else if{ elem.width; fixTable.width; } else{ elem.width; fixTable.width; } } function setWrapperSize(){ var elemWidth = elem.outerWidth; var elemHeight = elem.outerHeight; var scrollBarWidth = 20; if{ tbodyWrapper.css({ 'width': (elemWidth+scrollBarWidth) + 'px', 'height': options.height, 'overflow-x': 'hidden', 'overflow-y': 'auto' }); } else{ if(elemWidth <= options.width){ tbodyWrapper.css({ 'width': options.width+'px', 'height': options.height, 'overflow-x': 'hidden', 'overflow-y': 'auto' }); } else{ tableWrapper.css({ 'width': options.width, 'height': options.height, 'overflow': 'auto' }); tableWrapper.scroll{ fixTable.css('top',tableWrapper.scrollTop; } } } }; });复制代码 代码如下:/* 功能:固定表头。 使用容器的ID进行设定$.chromatable({width: "100%",height: "100%", scrolling: "yes"}) table必须包含有

标籤 参数:无。 */ { $.chromatable = { defaults: { width: "900px", //设定容器宽度,待扩展程式 height: "300px", //设定容器高度,待扩展程式 scrolling: "yes" //yes跟随IE滚动条而滑动, no固定在页面上仅容器滚动条滑动 } }; $.fn.chromatable = function{ var options = $.extend({}, $.chromatable.defaults, options); return this.each{ var $divObj = $; var $tableObj = $divObj.find; var $uniqueID = $tableObj.attr; var $class = $tableObj.attr; var $tableWidth = $tableObj.width(); var top = $("#"+$tableObj.attr.top; var left = $("#"+$tableObj.attr.left $divObj.append("

"+$("#"+$tableObj.attr.html; $.each($("#"+$tableObj.attr.find, function{ $.find.width; $.width; if(options.scrolling === "yes") { scrollEvent, $uniqueID); } resizeEvent, $uniqueID); }); function scrollEvent { var element = $; $.scroll{ var top = $.top; var scrolls = $; if { if (window.XMLHttpRequest) { element.css({ position: "fixed", top: 0 }); } else { element.css; } }else { element.css({ position: "absolute", top: top }); } }); }; function resizeEvent { var element = $; $.resize{ var top = $.top; var scrolls = $; if { if (window.XMLHttpRequest) { element.css({ position: "fixed", top: 0 }); } else { element.css; } }else { element.css({ position: "absolute", top: top }); } }); } }; });

本文由手机购彩软件发布于手机购彩app官方网站-服务器运维,转载请注明出处:在编码时多写一个固定的表头

关键词:

上一篇:其他都是对象

下一篇:没有了

最火资讯