关于bootstrap中table的表格固定列
2017-10-10 15:57
387 查看
HTML:
JS功能扩展:
<div class="table-responsive"> <table id="fixedTable" class="table table-striped table-bordered table-hover dataTables-example table-condensed table-responsive" style=" white-space:nowrap;"> <thead> <tr> <th>订单编号</th> <th>业务类型</th> <th>客户来源</th> <th>楼盘所属区域</th> <th>楼盘名称</th> <th>签约阶段/签约时间</th> <th>签约客户姓名</th> <th>签约房间号</th> <th>合同主体</th> <th>战报类型</th> <th>上战报月份</th> <th>审批状态</th> <th>申请人</th> <th>交件时间</th> <th>审批人</th> <th>审批时间</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>客户订单号客户订单号客户订单号客户订单号</td> <td>业务类型客户订单号</td> <td>客户来源</td> <td></td> <td>楼盘名称</td> <td>草签/签约时间</td> <td>签约客户姓名</td> <td>1栋2单元101室</td> <td>战报类型</td> <td>战报月份</td> <td>审批状态</td> <td>申请人</td> <td>交接时间</td> <td>审批人</td> <td>审批时间</td> <td>2019-09-09</td> <td class="text-left"> <a class="btn btn-outline btn-success btn-xs" href="mentioned查看战报详情.html">详情</a> <button type="button" class="btn btn-outline btn-success btn-xs chargeback" data-node="#node#">退单</button> <button type="button" class="btn btn-outline btn-success btn-xs" data-node="#node#">转权责</button> <button type="button" class="btn btn-outline btn-warning btn-xs modify_name" data-node="#node#">修改客户姓名</button> <button type="button" class="btn btn-outline btn-warning btn-xs modify_room" data-node="#node#">修改签约房间号</button> </td> </tr> </tbody> </table> </div>
JS功能扩展:
$.fn.extend({ fixedTable:function(option){ var fixedCell=option.fixedCell||0; var fixedType=option.fixedType||'left'; var $table=$(this).clone(true); var fixedCellTheadList=getFixedCellThead($(this),fixedCell,fixedType); var fixedCellTbodyList=getFixedCellTbody($(this),fixedCell,fixedType); setFixedCell($table,fixedCellTheadList.fixedCellList,fixedCellTbodyList); $(this).parent().css({ "width":Number($(this).parent().width())-Number(fixedCellTheadList.fixedCellWidth)+"px", "position":"relative", "top":"0" }); $(this).parent().parent().css("position","relative"); $table.attr("id",$table.attr("id")+"_fixed"); $table.css({ "width":fixedCellTheadList.fixedCellWidth+"px", "position":"absolute", "top":0 }) if(fixedType=='left'){ $table.css("left","0"); $(this).parent().css("left",fixedCellTheadList.fixedCellWidth); }else{ $table.css("right","0"); $(this).parent().css("left","0"); } $(this).parent().parent().append($table); function setFixedCell($ele,fixedCellTheadList,fixedCellTbodyList){ $ele.find("thead").html(fixedCellTheadList); $ele.find("tbody").html(fixedCellTbodyList.join("")); } function getFixedCellThead($ele,fixedCell,fixedType){ var ret={}; var needArr=[]; var width=0; var needLength=$ele.find("th").length; if(fixedType=="left"){ for(var i=0;i<fixedCell;i++){ needArr.push($ele.find("th").eq(i).clone(true)[0].outerHTML); width+=$ele.find("th").eq(i).width()+ parseInt($ele.find("th").eq(i).css("padding-left"))+ parseInt($ele.find("th").eq(i).css("padding-right"))+ parseInt($ele.find("th").eq(i).css("border-left"))+ parseInt($ele.find("th").eq(i).css("border-right")); $ele.find("th").eq(i).remove(); } }else{ for(var i=needLength-fixedCell;i<needLength;i++){ needArr.push($ele.find("th").eq(i).clone(true)[0].outerHTML); width+=$ele.find("th").eq(i).width(); $ele.find("th").eq(i).remove(); } } ret.fixedCellList="<tr>"+needArr.join("")+"</tr>"; ret.fixedCellWidth=width; return ret; } function getFixedCellTbody($ele,fixedCell,fixedType){ var needArr=[]; var needLength=$ele.find("th").length+fixedCell; var needTr=$ele.find("tbody").children("tr"); var needTrLength=needTr.length; for(var k=0;k<needTrLength;k++){ var $needTdArr=$(needTr[k]).children("td"); if(fixedType=="left"){ var nowTr=[]; for(var i=0;i<fixedCell;i++){ nowTr.push($needTdArr.eq(i).clone(true)[0].outerHTML); $needTdArr.eq(i).remove(); } needArr.push("<tr>"+nowTr.join("")+"</tr>"); }else{ var nowTr=[]; for(var i=needLength-fixedCell;i<needLength;i++){ nowTr.push($needTdArr.eq(i).clone(true)[0].outerHTML); $needTdArr.eq(i).remove(); } needArr.push("<tr>"+nowTr.join("")+"</tr>"); } } return needArr; } } }); 引用方式: $("#fixedTable").fixedTable({ fixedCell:1, fixedType:"right", }); // 当表格出现宽度超出屏幕的时候再固定最后一列 if( $("#fixedTable").width() > $(".table-responsive").width()){ $("#fixedTable").fixedTable({ fixedCell:1, fixedType:"right", }); } 而且在窗口改变的时候这个代码不生效,需要做个window.onresize()
相关文章推荐
- 关于Bootstrap Table使用生成冻结窗格的表格
- 关于bootstrap--表格(table的各种样式)
- 好用的自适应表格插件-bootstrap table (支持固定表头)
- JS表格组件神器bootstrap table详解(强化版)
- JS组件系列——表格组件神器:bootstrap table
- Bootstrap3基础 table-responsive 响应式表格
- bootstrap-table表格插件之服务器端分页实例
- 关于BootStrap Table
- bootstrap 表格插件bootstrap-table的js设置高度及高度自适应
- asp.net table表格表头及列固定实现
- bootstrap-table对前台页面表格的支持
- JS组件系列——表格组件神器:bootstrap table(二:父子表和行列调序)
- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理
- JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)
- 关于table表格 td里内容较多换行的处理方法
- JS组件系列——表格组件神器:bootstrap table
- Bootstrap关于表格
- 表格组件神器:bootstrap table详细使用指南
- bootstrap table th内容太多表格撑破(自动换行)
- JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)