您的位置:首页 > Web前端 > BootStrap

关于bootstrap中table的表格固定列

2017-10-10 15:57 387 查看
HTML:

<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()
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: