实现锁死的有滚动条的div的表格(datagird)
JS框架使用Jquery
最终效果：
代码结构：
代码：
<HEAD><TITLE>new document</TITLE>
<META name=Generator content=EditPlus,Microshaoft>
<META name=Author content=EditPlus,Microshaoft>
<META name=Keywords content=EditPlus,Microshaoft>
<META name=Description content=EditPlus,Microshaoft>
<SCRIPT type=text/javascript src="jquery-1.9.1.js"></SCRIPT>
<style type="text/css">
.tableFix{
Z-INDEX: 50;
POSITION: relative;
BACKGROUND-COLOR: #fff;
OVERFLOW: hidden;
LEFT: 0px;
}
.tableHead{
Z-INDEX: 45;
POSITION: relative;
BACKGROUND-COLOR: #fff;
OVERFLOW: hidden;
LEFT: 0px;
}
.tableColumn{
Z-INDEX: 40;
POSITION: relative;
BACKGROUND-COLOR: #fff;
OVERFLOW: hidden;
LEFT: 0px;
}
.tableData{
Z-INDEX: 35;
POSITION: relative;
OVERFLOW: scroll;
LEFT: 0px;
}
.sa {
color: #000000;
font-size: 12px;
font-family: "微软雅黑"; }
</style>
<SCRIPT type=text/javascript>
$(document).ready(function () {
FixTable("MyTable", 1,600, 300,47,30);
});
/**
_tableHead里的table的要比宽度应该要比_tableData里的table的宽度多17(在_tableHead的最后一列上),这样可达到上下表格包括滚动条上下完全对齐的效果
参数：
TableID：table的ID
FixColumnNumber:锁定的列的个数
width：div的宽度
height:div的高度
headWidth:锁死列表头的宽度
headHeight:表头的高度
*/
function FixTable(TableID,FixColumnNumber, width, height,headWidth,headHeight) {
$("#" + TableID + "_tableLayout").css("width",width);
$("#" + TableID + "_tableLayout").css("height",height+headHeight); $("#" + TableID + "_tableFix").css("width",(headWidth+5)*FixColumnNumber);
$("#" + TableID + "_tableFix").css("height",headHeight); $("#" + TableID + "_tableHead").css("width",width);
$("#" + TableID + "_tableHead").css("height",headHeight);
$("#" + TableID + "_tableHead").css("top",headHeight*-1); $("#" + TableID + "_tableColumn").css("width",headWidth);
$("#" + TableID + "_tableColumn").css("height",height-17+headHeight);
$("#" + TableID + "_tableColumn").css("top",(headHeight*2*-1)); $("#" + TableID + "_tableData").css("width",width);
$("#" + TableID + "_tableData").css("height",height);
$("#" + TableID + "_tableData").css("top",(headHeight*2+(height-17))*-1); $("#" + TableID + "_tableData").scroll(function () {
$("#" + TableID + "_tableHead").scrollLeft($("#" + TableID + "_tableData").scrollLeft());
$("#" + TableID + "_tableColumn").scrollTop($("#" + TableID + "_tableData").scrollTop());
});
}
</SCRIPT>
</HEAD>
<BODY style="margin:0">
<!-- 总体div,用来限制总体datagird的宽度和高度使用 -->
<DIV style="OVERFLOW: hidden" id='MyTable_tableLayout'>
<!-- 左右列锁DIV,用来放列锁的列(没列锁的不需要在这里写) -->
<DIV style="WIDTH: 85px; HEIGHT: 20px;" class="tableFix" id='MyTable_tableFix'>
<TABLE style="width:2205;" border='0' cellSpacing='0' cellPadding='0'>
<THEAD>
<TR>
<TH width="2"></TH>
<TH width="5" background="image/jk8-12-1.png" height="30"></TH>
<TH width="35" background="image/jk8-1122.png" class="sa"><input type="checkbox" id='selctAllCheckbox' onclick="doSelctAllCheckbox()"/></TH>
<TH width="5" background="image/jk8-13-1.png"></TH>
<TH width="4"></TH>
<TH > </TH>
</TR>
</THEAD>
</table>
</div>
<!-- 表头DIV,用来表头的table(这里的表比MyTable_tableColumn要宽17是用来解决下面滚动的出现导致表头和数据的table上下没对齐的问题) -->
<DIV style="WIDTH: 583px; HEIGHT: 20px;" class="tableHead" id='MyTable_tableHead'>
<TABLE style="width:2217;" border='0' cellSpacing='0' cellPadding='0'>
<THEAD>
<TR>
<TH width="2"></TH>
<TH width="5" background="image/jk8-12-1.png" height="30"></TH>
<TH width="35" background="image/jk8-1122.png" class="sa"> </TH>
<TH width="5" background="image/jk8-13-1.png"></TH>
<TH width="4"></TH>
<TH width="5" background="image/jk8-12-1.png" height="30"></TH>
<TH width="45" background="image/jk8-1122.png" class="sa">客户名</TH>
<TH width="5" background="image/jk8-13-1.png"></TH>
<TH width="4"></TH>
<TH width="5" background="image/jk8-12-1.png" height="30"></TH>
<TH width="45" background="image/jk8-1122.png" class="sa">区域</TH>
<TH width="5" background="image/jk8-13-1.png"></TH>
<TH width="4"></TH>
<TH width="5" background="image/jk8-12-1.png" height="30"></TH>
<TH width="70" background="image/jk8-1122.png" class="sa">商圈</TH>
<TH width="5" background="image/jk8-13-1.png"></TH>
<TH width="4"></TH>
<TH width="5" background="image/jk8-12-1.png" height="30"></TH>
<TH width="70" background="image/jk8-1122.png" class="sa">业态</TH>
<TH width="5" background="image/jk8-13-1.png"></TH>
<TH width="4"></TH>
<TH width="5" background="image/jk8-12-1.png" height="30"></TH>
<TH width="70" background="image/jk8-1122.png" class="sa">新品比例</TH>
<TH width="5" background="image/jk8-13-1.png"></TH>
<TH width="4"></TH>
<TH width="5" background="image/jk8-12-1.png" height="30"></TH>
<TH width="80" background="image/jk8-1122.png" class="sa">顺销品牌比例</TH>
<TH width="5" background="image/jk8-13-1.png"></TH>
<TH width="4"></TH>
<TH width="5" background="image/jk8-12-1.png" height="30"></TH>
<TH width="80" background="image/jk8-1122.png" class="sa">双低品牌比例</TH>
<TH width="5" background="image/jk8-13-1.png"></TH>
<TH width="4"></TH>
<TH width="5" background="image/jk8-12-1.png" height="30"></TH>
<TH width="80" background="image/jk8-1122.png" class="sa">责任品牌比例</TH>
<TH width="5" background="image/jk8-13-1.png"></TH>
<TH width="4"></TH>
<TH width="5" background="image/jk8-12-1.png" height="30"></TH>
<TH width="80" background="image/jk8-1122.png" class="sa">阶段性培育</TH>
<TH width="5" background="image/jk8-13-1.png"></TH>
<TH width="4"></TH>
<TH width="5" background="image/jk8-12-1.png" height="30"></TH>
<TH width="80" background="image/jk8-1122.png" class="sa">店铺面积</TH>
<TH width="5" background="image/jk8-13-1.png"></TH>
<TH width="4"></TH>
<TH width="5" background="image/jk8-12-1.png" height="30"></TH>
<TH width="80" background="image/jk8-1122.png" class="sa">经营卷烟面积</TH>
<TH width="5" background="image/jk8-13-1.png"></TH>
<TH width="4"></TH>
<TH width="5" background="image/jk8-12-1.png" height="30"></TH>
<TH width="80" background="image/jk8-1122.png" class="sa">新品接受度</TH>
<TH width="5" background="image/jk8-13-1.png"></TH>
<TH width="4"></TH>
<TH width="5" background="image/jk8-12-1.png" height="30"></TH>
<TH width="80" background="image/jk8-1122.png" class="sa">沟通行为特征</TH>
<TH width="5" background="image/jk8-13-1.png"></TH>
<TH width="4"></TH>
<TH width="5" background="image/jk8-12-1.png" height="30"></TH>
<TH width="80" background="image/jk8-1122.png" class="sa">进货量</TH>
<TH width="5" background="image/jk8-13-1.png"></TH>
<TH width="4"></TH>
<TH width="5" background="image/jk8-12-1.png" height="30"></TH>
<TH width="80" background="image/jk8-1122.png" class="sa">进货额</TH>
<TH width="5" background="image/jk8-13-1.png"></TH>
<TH width="4"></TH>
<TH width="5" background="image/jk8-12-1.png" height="30"></TH>
<TH width="80" background="image/jk8-1122.png" class="sa">毛利</TH>
<TH width="5" background="image/jk8-13-1.png"></TH>
<TH width="4"></TH>
<TH width="5" background="image/jk8-12-1.png" height="30"></TH>
<TH width="80" background="image/jk8-1122.png" class="sa">销售增长率</TH>
<TH width="5" background="image/jk8-13-1.png"></TH>
<TH width="4"></TH>
<TH width="5" background="image/jk8-12-1.png" height="30"></TH>
<TH width="80" background="image/jk8-1122.png" class="sa">月均条均价</TH>
<TH width="5" background="image/jk8-13-1.png"></TH>
<TH width="4"></TH>
<TH width="5" background="image/jk8-12-1.png" height="30"></TH>
<TH width="80" background="image/jk8-1122.png" class="sa">市场状态</TH>
<TH width="5" background="image/jk8-13-1.png"></TH>
<TH width="4"></TH>
<TH width="5" background="image/jk8-12-1.png" height="30"></TH>
<TH width="80" background="image/jk8-1122.png" class="sa">诚信经营</TH>
<TH width="5" background="image/jk8-13-1.png"></TH>
<TH width="4"></TH>
<TH width="5" background="image/jk8-12-1.png" height="30"></TH>
<TH width="80" background="image/jk8-1122.png" class="sa">明码标价</TH>
<TH width="5" background="image/jk8-13-1.png"></TH>
<TH width="4"></TH>
<TH width="5" background="image/jk8-12-1.png" height="30"></TH>
<TH width="80" background="image/jk8-1122.png" class="sa">订货方式</TH>
<TH width="5" background="image/jk8-13-1.png"></TH>
<TH width="4"></TH>
<TH width="5" background="image/jk8-12-1.png" height="30"></TH>
<TH width="80" background="image/jk8-1122.png" class="sa">徽映e家系统</TH>
<TH width="5" background="image/jk8-13-1.png"></TH>
<TH width="4"></TH>
<TH width="5" background="image/jk8-12-1.png" height="30"></TH>
<TH width="80" background="image/jk8-1122.png" class="sa">优质终端</TH>
<TH width="24" background="image/jk8-13-1.png"></TH>
</TR>
</TR>
</THEAD>
</TABLE>
</DIV>
<!-- 上下列锁DIV,用来放列锁的列(没列锁的不需要在这里写) -->
<DIV style="WIDTH: 85px; HEIGHT: 383px;" class="tableColumn" id='MyTable_tableColumn'>
<TABLE width="100%" border='0' cellSpacing='0' cellPadding='0'>
<TR>
<TD width="2" bgcolor="#d4d6cf"></TD>
<TD width="45" height="30"></TD>
</tr>
</TABLE>
<TABLE width="100%" border='0' cellSpacing='0' cellPadding='0'>
<TR>
<TD height="2" colspan="2" bgcolor="#d4d6cf"></TD>
</tr>
</TABLE>
<TABLE border='0' cellSpacing='0' cellPadding='0'>
<TBODY><!-- 数据行 -->
<TR align="center">
<TD width="2" bgcolor="#d4d6cf"></TD>
<TD height="30" width="45"><input type='checkbox'/></TD>
</TR>
<TR align="center" bgcolor="#f4f2f2">
<TD width="2" bgcolor="#d4d6cf"></TD>
<TD height="30" width="45"><input type='checkbox'/></TD>
</TR>
<TR align="center">
<TD width="2" bgcolor="#d4d6cf"></TD>
<TD height="30" width="45"><input type='checkbox'/></TD>
</TR>
<TR align="center" bgcolor="#f4f2f2">
<TD width="2" bgcolor="#d4d6cf"></TD>
<TD height="30" width="45"><input type='checkbox'/></TD>
</TR>
<TR align="center">
<TD width="2" bgcolor="#d4d6cf"></TD>
<TD height="30" width="45"><input type='checkbox'/></TD>
</TR>
<TR align="center" bgcolor="#f4f2f2">
<TD width="2" bgcolor="#d4d6cf"></TD>
<TD height="30" width="45"><input type='checkbox'/></TD>
</TR>
<TR align="center">
<TD width="2" bgcolor="#d4d6cf"></TD>
<TD height="30" width="45"><input type='checkbox'/></TD>
</TR>
<TR align="center" bgcolor="#f4f2f2">
<TD width="2" bgcolor="#d4d6cf"></TD>
<TD height="30" width="45"><input type='checkbox'/></TD>
</TR>
<TR align="center">
<TD width="2" bgcolor="#d4d6cf"></TD>
<TD height="30" width="45"><input type='checkbox'/></TD>
</TR>
<TR align="center" bgcolor="#f4f2f2">
<TD width="2" bgcolor="#d4d6cf"></TD>
<TD height="30" width="45"><input type='checkbox'/></TD>
</TR>
</TBODY>
</TABLE>
</DIV>
<!-- 真正的数据表格DIV,跟普通的table没区别 -->
<DIV style="WIDTH: 600px; HEIGHT: 400px;" class="tableData" id='MyTable_tableData'>
<DIV>
<TABLE style="width:2205;" border='0' cellSpacing='0' cellPadding='0'>
<tr><td height="2" colspan="2" bgcolor="#d4d6cf"></td></tr>
</TABLE>
</DIV>
<DIV>
<TABLE style="width:2205;" id='MyTable' border='0' cellSpacing='0' cellPadding='0'>
<TR align="center">
<td width="2" height="30" bgcolor="#d4d6cf"></td>
<td width="45" colspan="3" height="30"> </td>
<td width="4" height="30"></td>
<td width="55" colspan="3" class="sa">客户名</td>
<td width="4" height="30"></td>
<td width="55" colspan="3" class="sa">区域</td>
<td width="4" height="30"></td>
<td width="80" colspan="3" class="sa">商圈</td>
<td width="4" height="30"></td>
<td width="80" colspan="3" class="sa">业态</td>
<td width="4" height="30"></td>
<td width="80" colspan="3" class="sa">新品比例</td>
<td width="4" height="30"></td>
<td width="90" colspan="3" class="sa">顺销品牌比例</td>
<td width="4" height="30"></td>
<td width="90" colspan="3" class="sa">双低品牌比例</td>
<td width="4" height="30"></td>
<td width="90" colspan="3" class="sa">责任品牌比例</td>
<td width="4" height="30"></td>
<td width="90" colspan="3" class="sa">阶段性培育</td>
<td width="4" height="30"></td>
<td width="90" colspan="3" class="sa">店铺面积</td>
<td width="4" height="30"></td>
<td width="90" colspan="3" class="sa">经营卷烟面积</td>
<td width="4" height="30"></td>
<td width="90" colspan="3" class="sa">新品接受度</td>
<td width="4" height="30"></td>
<td width="90" colspan="3" class="sa">沟通行为特征</td>
<td width="4" height="30"></td>
<td width="90" colspan="3" class="sa">进货量</td>
<td width="4" height="30"></td>
<td width="90" colspan="3" class="sa">进货额</td>
<td width="4" height="30"></td>
<td width="90" colspan="3" class="sa">毛利</td>
<td width="4" height="30"></td>
<td width="90" colspan="3" class="sa">销售增长率</td>
<td width="4" height="30"></td>
<td width="90" colspan="3" class="sa">月均条均价</td>
<td width="4" height="30"></td>
<td width="90" colspan="3" class="sa">市场状态</td>
<td width="4" height="30"></td>
<td width="90" colspan="3" class="sa">诚信经营</td>
<td width="4" height="30"></td>
<td width="90" colspan="3" class="sa">明码标价</td>
<td width="4" height="30"></td>
<td width="90" colspan="3" class="sa">订货方式</td>
<td width="4" height="30"></td>
<td width="90" colspan="3" class="sa">徽映e家系统</td>
<td width="4" height="30"></td>
<td width="90" colspan="3" class="sa">优质终端</td>
<td width="2" height="30" ></td>
</TR>
<TR align="center" bgcolor="#f4f2f2">
<td width="2" height="30" bgcolor="#d4d6cf"></td>
<td width="45" colspan="3" height="30"> </td>
<td width="4" height="30"></td>
<td width="55" colspan="3" class="sa">客户名</td>
<td width="4" height="30"></td>
<td width="55" colspan="3" class="sa">区域</td>
<td width="4" height="30"></td>
<td width="80" colspan="3" class="sa">商圈</td>
<td width="4" height="30"></td>
<td width="80" colspan="3" class="sa">业态</td>
<td width="4" height="30"></td>
<td width="80" colspan="3" class="sa">新品比例</td>
<td width="4" height="30"></td>
<td width="90" colspan="3" class="sa">顺销品牌比例</td>
<td width="4" height="30"></td>
<td width="90" colspan="3" class="sa">双低品牌比例</td>
<td width="4" height="30"></td>
<td width="90" colspan="3" class="sa">责任品牌比例</td>
<td width="4" height="30"></td>
<td width="90" colspan="3" class="sa">阶段性培育</td>
<td width="4" height="30"></td>
<td width="90" colspan="3" class="sa">店铺面积</td>
<td width="4" height="30"></td>
<td width="90" colspan="3" class="sa">经营卷烟面积</td>
<td width="4" height="30"></td>
<td width="90" colspan="3" class="sa">新品接受度</td>
<td width="4" height="30"></td>
<td width="90" colspan="3" class="sa">沟通行为特征</td>
<td width="4" height="30"></td>
<td width="90" colspan="3" class="sa">进货量</td>
<td width="4" height="30"></td>
<td width="90" colspan="3" class="sa">进货额</td>
<td width="4" height="30"></td>
<td width="90" colspan="3" class="sa">毛利</td>
<td width="4" height="30"></td>
<td width="90" colspan="3" class="sa">销售增长率</td>
<td width="4" height="30"></td>
<td width="90" colspan="3" class="sa">月均条均价</td>
<td width="4" height="30"></td>
<td width="90" colspan="3" class="sa">市场状态</td>
<td width="4" height="30"></td>
<td width="90" colspan="3" class="sa">诚信经营</td>
<td width="4" height="30"></td>
<td width="90" colspan="3" class="sa">明码标价</td>
<td width="4" height="30"></td>
<td width="90" colspan="3" class="sa">订货方式</td>
<td width="4" height="30"></td>
<td width="90" colspan="3" class="sa">徽映e家系统</td>
<td width="4" height="30"></td>
<td width="90" colspan="3" class="sa">优质终端</td>
<td width="2" height="30"></td>
</TR>
</TABLE>
</DIV>
</DIV>
</DIV>
<a href="http://www.cnblogs.com/yangzhilong/p/3340130.html">转载请注明出处:http://www.cnblogs.com/yangzhilong/p/3340130.html</a>
<a href="http://www.cnblogs.com/sorex/archive/2011/06/30/2093499.html">参考出处:http://www.cnblogs.com/sorex/archive/2011/06/30/2093499.html</a> </BODY>
参考Bolg:http://www.cnblogs.com/sorex/archive/2011/06/30/2093499.html
实现锁死的有滚动条的div的表格(datagird)的更多相关文章
- div滚动条时div内容显示一半
本文为博主原创,未经允许不得转载 今天在做页面浏览器适配时,将页面中的一个div进行放大时,出现了滚动条,但滚动条对应div中的 内容只能显示一半. 仔细对应属性样式时,div具有overflow:h ...
- 2017.9.24 基于HTML+JavaScript+CSS的开发案例&&JavaScript+CSS+DIV实现表格变色
1.JavaScript+CSS+DIV实现下拉菜单 1.1 层标签<div> 基本语法: <div id="层编号" style="position: ...
- 自定义滚动条——控制div的大小和透明度
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px ...
- 关于ie6下拖动滚动条时,div抖动的问题解决
你如果遇到了这个问题,算是你有福了. 首先说非ie6下的div不随滚动条变化而移动位置的. 1,首先在body中写足够多的文字,一直到浏览器出现滚动条.例如你可以拼命的放P,足够多的P标签 2建立一个 ...
- div 加滚动条 超过div宽度 自动换行 div居中
一.div 中加滚动条 一. <div style=" overflow:scroll; width:400px; height:400px;”></div> 记住宽 ...
- div写表格，原生滚动条，数据能够自动滚动
如何让表格的滚动条能够自动滚动呢? html: <div class="tabinner5"> <div class="tab5 tab5a" ...
- 转: div:给div加滚动条 div的滚动条设置
div 的滚动条问题: 两种方法: 一. <div style=" overflow:scroll; width:400px; height:400px;”></div&g ...
- js控制div滚动条，滚动滚动条使div中的元素可见并居中
1.html代码如下 <div id="panel"> <div id="div1"></div> <div id=& ...
- jquery 让滚动条处于div底部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- C++ 模板的编译 以及 类模板内部的实例化
在C++中.编译器在看到模板的定义的时候.并不马上产生代码,仅仅有在看到用到模板时,比方调用了模板函数 或者 定义了类模板的 对象的时候.编译器才产生特定类型的代码. 一般而言,在调用函数的时候,仅仅 ...
- C#使用反射加载多个程序集
当开发插件的时候需要用到反射,在客户端动态加载遍历程序集,并调用每个程序集的方法. 创建一个控制台应用程序,首先设计一个接口: public interface ISay { void SaySth( ...
- CentOS6.5和RedHat6.5下以rpm方式安装mysql-5.6.20
转帖;http://blog.csdn.net/mw08091020/article/details/39234207 a.检查下linux是不是已经安装了mysql rpm -qa | grep - ...
- 转: 用 Go 写一个轻量级的 ldap 测试工具
前言 这是一个轮子. 作为一个在高校里混的 IT,LDAP 我们其实都蛮熟悉的,因为在高校中使用 LDAP 来做统一认证还蛮普遍的.对于 LDAP 的管理员而言,LDAP 的各种操作自然有产品对应的管 ...
- 郑捷2017年电子工业出版社出版的图书《NLP汉语自然语言处理原理与实践》
郑捷2017年电子工业出版社出版的图书<NLP汉语自然语言处理原理与实践> 第1章 中文语言的机器处理 1 1.1 历史回顾 2 1.1.1 从科幻到现实 2 1.1.2 早期的探索 3 ...
- Java:字符串类简单的正则表达式
class Test { public static void main(String[] args) { String str = "xia..as....yuan.com"; ...
- QT笔记:数据库总结(三)之SQL模型类-QSqlTableModel模型
QSqlTableModel类继承至QSqlQueryModel类,该类提供了一个可读写单张SQL表的可编辑数据模型,功能:修改,插入,删除,查询,和排序 常用函数 QVariant headerDa ...
- Keras Data augmentation(数据扩充)
在深度学习中,我们经常需要用到一些技巧(比如将图片进行旋转,翻转等)来进行data augmentation, 来减少过拟合. 在本文中,我们将主要介绍如何用深度学习框架keras来自动的进行data ...
- iOS开发-xCode代码托管到GitHub
xCode默认的是由源代码管理工作Git,Android Studio内置的也有,之前写过两篇关于Window托管Android代码到GitHub的文章,一直想写篇关于Mac上托管代码的到文章,今天终 ...
- jqGrid常用属性和方法介绍
jqGrid API中文手册:http://blog.mn886.net/jqGrid/ 一.jqGrid属性: width:Grid的宽度,如果未设置,则宽度应为所有列宽的之和:如果设置了宽度,则每 ...