|
<html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/Scripts/jquery-1.10.2.min.js"></script> <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> <table class="tablecss" id="t1"> <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>[email protected]</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="43"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>结算审批4</td><td>jssp4</td><td>女 </td><td></td><td></td><td>[email protected]</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="42"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>结算审批3</td><td>jssp3</td><td>女 </td><td></td><td></td><td>[email protected]</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="41"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>结算审批2</td><td>jssp2</td><td>女 </td><td></td><td></td><td>[email protected]</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="40"><td class="cktd"><div><input type="checkbox" class="table_checkbox"></div></td><td>结算审批1</td><td>jssp1</td><td>女 </td><td></td><td></td><td>[email protected]</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="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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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 class="endtr22"><td colspan="10" class="endtd"><span class="bar_noprepage">上一页</span><span class="bar_currentpage">1</span><span class="bar_pages bar_skippage" topage="2">2</span><span class="bar_pages bar_skippage" topage="3">3</span><span class="bar_nextpage bar_skippage" topage="2">下一页</span><span>共<span class="bar_record">43</span>条数据 分<span class="bar_pagecount">3</span>页 </span> 每页显示<input type="text" value="20" class="bar_pageSize">条 当前为第<input type="text" value="1" class="bar_cur">页 <input type="button" value="跳至" class="bar_goto_btn"> </td></tr> </tbody> </table> </body> </html> <script> //调用 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 标题和左侧（完美）
时间： 2024-12-28 18:25:10
收集的冻结table 标题和左侧（完美）的相关文章
固定标题和左侧栏的表格初试
记得曾经做过一个公交查询系统的二期开发,其中一个模块要求固定标题和左侧栏,当时不知道是哪根筋抽了,一门心思想着position:fixed:在margin:0:padding0:还是可以用的,但是当margin和padding改变值以后就不能用了,以至于弄了一天都没弄出个啥,好在当时要求不高,还是勉强通过了技术总监的要求:现在想起来,从新做个测试,呀哈!居然很轻易的弄出来了.具体思路如下: 布局用三个div块实现,标题块,侧边栏块,内容块,块的内容用table表格实现 1.外部采用相对定位,内部
winform用ribbonControl后如何设置窗体标题在左侧显示？
用dotnetbar的ribbonControl后,窗体标题显示在正中间,一直习惯显示标题在左侧,感觉很别扭.怎么办呢? 操作方法,拖一个label到窗体,设置其Location:x=35,y=10.好了,再试下效果.
微信 小程序布局 标题之二分列表
<view class="commodity-zone"> <!-- 系列商品模板 --> <block class="zone-among" wx:key="teaamong" wx:for="{{teaamong}}" wx:for-index="index"> <!-- 控制显示与隐藏的外衣 --> <view wx:if="{{item
收集oracle统计信息
优化器统计范围: 表统计: --行数,块数,行平均长度:all_tables:NUM_ROWS,BLOCKS,AVG_ROW_LEN:列统计: --列中唯一值的数量(NDV),NULL值的数量,数据分布: --DBA_TAB_COLUMNS:NUM_DISTINCT,NUM_NULLS,HISTOGRAM:索引统计:--叶块数量,等级,聚簇因子: --DBA_INDEXES:LEAF_BLOCKS,CLUSTERING_FACTOR,BLEVEL:
没有完美的职业，只有适合的工作
作者:易仔阿克 时间:2014年8月17日 标题:没有完美的职业,只有适合的工作 从大学毕业到现在,从业年龄也大概有十五年了,在这十几年的职业生涯中,换过几家工作单位,尝试了不同的工作岗位,多年的职业经历告诉我:没有哪个岗位是完美的,只是心中追求完美而已. 在我三十岁之前,我的愿望就是希望能够多变换岗位和角色,趁着还有年龄优势多去尝试体会,免得在人生中留下遗憾.我也是按照这种想法去做的,虽然大部分工作还是信息化相关,但是还是从程序员.架构师.系统分析员换到售前咨询,从私企到外企感受到了不同
jquery固定表头或冻结表头的方法
html中经常遇到要把一个table的表头部分冻结,以便浏览时有更好的体验,百度完了大多数的网上解决方案,高级的bootstrap和angularjs中都没有清晰的解决方案,难道就我们中国人需要固定表头或者冻结table表头不成?其实自己写一个也没什么不可,eacherp中就有一个很方便的解决办法,一个函数而已,使用起来比较方便. javascript代码: <script> var container="#grid"; var url="abc.php"
ecshop后台根据条件查询后不填充table 返回的json数据，content为空？
做ecshop后台开发的时,根据条件查询后,利用ajax返回的content json数据内容为空,没有填充table 效果 预期效果 问题: make_json_result($smarty -> fetch('packages_list_info.htm'), '', array('filter' => $result['filter'], 'page_count' => $result['page_count'])); 问题出在 packages_list_info.htm页面里
ajax从服务器获取信息并拼接显示在table
1.页面代码 <body> <h1>显示所有员工信息</h1> <div> <table class="table"> @*标题*@ <thead> <tr> <th>账号</th> <th>真实姓名</th> <th>电话</th> <th>密码</th> <th>状态</th> &
干货阿里巴巴 开源软件列表
阿里的开源项目很多,这也跟@淘宝正明的开源态度密不可分.有很多重量级的项目,例如LVS.Tengine,或者很有实践价值的中间件,今天小编为大家汇总了阿里开源的项目,快来看看吧! 服务框架 Dubbo Dubbo 是阿里巴巴公司开源的一个高性能优秀的服务框架,使得应用可通过高性能的 RPC 实现服务的输出和输入功能,可以和 Spring框架无缝集成. JDBC连接池.监控组件 Druid Druid是一个JDBC组件,它包括三部分: 代理Driver,能够提供基于Filter-Chain模式的插