收集的冻结table 标题和左侧（完美）

<html>

<head>

<title>Index</title>

<style>

.tablecss td {

word-break: break-all;

word-wrap: break-word;

border: 1px solid #d0b5b5;

padding: 5px;

}

.tablecss {

border-collapse: collapse;

}

.table_title td {

text-align: center;

font-size: large;

color: black;

}

</style>

</head>

<body>

<tbody>

<tr class="table_title primaryTr001"><td class="cktd"><div style="width:130px"><input type="checkbox" value="" class="table_checkbox_all"></div></td><td><div style="width:130px">真实姓名</div></td><td><div style="width:130px">登录名<span class="glyphicon glyphicon-circle-arrow-down"></span></div></td><td><div style="width:130px">性别</div></td><td><div style="width:130px">出生日期</div></td><td><div style="width:130px">联系方式</div></td><td><div style="width:130px">邮箱</div></td><td><div style="width:130px">是否管理员</div></td><td><div style="width:300px">其他说明</div></td><td><div style="width:220px">操作</div></td></tr>

<tr sid="44"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>结算审批5</td><td>jssp5</td><td></td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>结算审批asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="分配/查看角色"></td></tr>

<tr sid="39"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>业务单审批5</td><td>ywdsp5</td><td>女 </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>业务单审批</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="分配/查看角色"></td></tr>

<tr sid="38"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>业务单审批4</td><td>ywdsp4</td><td>女 </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>业务单审批</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="分配/查看角色"></td></tr>

<tr sid="37"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>业务单审批3</td><td>ywdsp3</td><td>女 </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>业务单审批</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="分配/查看角色"></td></tr>

<tr sid="36"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>业务单审批2</td><td>ywdsp2</td><td>女 </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>业务单审批</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="分配/查看角色"></td></tr>

<tr sid="35"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>业务单审批1</td><td>ywdsp1</td><td>女 </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>业务单审批</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="分配/查看角色"></td></tr>

<tr sid="34"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>小猪4</td><td>xiaozhu4</td><td>女 </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>销售助理</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="分配/查看角色"></td></tr>

<tr sid="33"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>小猪3</td><td>xiaozhu3</td><td>女 </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>销售助理</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="分配/查看角色"></td></tr>

<tr sid="32"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>小猪2</td><td>xiaozhu2</td><td>女 </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>销售助理</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="分配/查看角色"></td></tr>

<tr sid="31"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>小猪1</td><td>xiaozhu1</td><td>女 </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>销售助理</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="分配/查看角色"></td></tr>

<tr sid="30"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>销售20</td><td>xiaoshou20</td><td>女 </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>销售</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="分配/查看角色"></td></tr>

<tr sid="29"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>销售19</td><td>xiaoshou19</td><td>女 </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>销售</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="分配/查看角色"></td></tr>

<tr sid="28"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>销售18</td><td>xiaoshou18</td><td>女 </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>销售</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="分配/查看角色"></td></tr>

<tr sid="27"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>销售17</td><td>xiaoshou17</td><td>女 </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>销售</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="分配/查看角色"></td></tr>

<tr sid="26"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>销售16</td><td>xiaoshou16</td><td>女 </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>销售</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="分配/查看角色"></td></tr>

<tr sid="25"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>销售15</td><td>xiaoshou15</td><td>女 </td><td></td><td></td><td>32432@qq.cm</td><td>前台用户</td><td>销售</td><td class="oper_td"><input type="button" class="btn btn-xs btn-default rowDelete" value="删除"><input type="button" class="btn btn-xs btn-primary rowEdit" value="编辑"><input type="button" class="btn btn-xs btn-info rowAsign" value="分配/查看角色"></td></tr>

</tbody>

</table>

</body>

</html>

//调用

freezeTable("t1", 1, 1, 800, 400);

* 锁定表头和列

* 参数定义

* table - 要锁定的表格元素或者表格ID

* freezeRowNum - 要锁定的前几行行数，如果行不锁定，则设置为0

* freezeColumnNum - 要锁定的前几列列数，如果列不锁定，则设置为0

* width - 表格的滚动区域宽度

* height - 表格的滚动区域高度

function freezeTable(table, freezeRowNum, freezeColumnNum, width, height) {

if (typeof (freezeRowNum) == 'string')

freezeRowNum = parseInt(freezeRowNum)

if (typeof (freezeColumnNum) == 'string')

freezeColumnNum = parseInt(freezeColumnNum)

var tableId;

if (typeof (table) == 'string') {

tableId = table;

table = $('#' + tableId);

} else

tableId = table.attr('id');

var divTableLayout = $("#" + tableId + "_tableLayout");

if (divTableLayout.length != 0) {

divTableLayout.before(table);

divTableLayout.empty();

} else {

table.after("<div id='" + tableId + "_tableLayout' style='overflow:hidden;height:" + height + "px; width:" + width + "px;'></div>");

divTableLayout = $("#" + tableId + "_tableLayout");

}

var html = '';

if (freezeRowNum > 0 && freezeColumnNum > 0)

html += '<div id="' + tableId + '_tableFix" style="padding: 0px;"></div>';

if (freezeRowNum > 0)

html += '<div id="' + tableId + '_tableHead" style="padding: 0px;"></div>';

if (freezeColumnNum > 0)

html += '<div id="' + tableId + '_tableColumn" style="padding: 0px;"></div>';

html += '<div id="' + tableId + '_tableData" style="padding: 0px;"></div>';

$(html).appendTo("#" + tableId + "_tableLayout");

var divTableFix = freezeRowNum > 0 && freezeColumnNum > 0 ? $("#" + tableId + "_tableFix") : null;

var divTableHead = freezeRowNum > 0 ? $("#" + tableId + "_tableHead") : null;

var divTableColumn = freezeColumnNum > 0 ? $("#" + tableId + "_tableColumn") : null;

var divTableData = $("#" + tableId + "_tableData");

divTableData.append(table);

if (divTableFix != null) {

var tableFixClone = table.clone(true);

tableFixClone.attr("id", tableId + "_tableFixClone");

divTableFix.append(tableFixClone);

}

if (divTableHead != null) {

var tableHeadClone = table.clone(true);

tableHeadClone.attr("id", tableId + "_tableHeadClone");

divTableHead.append(tableHeadClone);

}

if (divTableColumn != null) {

var tableColumnClone = table.clone(true);

tableColumnClone.attr("id", tableId + "_tableColumnClone");

divTableColumn.append(tableColumnClone);

}

$("#" + tableId + "_tableLayout table").css("margin", "0");

if (freezeRowNum > 0) {

var HeadHeight = 0;

var ignoreRowNum = 0;

$("#" + tableId + "_tableHead tr:lt(" + freezeRowNum + ")").each(function () {

if (ignoreRowNum > 0)

ignoreRowNum--;

else {

var td = $(this).find('td:first, th:first');

HeadHeight += td.outerHeight(true);

ignoreRowNum = td.attr('rowSpan');

if (typeof (ignoreRowNum) == 'undefined')

ignoreRowNum = 0;

else

ignoreRowNum = parseInt(ignoreRowNum) - 1;

}

});

HeadHeight += 2;

divTableHead.css("height", HeadHeight);

divTableFix != null && divTableFix.css("height", HeadHeight);

}

if (freezeColumnNum > 0) {

var ColumnsWidth = 0;

var ColumnsNumber = 0;

$("#" + tableId + "_tableColumn tr:eq(" + freezeRowNum + ")").find("td:lt(" + freezeColumnNum + "), th:lt(" + freezeColumnNum + ")").each(function () {

if (ColumnsNumber >= freezeColumnNum)

return;

ColumnsWidth += $(this).outerWidth(true);

ColumnsNumber += $(this).attr('colSpan') ? parseInt($(this).attr('colSpan')) : 1;

});

ColumnsWidth += 2;

divTableColumn.css("width", ColumnsWidth);

divTableFix != null && divTableFix.css("width", ColumnsWidth);

}

divTableData.scroll(function () {

divTableHead != null && divTableHead.scrollLeft(divTableData.scrollLeft());

divTableColumn != null && divTableColumn.scrollTop(divTableData.scrollTop());

});

divTableFix != null && divTableFix.css({ "overflow": "hidden", "position": "absolute", "z-index": "50" });

divTableHead != null && divTableHead.css({ "overflow": "hidden", "width": width - 17, "position": "absolute", "z-index": "45" });

divTableColumn != null && divTableColumn.css({ "overflow": "hidden", "height": height - 17, "position": "absolute", "z-index": "40" });

divTableData.css({ "overflow": "scroll", "width": width, "height": height, "position": "absolute" });

divTableFix != null && divTableFix.offset(divTableLayout.offset());

divTableHead != null && divTableHead.offset(divTableLayout.offset());

divTableColumn != null && divTableColumn.offset(divTableLayout.offset());

divTableData.offset(divTableLayout.offset());

}

* 调整锁定表的宽度和高度，这个函数在resize事件中调用

* 参数定义

* table - 要锁定的表格元素或者表格ID

* width - 表格的滚动区域宽度

* height - 表格的滚动区域高度

function adjustTableSize(table, width, height) {

var tableId;

if (typeof (table) == 'string')

tableId = table;

else

tableId = table.attr('id');

$("#" + tableId + "_tableLayout").width(width).height(height);

$("#" + tableId + "_tableHead").width(width - 17);

$("#" + tableId + "_tableColumn").height(height - 17);

$("#" + tableId + "_tableData").width(width).height(height);

}

function pageHeight() {

if ($.browser.msie) {

return document.compatMode == "CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight;

} else {

return self.innerHeight;

}

};

//返回当前页面宽度

function pageWidth() {

if ($.browser.msie) {

return document.compatMode == "CSS1Compat" ? document.documentElement.clientWidth : document.body.clientWidth;

} else {

return self.innerWidth;

}

};

</script>

收集的冻结table 标题和左侧（完美）的更多相关文章

Table标题行冻结，数据行滚动的一种方式
这段时间在做Table标题行冻结,数据行滚动,虽然能实现,但也遇到一些问题,记录下来. 首先说说实现,实现其实不难,估计很多人都能想象出来,那就是标题行与内容行分离.我是这么做的,用两个表格,一个只有 ...
bootstrap table 标题列重复
使用bootstrap table生成表格,出现一个奇怪问题,标题列重复.查了一大堆资料,没有找到可以解决问题的. 以为是类库版本的问题,全部替换成了example中的引用,还是这个问题. 后来仔细查 ...
ABAP 内表(internal table) 标题行(header line) 工作区(work area) 简介 - [SAP]
刚开始学ABAP的时候,学到iternal table时,感觉一阵混乱.搞不清楚什么是work area,什么是header line,以及occurs是干什么用的.今天终于差不多搞明白了(我还是太弱 ...
Jquery 实现table标题点击复制整列td内容到剪贴板
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
js Table冻结表头示例代码
Table冻结表头的js实现代码. Table冻结表头: <script type="text/javascript"> //冻结table的表头 function ...
office2010如何使用excel冻结窗格
当我们在制作一个Excel表格时,如果列数较多,行数也较多时,一旦向下滚屏,则上面的标题行也跟着滚动,在处理数据时往往难以分清各列数据对应的标题,事实上利用"冻结窗格"功能可以很好 ...
MarkDown+LaTex 数学内容编辑样例收集
$\color{green}{MarkDown+LaTex 数学内容编辑样例收集}$ 1.大小标题的居中,大小,颜色 [例1] $\color{Blue}{一元二次方程根的分布}$ $\color{R ...
收集oracle统计信息
优化器统计范围: 表统计: --行数,块数,行平均长度:all_tables:NUM_ROWS,BLOCKS,AVG_ROW_LEN:列统计: --列中唯一值的数量(NDV),NULL值的数量,数据分 ...
ecshop后台根据条件查询后不填充table 返回的json数据，content为空？
做ecshop后台开发的时,根据条件查询后,利用ajax返回的content json数据内容为空,没有填充table 效果预期效果问题: make_json_result($smarty -&g ...

随机推荐

Linux设备模型学习总结
看LDD3中设备模型一章,觉得思维有些混乱.这里从整体的角度来理理思路.本文从四个方面来总结一些内容: 1.底层数据结构:kobject,kset.2.linux设备模型层次关系:bus_type,d ...
JS 中 this 关键字详解
本文主要解释在JS里面this关键字的指向问题(在浏览器环境下). 首先,必须搞清楚在JS里面,函数的几种调用方式: 普通函数调用作为方法来调用作为构造函数来调用使用apply/call方法来调 ...
SVN创建Tags
右键trunk,选择分支/标记... 资源库,到URL:要创建Tag的位置 Next Next ...
Android窗口跳转
1.原始界面 package com.fish.helloworld; import android.app.Activity; import android.content.Intent; impo ...
android版猜拳游戏源码分享
android版猜拳游戏源码分享安卓版猜拳游戏源码,该文件中带有安装测试包的,这个游戏源码比较简单的,现在有两个代码,一个自定义VIEW的,一个就是普通的imageView图片,游戏非常适合一些新手的 ...
MyEclipse中使用debug调试程序
最基本的操作是: 1.首先在一个java文件中设断点,然后debug as-->open debug Dialog,然后在对话框中选类后--> Run 当程序走到断 ...
DPDK内存管理-----（三）rte_malloc内存管理
rte_malloc()为程序运行过程中分配内存,模拟从堆中动态分配内存空间. void * rte_malloc(const char *type, size_t size, unsigned al ...
兼容firefox的iframe高度自适应代码
网上关于iframe高度自适应的代码有很多,但比较杂乱,本文根据实用性整理了以下代码: JavaScript部分: 折叠JavaScript Code复制内容到剪贴板 <script type= ...
win7防火墙打不开(无法启动windows firewall服务)
点击windows 7控制面板中防火墙的“推荐配置”没有反应:打开“服务”,无法启动windows firewall,并报错. 可能很多的win7用户都碰到过这样的一种情况,那就是win7的防火墙打 ...
Windows API 的数据类型与 Delphi 数据类型对照表
Windows 数据类型 Delphi 数据类型描述 LPSTR PAnsiChar 字符串指针 LPCSTR PAnsiChar 字符串指针 DWORD LongWord 整数 BOOL Long ...

收集的冻结table 标题和左侧（完美）

收集的冻结table 标题和左侧（完美）的更多相关文章

随机推荐

热门专题