收集的冻结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 ...

随机推荐

Heavily reliance on forensic tools is risky
We could take advantage of forensic tools to examine and analyze the evidence, but heavily reliance ...
leetcode 67
67. Add Binary Given two binary strings, return their sum (also a binary string). For example,a = &q ...
URL重写以后发布到IIS找不到页面
1.读取必须勾选,否则无法加载资源文件(img,css等) c:\windows\microsoft.net\framework\v2.0.50727\aspnet_isapi.dll
条款20 STL函数对象
继承标准STL的函数对象 1: struct PopLess : public atd::binary_function<state,state,bool> 2: { 3: bool op ...
ie使用firebug
在网页插入以下代码即可. <script type="text/javascript" src="http://getfirebug.com/releases/li ...
理解 JavaScript Scoping & Hoisting（二）
理解 JavaScript Scoping & Hoisting(二) 转自:http://www.jb51.net/article/75090.htm 这篇文章主要介绍了理解 JavaScr ...
在Nginx 下运行 Laravel5.1 的配置
一.nginx 的 vhost.conf 配置: server { listen ; server_name sub.domain.com; set $root_path '/srv/www/defa ...
leetCode刷题记录
(1)Linked List Cycle Total Accepted: 13297 Total Submissions: 38411 Given a linked list, determine i ...
String类的比较
//strcmp只能运用于数组的比较 //string类可以用成员函数compare() //即a.compare(b) //例如 "; "; a.compare(b)返回值= & ...
计算系数（codevs 1137) 题解
[问题描述] 给定一个多项式(ax + by)^k,给定a.b.k.n.m,请求出多项式展开后x^n y^m项的系数. [样例输入] 1 1 3 1 2 [样例输出] 3 [解题思路] 本题为NOIP ...

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

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

随机推荐

热门专题