一笑_奈何
- 浏览: 66835 次
- 性别:
- 来自: 成都
-
文章分类
最新评论
-
乒乓狂魔：
错了，是这个地址 http://lgbolgger.iteye ...
springMVC 解决GET乱码 -
乒乓狂魔：
楼主可以参考这篇文章 http://lgbolgger.it ...
springMVC 解决GET乱码
在这个插件的使用中，部分网友反应有两个问题：
1>单元格内容很长时，会出现布局问题；
2>固定的表头，有时与下面的tbody中的元素不能对齐
解决方法：
1>第一个问题实际就是单元格自动换行的问题，可以用下面的方法解决（但仅IE下通过），加入CSS
并在调用时传入tableLayout="fixed",采用固定的table布局方案。
2>第二个问题，试过很多种方法，最稳定的方法是在页面加载完后，将原来的表头TD宽度赋给新的固定表头，代码详见插件源代码
1 业务要求：
固定TABLE的表头，当垂直滚动时，表头位置不变，始终可见；
2 存在的问题：
网上很多的例子都是针对于单行的表头，如果是多表头,并且td有rowspan在IE下会出现下面的情况（如果您遇到的是多表头td在固定时出现跨行显示的问题，这篇文章适合您）
3 解决方法:
写了一个jquery插件来解决这个问题，主要思想是：
1>将原有的TABLE中的THEAD元素复制一份放在一个新的DIV(fixedheadwrap)中
2>设置这个fixedheadwrap为绝对位于原来的TABLE的THEAD位置
5实现要点
1>table表头元素要放在<thead>中
2>table外面需要包一层DIV
3>运行后发现表头与数据行不对齐，需要调整一下表格中元素的宽度。可以尝试传入tableLayout属性（因为样式问题多种多样，不能保证有用）。
6 示例(在FF和IE8下测试通过)
1>单元格内容很长时，会出现布局问题；
2>固定的表头，有时与下面的tbody中的元素不能对齐
解决方法：
1>第一个问题实际就是单元格自动换行的问题，可以用下面的方法解决（但仅IE下通过），加入CSS
table tbody td
{
word-break: break-all;
word-wrap: break-word;
}
并在调用时传入tableLayout="fixed",采用固定的table布局方案。
2>第二个问题，试过很多种方法，最稳定的方法是在页面加载完后，将原来的表头TD宽度赋给新的固定表头，代码详见插件源代码
1 业务要求：
固定TABLE的表头，当垂直滚动时，表头位置不变，始终可见；
2 存在的问题：
网上很多的例子都是针对于单行的表头，如果是多表头,并且td有rowspan在IE下会出现下面的情况（如果您遇到的是多表头td在固定时出现跨行显示的问题，这篇文章适合您）
3 解决方法:
写了一个jquery插件来解决这个问题，主要思想是：
1>将原有的TABLE中的THEAD元素复制一份放在一个新的DIV(fixedheadwrap)中
2>设置这个fixedheadwrap为绝对位于原来的TABLE的THEAD位置
/*
* Auther:Mike.Jiang
* Email: dataadapter@hotmail.com
* Date: 2012-09-05
*/
/*
主要思想：
1>将原有的TABLE中的THEAD元素复制一份放在一个新的DIV(fixedheadwrap)中
2>设置这个fixedheadwrap为绝对位于原来的TABLE的THEAD位置
*/
(function ($) {
$.fn.extend({
FixedHead: function (options) {
var op = $.extend({ tableLayout: "auto" }, options);
return this.each(function () {
var $this = $(this); //指向当前的table
var $thisParentDiv = $(this).parent(); //指向当前table的父级DIV，这个DIV要自己手动加上去
$thisParentDiv.wrap("<div class='fixedtablewrap'></div>").parent().css({ "position": "relative" }); //在当前table的父级DIV上，再加一个DIV
var x = $thisParentDiv.position();
var fixedDiv = $("<div class='fixedheadwrap' style='clear:both;overflow:hidden;z-index:2;position:absolute;' ></div>")
.insertBefore($thisParentDiv)//在当前table的父级DIV的前面加一个DIV，此DIV用来包装tabelr的表头
.css({ "width": $thisParentDiv[0].clientWidth, "left": x.left, "top": x.top });
var $thisClone = $this.clone(true);
$thisClone.find("tbody").remove(); //复制一份table，并将tbody中的内容删除，这样就仅余thead，所以要求表格的表头要放在thead中
$thisClone.appendTo(fixedDiv); //将表头添加到fixedDiv中
$this.css({ "marginTop": 0, "table-layout": op.tableLayout });
//当前TABLE的父级DIV有水平滚动条，并水平滚动时，同时滚动包装thead的DIV
$thisParentDiv.scroll(function () {
fixedDiv[0].scrollLeft = $(this)[0].scrollLeft;
});
//因为固定后的表头与原来的表格分离开了，难免会有一些宽度问题
//下面的代码是将原来表格中每一个TD的宽度赋给新的固定表头
var $fixHeadTrs = $thisClone.find("thead tr");
var $orginalHeadTrs = $this.find("thead");
$fixHeadTrs.each(function (indexTr) {
var $curFixTds = $(this).find("td");
var $curOrgTr = $orginalHeadTrs.find("tr:eq(" + indexTr + ")");
$curFixTds.each(function (indexTd) {
$(this).css("width", $curOrgTr.find("td:eq(" + indexTd + ")").width());
});
});
});
}
});
})(jQuery);
5实现要点
1>table表头元素要放在<thead>中
2>table外面需要包一层DIV
3>运行后发现表头与数据行不对齐，需要调整一下表格中元素的宽度。可以尝试传入tableLayout属性（因为样式问题多种多样，不能保证有用）。
6 示例(在FF和IE8下测试通过)
<!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>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
table th
{
background-color: Gray;
}
table tbody td
{
word-break: break-all;
word-wrap: break-word;
}
</style>
<script type="text/javascript">
/*
* Auther:Mike.Jiang
* Email: dataadapter@hotmail.com
* Date: 2012-09-05
*/
/*
主要思想：
1>将原有的TABLE中的THEAD元素复制一份放在一个新的DIV(fixedheadwrap)中
2>设置这个fixedheadwrap为绝对位于原来的TABLE的THEAD位置
*/
(function ($) {
$.fn.extend({
FixedHead: function (options) {
var op = $.extend({ tableLayout: "auto" }, options);
return this.each(function () {
var $this = $(this); //指向当前的table
var $thisParentDiv = $(this).parent(); //指向当前table的父级DIV，这个DIV要自己手动加上去
$thisParentDiv.wrap("<div class='fixedtablewrap'></div>").parent().css({ "position": "relative" }); //在当前table的父级DIV上，再加一个DIV
var x = $thisParentDiv.position();
var fixedDiv = $("<div class='fixedheadwrap' style='clear:both;overflow:hidden;z-index:2;position:absolute;' ></div>")
.insertBefore($thisParentDiv)//在当前table的父级DIV的前面加一个DIV，此DIV用来包装tabelr的表头
.css({ "width": $thisParentDiv[0].clientWidth, "left": x.left, "top": x.top });
var $thisClone = $this.clone(true);
$thisClone.find("tbody").remove(); //复制一份table，并将tbody中的内容删除，这样就仅余thead，所以要求表格的表头要放在thead中
$thisClone.appendTo(fixedDiv); //将表头添加到fixedDiv中
$this.css({ "marginTop": 0, "table-layout": op.tableLayout });
//当前TABLE的父级DIV有水平滚动条，并水平滚动时，同时滚动包装thead的DIV
$thisParentDiv.scroll(function () {
fixedDiv[0].scrollLeft = $(this)[0].scrollLeft;
});
//因为固定后的表头与原来的表格分离开了，难免会有一些宽度问题
//下面的代码是将原来表格中每一个TD的宽度赋给新的固定表头
var $fixHeadTrs = $thisClone.find("thead tr");
var $orginalHeadTrs = $this.find("thead");
$fixHeadTrs.each(function (indexTr) {
var $curFixTds = $(this).find("td");
var $curOrgTr = $orginalHeadTrs.find("tr:eq(" + indexTr + ")");
$curFixTds.each(function (indexTd) {
$(this).css("width", $curOrgTr.find("td:eq(" + indexTd + ")").width());
});
});
});
}
});
})(jQuery);
$(document).ready(function () {
$("#tbTest").FixedHead({ tableLayout: "fixed" });
});
</script>
</head>
<body>
<div style="height: 200px; width: 400px; overflow: auto;">
<table id="tbTest" border="1" cellspacing="1" cellpadding="1" style="width: 500px;">
<thead>
<tr>
<th rowspan="2" style="width: 30%">
项目
</th>
<th colspan="2">
常规性税金
</th>
<th colspan="2">
非常规性税金
</th>
<th rowspan="2" style="width: 10%">
工程税
</th>
</tr>
<tr>
<th style="width: 15%">
城建税
</th>
<th style="width: 15%">
教育费附加%
</th>
<th style="width: 15%">
堤围防护费%
</th>
<th style="width: 15%">
个人所得税%
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
0.2
</td>
<td>
11111111111111111.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
分享到：
发表评论
-
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
2014-12-18 14:39 783最近在修改后台框架的时候，在IE系列上面出现了兼容性问题 ... -
jquery 动态加载js文件出现的乱码
2014-11-10 16:32 490最近我在做项目的时候遇到了一个就是用jquery加载j ... -
js图片上下左右平滑滚动效果
2014-09-22 10:59 2551虽然简单，但是很实用，代码比较简短。 利用js 实现无缝滚动效 ... -
jquery实现随屏滚动
2014-09-19 15:16 635看这篇文章之前，建议大家先看 jQuery---10行代码搞定 ... -
jquery 与 Dom对象互转
2014-05-20 16:43 525什么是jQuery对象？ ---就是通过jQuery包装D ... -
QQ在线客户
2014-03-04 14:21 624以前不明白QQ在线客户是怎么做的，今天看了一下一下源代 ...
相关推荐
当表格数据较多时，会导致表头随内容滚动，影响使用，因此使用jQuery做一个插件，压缩文件中有test.html是一个具体使用的案例，如果不会使用请查看https://blog.csdn.net/qq_28254093/article/details/82844050 文章
基于jquery的固定html table表头/列头插件jquery.fixedtable.js; 兼容主流浏览器，亲测（IE6,IE6+,firefox,chrome,opera）
超好用的jquery插件，可以让表头固定 ，几乎兼容所有浏览器
大家可能经常需要展示数据或者报表，表头如果滚动上去后，查看数据的类别和字段是个麻烦事情，在这里我们推荐来自tympanus的一个JS实现的 table表头固定效果，相信大家肯定会受益的，这个demo使用了jQuery来实现，...
NULL 博文链接：https://xiaomaha.iteye.com/blog/1106606
基于jquery的固定html table表头/列头插件jquery.fixedtable.js; 兼容主流浏览器，亲测（IE6,IE6+,firefox,chrome,opera）。第一版仅支持所固定列数自定义，本加强版新增所固定行数自定义。
前段时间需要这个功能，但是找了很多都不能完美的实现，不是只能锁定表头，就是浏览器兼容问题什么的，在此就自己做了一个锁定表头和列的js方法，依赖于JQuery。 因为方法很简单，就未封装成插件的形式，仅仅以代码...
bootstrap-table：基于 Bootstrap 的 jQuery 表格插件，通过简单的设置就可以拥有强大的单选、多选、排序、分页、编辑、导出、过滤（扩展）等功能
基于jquery的冻结行冻结列插件，可以支持复合表头，对原业务代码侵入较小，非常适合需要实现固定行列对table场景
jQuery fixed-table.js锁定表头Table插件特效代码.zip
脚本简介jQuery响应式表格插件basictable是一款可以设置breakpoint来定制自己的响应式断点，该表格能适应台式电脑，平板和手机的需求，响应式效果非常好。另外添加table固定表头和表头排序功能。
NULL 博文链接：https://jonsion.iteye.com/blog/757300
jquery 表格插件表头标题固定在顶部表格内容拖动显示
表头固定应该是一个用得比较多...趁着动手学习写jquery插件的机会，自己写了一个表头固定的插件。 使用方式和jquery-ui中的插件一样，只需要一行代码 $(‘#table1’).fixHeader({height:100}); 下列浏览器测试通过 IE7
jQuery表格顶部与左右两侧固定滚动代码是一款左右两侧固定列，中间内容可以横向拖动，固定表头，可以横向拖动的表格插件代码。
打开文档直接有一个HTML页，打开有的浏览器会提示安装插件，这是JQUERY插件，注意安装一下，这样就可以实现表格的筛选功能了
首先是简单的页面形式，大家可以按照平常画表格的方式来创建html表格，然后通过js控制特殊的样式等操作（优点是表格更加直观，方便...还有，使用前请引入bootstrap的相关css，js，jQuery，以及bootstrap-table的css，
插件基于jquery，完全采用table绘制。 2、操作流畅。所点即所得，有点像excel2013。 3、自定义多表头。这个必须的。 4、可定义多行 为一组。例如定义2行为一组。对此组进行删除、清空、插入一组等。 5、体积小。...
一款简单方便的插件，轻松引入，即可调用。有中文注释，便于理解。