JS 組件系列之Bootstrap Table的凍結(jié)列功能徹底解決高度問(wèn)題
正文
前言:一年前,博主分享過(guò)一篇關(guān)于bootstrapTable組件凍結(jié)列的解決方案 JS組件系列——Bootstrap Table 凍結(jié)列功能IE瀏覽器兼容性問(wèn)題解決方案 ,通過(guò)該篇,確實(shí)可以實(shí)現(xiàn)bootstrapTable的凍結(jié)列效果,并且可以兼容ie瀏覽器。這一年的時(shí)間,不斷有園友以及群里面的朋友問(wèn)過(guò)我關(guān)于固定高度之后,凍結(jié)列頁(yè)面效果不能對(duì)齊的問(wèn)題,奈何博主太忙,一直沒(méi)有抽空將這個(gè)問(wèn)題優(yōu)化。最近項(xiàng)目里面也不斷有人提過(guò)這個(gè)bug,這下子不能再推了,必須要直面“慘淡的bug”,于是昨天利用一天的時(shí)間將原來(lái)的擴(kuò)展做了一下修改,能夠完美解決固定高度之后凍結(jié)列的問(wèn)題,并且,博主還加了一些特性,比如右側(cè)列的凍結(jié)、凍結(jié)列的選中等等,有需要的朋友可以捧個(gè)場(chǎng)。相信通過(guò)此篇,老板再也不用擔(dān)心我的凍結(jié)列不能固定高度了~~
一、問(wèn)題追蹤
記得在之前的那篇里面介紹過(guò),bootstrapTable組件自帶的凍結(jié)列擴(kuò)展,不能兼容ie瀏覽器,即使最新版本的ie也會(huì)無(wú)法使用,這是一般的系統(tǒng)不能忍受的,所以在那篇里面給出過(guò)解決方案,但并未分析ie瀏覽器不能兼容的原因,昨天博主花了點(diǎn)時(shí)間特意調(diào)試了下源碼,原來(lái)在ie里面,使用jquery的clone()方法和谷歌等瀏覽器有所區(qū)別。為了展示這個(gè)區(qū)別,這里先拋個(gè)磚。比如有如下代碼:
<table id="tbtest">
<tr><td>aaa</td><td>bbb</td><td>ccc</td></tr>
<tr><td>ddd</td><td>eee</td><td>fff</td></tr>
<tr><td>ggg</td><td>hhh</td><td>iii</td></tr>
</table>
<script type="text/javascript">
var $tr = $('#tbtest tr:eq(0)').clone();
var $tds = $tr.find('td');
$tr.html('');
alert($tds.eq(0).html());
</script>
代碼本身很簡(jiǎn)單,只是為了測(cè)試用??吹竭@里你可以試著猜一下alert的結(jié)果。
算了,不考大家了,直接貼出來(lái)吧,有圖有真相!


相信不用我過(guò)多的解釋哪個(gè)是ie,哪個(gè)是谷歌了吧。
兩者的區(qū)別很明顯,谷歌里面得到“aaa”,而ie里面得到空字符串。這是為什么呢?
其實(shí)如果你用值類(lèi)型和引用類(lèi)型的區(qū)別來(lái)解釋這個(gè)差別你就不難理解了,在谷歌瀏覽器里面,$tr變量是一個(gè)引用類(lèi)型,當(dāng)你清空了它里面的內(nèi)容,只是清除了$tr這個(gè)變量的“指針”,或者叫指向,$tds變量仍然指向了$tr的原始內(nèi)容,所以調(diào)用$tds.eq(0).html()的時(shí)候仍然能得到結(jié)果aaa;同樣的代碼在ie瀏覽器里面,$tr變量就是一個(gè)值類(lèi)型,你清空了它里面的內(nèi)容之后,$tds的內(nèi)容也被清空了。如果你有更好的解釋,歡迎賜教哈。
之所以組件原生的js不能兼容ie瀏覽器,就是因?yàn)樗褂昧薱lone()這個(gè)方法,導(dǎo)致在不同的瀏覽器看到不同的結(jié)果。相信bootstrapTable組件的作者應(yīng)該是知道這個(gè)區(qū)別的,只不過(guò)沒(méi)有太在意這些,從作者做的很多功能的兼容性能夠看出,他做的功能很多沒(méi)有太多的考慮ie瀏覽器的效果。
二、效果預(yù)覽
還是老規(guī)矩,說(shuō)了這個(gè)多,沒(méi)圖怎么行,小二,上圖!
沒(méi)有固定高度的情況:?jiǎn)瘟袃鼋Y(jié)。

多列凍結(jié)。

固定任意高度效果


ie瀏覽器也沒(méi)有問(wèn)題,這里就不再重復(fù)上圖了。
三、源碼解析
源碼沒(méi)啥說(shuō)的,有興趣可以自己看看,主要的原理還是重寫(xiě)bootstrapTable構(gòu)造器的事件,來(lái)達(dá)到想要的效果。
(function ($) {
'use strict';
$.extend($.fn.bootstrapTable.defaults, {
fixedColumns: false,
fixedNumber: 1
});
var BootstrapTable = $.fn.bootstrapTable.Constructor,
_initHeader = BootstrapTable.prototype.initHeader,
_initBody = BootstrapTable.prototype.initBody,
_resetView = BootstrapTable.prototype.resetView;
BootstrapTable.prototype.initFixedColumns = function () {
this.$fixedHeader = $([
'<div class="fixed-table-header-columns">',
'<table>',
'<thead></thead>',
'</table>',
'</div>'].join(''));
this.timeoutHeaderColumns_ = 0;
this.$fixedHeader.find('table').attr('class', this.$el.attr('class'));
this.$fixedHeaderColumns = this.$fixedHeader.find('thead');
this.$tableHeader.before(this.$fixedHeader);
this.$fixedBody = $([
'<div class="fixed-table-body-columns">',
'<table>',
'<tbody></tbody>',
'</table>',
'</div>'].join(''));
this.timeoutBodyColumns_ = 0;
this.$fixedBody.find('table').attr('class', this.$el.attr('class'));
this.$fixedBodyColumns = this.$fixedBody.find('tbody');
this.$tableBody.before(this.$fixedBody);
};
BootstrapTable.prototype.initHeader = function () {
_initHeader.apply(this, Array.prototype.slice.apply(arguments));
if (!this.options.fixedColumns) {
return;
}
this.initFixedColumns();
var that = this, $trs = this.$header.find('tr').clone();
$trs.each(function () {
$(this).find('th:gt(' + (that.options.fixedNumber - 1) + ')').remove();
});
this.$fixedHeaderColumns.html('').append($trs);
};
BootstrapTable.prototype.initBody = function () {
_initBody.apply(this, Array.prototype.slice.apply(arguments));
if (!this.options.fixedColumns) {
return;
}
var that = this,
rowspan = 0;
this.$fixedBodyColumns.html('');
this.$body.find('> tr[data-index]').each(function () {
var $tr = $(this).clone(),
$tds = $tr.find('td');
//$tr.html('');這樣存在一個(gè)兼容性問(wèn)題,在IE瀏覽器里面,清空tr,$tds的值也會(huì)被清空。
//$tr.html('');
var $newtr = $('<tr></tr>');
$newtr.attr('data-index', $tr.attr('data-index'));
$newtr.attr('data-uniqueid', $tr.attr('data-uniqueid'));
var end = that.options.fixedNumber;
if (rowspan > 0) {
--end;
--rowspan;
}
for (var i = 0; i < end; i++) {
$newtr.append($tds.eq(i).clone());
}
that.$fixedBodyColumns.append($newtr);
if ($tds.eq(0).attr('rowspan')) {
rowspan = $tds.eq(0).attr('rowspan') - 1;
}
});
};
BootstrapTable.prototype.resetView = function () {
_resetView.apply(this, Array.prototype.slice.apply(arguments));
if (!this.options.fixedColumns) {
return;
}
clearTimeout(this.timeoutHeaderColumns_);
this.timeoutHeaderColumns_ = setTimeout($.proxy(this.fitHeaderColumns, this), this.$el.is(':hidden') ? 100 : 0);
clearTimeout(this.timeoutBodyColumns_);
this.timeoutBodyColumns_ = setTimeout($.proxy(this.fitBodyColumns, this), this.$el.is(':hidden') ? 100 : 0);
};
BootstrapTable.prototype.fitHeaderColumns = function () {
var that = this,
visibleFields = this.getVisibleFields(),
headerWidth = 0;
this.$body.find('tr:first-child:not(.no-records-found) > *').each(function (i) {
var $this = $(this),
index = i;
if (i >= that.options.fixedNumber) {
return false;
}
if (that.options.detailView && !that.options.cardView) {
index = i - 1;
}
that.$fixedHeader.find('th[data-field="' + visibleFields[index] + '"]')
.find('.fht-cell').width($this.innerWidth());
headerWidth += $this.outerWidth();
});
this.$fixedHeader.width(headerWidth).show();
};
BootstrapTable.prototype.fitBodyColumns = function () {
var that = this,
top = -(parseInt(this.$el.css('margin-top'))),
// the fixed height should reduce the scorll-x height
height = this.$tableBody.height() - 18;
debugger;
if (!this.$body.find('> tr[data-index]').length) {
this.$fixedBody.hide();
return;
}
if (!this.options.height) {
top = this.$fixedHeader.height()- 1;
height = height - top;
}
this.$fixedBody.css({
width: this.$fixedHeader.width(),
height: height,
top: top + 1
}).show();
this.$body.find('> tr').each(function (i) {
that.$fixedBody.find('tr:eq(' + i + ')').height($(this).height() - 0.5);
var thattds = this;
debugger;
that.$fixedBody.find('tr:eq(' + i + ')').find('td').each(function (j) {
$(this).width($($(thattds).find('td')[j]).width() + 1);
});
});
// events
this.$tableBody.on('scroll', function () {
that.$fixedBody.find('table').css('top', -$(this).scrollTop());
});
this.$body.find('> tr[data-index]').off('hover').hover(function () {
var index = $(this).data('index');
that.$fixedBody.find('tr[data-index="' + index + '"]').addClass('hover');
}, function () {
var index = $(this).data('index');
that.$fixedBody.find('tr[data-index="' + index + '"]').removeClass('hover');
});
this.$fixedBody.find('tr[data-index]').off('hover').hover(function () {
var index = $(this).data('index');
that.$body.find('tr[data-index="' + index + '"]').addClass('hover');
}, function () {
var index = $(this).data('index');
that.$body.find('> tr[data-index="' + index + '"]').removeClass('hover');
});
};
})(jQuery);
.fixed-table-header-columns,
.fixed-table-body-columns {
position: absolute;
background-color: #fff;
display: none;
box-sizing: border-box;
overflow: hidden;
}
.fixed-table-header-columns .table,
.fixed-table-body-columns .table {
border-right: 1px solid #ddd;
}
.fixed-table-header-columns .table.table-no-bordered,
.fixed-table-body-columns .table.table-no-bordered {
border-right: 1px solid transparent;
}
.fixed-table-body-columns table {
position: absolute;
animation: none;
}
.bootstrap-table .table-hover > tbody > tr.hover > td {
background-color: #f5f5f5;
}
如何使用呢?這里博主單獨(dú)搞了一個(gè)靜態(tài)的html測(cè)試頁(yè),還是貼出來(lái)供大家參考。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<!--必須的css引用-->
<link href="Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="Content/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
<link href="Content/bootstrap-table/extensions/fixed-column/bootstrap-table-fixed-columns.css" rel="stylesheet" />
</head>
<body>
<div class="panel-body" style="padding-bottom:0px;">
<!--<div class="panel panel-default">
<div class="panel-heading">查詢條件</div>
<div class="panel-body">
<form id="formSearch" class="form-horizontal">
<div class="form-group" style="margin-top:15px">
<label class="control-label col-sm-1" for="name">員工姓名</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="name">
</div>
<label class="control-label col-sm-1" for="address">家庭住址</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="address">
</div>
<div class="col-sm-4" style="text-align:left;">
<button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary">查詢</button>
</div>
</div>
</form>
</div>
</div>-->
<div id="toolbar" class="btn-group">
<button id="btn_add" type="button" class="btn btn-success">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
</button>
</div>
<table id="tb_user"></table>
</div>
<!--新增或者編輯的彈出框-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">操作</h4>
</div>
<div class="modal-body">
<div class="row" style="padding:10px;">
<label class="control-label col-xs-2">姓名</label>
<div class="col-xs-10">
<input type="text" name="Name" class="form-control" placeholder="姓名">
</div>
</div>
<div class="row" style="padding:10px;">
<label class="control-label col-xs-2">年齡</label>
<div class="col-xs-10">
<input type="text" name="Age" class="form-control" placeholder="年齡">
</div>
</div>
<div class="row" style="padding:10px;">
<label class="control-label col-xs-2">學(xué)校</label>
<div class="col-xs-10">
<input type="text" name="School" class="form-control" placeholder="學(xué)校">
</div>
</div>
<div class="row" style="padding:10px;">
<label class="control-label col-xs-2">家庭住址</label>
<div class="col-xs-10">
<input type="text" name="Address" class="form-control" placeholder="學(xué)校">
</div>
</div>
<div class="row" style="padding:10px;">
<label class="control-label col-xs-2">備注</label>
<div class="col-xs-10">
<textarea class="form-control" placeholder="備注" name="Remark"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>關(guān)閉</button>
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存</button>
</div>
</div>
</div>
</div>
<!--必須的js文件-->
<script src="Content/jquery-1.9.1.min.js"></script>
<script src="Content/bootstrap/js/bootstrap.min.js"></script>
<script src="Content/bootstrap-table/bootstrap-table.min.js"></script>
<script src="Content/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="Content/bootstrap-table/extensions/fixed-column/bootstrap-table-fixed-columns.js"></script>
<script type="text/javascript">
//頁(yè)面加載完成之后
var data = [
{ Id: 1, Name: 'Jim', Age: 30, School: '光明小學(xué)', Address: '北京市光明小學(xué)旁', Remark: 'My Name is Jim Green' },
{ Id: 2, Name: 'Kate', Age: 30, School: '光明小學(xué)', Address: '深圳市', Remark: 'My Name is Jim Green' },
{ Id: 3, Name: 'Lucy', Age: 30, School: '光明小學(xué)', Address: '廣州天河機(jī)場(chǎng)', Remark: 'My Name is Jim Green' },
{ Id: 4, Name: 'Lilei', Age: 30, School: '光明小學(xué)', Address: '北京市光明小學(xué)旁', Remark: 'My Name is Jim Green' },
{ Id: 5, Name: 'Lintao', Age: 30, School: '光明小學(xué)', Address: '北京市光明小學(xué)旁', Remark: 'My Name is Jim Green' },
{ Id: 6, Name: 'Lily', Age: 30, School: '光明小學(xué)', Address: '北京市光明小學(xué)旁', Remark: 'My Name is Jim Green' },
{ Id: 7, Name: 'Hanmeimei', Age: 30, School: '光明小學(xué)', Address: '北京市光明小學(xué)旁', Remark: 'My Name is Jim Green' },
{ Id: 8, Name: '張三', Age: 46, School: '光明小學(xué)', Address: '北京市光明小學(xué)旁', Remark: 'My Name is Jim Green' },
{ Id: 9, Name: '李四', Age: 23, School: '光明小學(xué)', Address: '北京市光明小學(xué)旁', Remark: 'My Name is Jim Green' },
{ Id: 10, Name: '王五', Age: 33, School: '光明小學(xué)', Address: '北京市光明小學(xué)旁', Remark: 'My Name is Jim Green' },
{ Id: 11, Name: '趙六', Age: 22, School: '光明小學(xué)', Address: '北京市光明小學(xué)旁', Remark: 'My Name is Jim Green' },
{ Id: 12, Name: 'Polly', Age: 300, School: '光明小學(xué)', Address: '北京市光明小學(xué)旁', Remark: 'My Name is Jim Green' },
{ Id: 13, Name: 'Uncle', Age: 50, School: '光明小學(xué)', Address: '北京市光明小學(xué)旁', Remark: 'My Name is Jim Green' },
];
var childData = [
{ SourceField: 'A', BackField: 'BB' },
{ SourceField: 'CC', BackField: 'UU' },
{ SourceField: 'DD', BackField: 'J' },
];
$(function () {
//表格的初始化
$('#tb_user').bootstrapTable({
data: data, //直接從本地?cái)?shù)據(jù)初始化表格
method: 'get', //請(qǐng)求方式(*)
toolbar: '#toolbar', //工具按鈕用哪個(gè)容器
striped: true, //是否顯示行間隔色
cache: false, //是否使用緩存,默認(rèn)為true,所以一般情況下需要設(shè)置一下這個(gè)屬性(*)
pagination: true, //是否顯示分頁(yè)(*)
sortable: false, //是否啟用排序
sortOrder: "asc", //排序方式
queryParams: function (params) {
return params;
}, //傳遞參數(shù)(*)
sidePagination: "client", //分頁(yè)方式:client客戶端分頁(yè),server服務(wù)端分頁(yè)(*)
pageNumber: 1, //初始化加載第一頁(yè),默認(rèn)第一頁(yè)
pageSize: 5, //每頁(yè)的記錄行數(shù)(*)
pageList: [10, 25, 50, 100], //可供選擇的每頁(yè)的行數(shù)(*)
search: true, //是否顯示表格搜索,此搜索是客戶端搜索,不會(huì)進(jìn)服務(wù)端,所以,個(gè)人感覺(jué)意義不大
strictSearch: true,
showColumns: true, //是否顯示所有的列
showRefresh: true, //是否顯示刷新按鈕
minimumCountColumns: 2, //最少允許的列數(shù)
height:400,
selectItemName: 'parentItem',
fixedColumns: true,
fixedNumber: 6,
//注冊(cè)加載子表的事件。注意下這里的三個(gè)參數(shù)!
onExpandRow: function (index, row, $detail) {
InitSubTable(index, row, $detail);
},
columns: [{
checkbox: true
}, {
field: 'Name',
title: '姓名',
width:200
}, {
field: 'Age',
title: '年齡',
width:200
}, {
field: 'School',
title: '畢業(yè)院校',
width:200
}, {
field: 'Address',
title: '家庭住址',
width:100
}, {
field: 'Remark',
title: '備注',
width:100
},
{
field: 'Remark',
title: '備注',
width:100
}, {
field: 'Remark',
title: '備注',
width:100
}, {
field: 'Remark',
title: '備注',
width:100
}, {
field: 'Remark',
title: '備注',
width:100
}, {
field: 'Remark',
title: '備注',
width:100
},{
field: 'Remark',
title: '備注',
width:100
},{
field: 'Remark',
title: '備注',
width:100
},{
field: 'Remark',
title: '備注',
width:100
},{
field: 'Remark',
title: '備注',
width:100
},{
field: 'Remark',
title: '備注',
width:100
},{
field: 'Remark',
title: '備注',
width:100
},{
field: 'Remark',
title: '備注',
width:100
},{
field: 'Remark',
title: '備注',
width:100
},{
field: 'Remark',
title: '備注',
width:100
},{
field: 'Remark',
title: '備注',
width:100
},{
field: 'Remark',
title: '備注',
width:100
},{
field: 'Remark',
title: '備注',
width:100
},{
field: 'Remark',
title: '備注',
width:100
},{
field: 'Remark',
title: '備注',
width:100
},{
field: 'Remark',
title: '備注',
width:100
},{
field: 'Remark',
title: '備注',
width:100
},{
field: 'Remark',
title: '備注',
width:100
},{
field: 'Remark',
title: '備注',
width:100
},{
field: 'Remark',
title: '備注',
width:100
},{
field: 'Remark',
title: '備注',
width:100
},{
title: '操作',
width:200,
formatter: function (value, row, index) {//這里的三個(gè)參數(shù):value表示當(dāng)前行當(dāng)前列的值;row表示當(dāng)前行的數(shù)據(jù);index表示當(dāng)前行的索引(從0開(kāi)始)。
var html = '<button type="button" onclick="editModel('+row.Id+')" class="btn btn-primary"><span class="glyphicon glyphicon-pencil" aria- hidden="true" ></span >編輯</button > ' +
'<button type="button" onclick="deleteModel(' + row.Id + ')" class="btn btn-danger"><span class="glyphicon glyphicon-remove" aria- hidden="true" ></span >刪除</button >';
return html;
}
}],
onEditableSave: function (field, row, oldValue, $el) {
alert("更新保存事件,原始值為" + oldValue);
//$.ajax({
// type: "post",
// url: "/Editable/Edit",
// data: row,
// dataType: 'JSON',
// success: function (data, status) {
// if (status == "success") {
// alert('提交數(shù)據(jù)成功');
// }
// },
// error: function () {
// alert('編輯失敗');
// },
// complete: function () {
// }
//});
}
});
//新增事件
$("#btn_add").on('click', function () {
$('#tb_user').bootstrapTable("resetView");
//彈出模態(tài)框
$("#myModal").modal();
//給彈出框里面的各個(gè)文本框賦值
$("#myModal input").val("");
$("#myModal textarea").val("");
});
});
//加載子表
var InitSubTable = function (index, row, $detail) {
var parentid = row.MENU_ID;
var cur_table = $detail.html('<table></table>').find('table');
//子表的初始化和父表完全相同
$(cur_table).bootstrapTable({
//url: '/api/MenuApi/GetChildrenMenu',
data: childData,
method: 'get',
queryParams: { strParentID: parentid },
ajaxOptions: { strParentID: parentid },
clickToSelect: true,
uniqueId: "MENU_ID",
pageSize: 10,
pageList: [10, 25],
selectItemName: 'childItem'+index,
checkboxHeader:false,
columns: [{
checkbox: true
}, {
field: 'SourceField',
title: '源端字段'
}, {
field: 'BackField',
title: '備端字段'
}, {
field: 'BackField',
title: '備端字段'
}, {
field: 'BackField',
title: '備端字段'
}, {
field: 'BackField',
title: '備端字段'
}, {
field: 'BackField',
title: '備端字段'
}, {
field: 'BackField',
title: '備端字段'
}, {
field: 'BackField',
title: '備端字段'
}, {
field: 'BackField',
title: '備端字段'
}, {
field: 'BackField',
title: '備端字段'
}, {
field: 'BackField',
title: '備端字段'
}, {
field: 'BackField',
title: '備端字段'
}, {
field: 'BackField',
title: '備端字段'
}, {
field: 'BackField',
title: '備端字段'
}, {
field: 'BackField',
title: '備端字段'
}, {
field: 'BackField',
title: '備端字段'
}, {
field: 'BackField',
title: '備端字段'
}, {
field: 'BackField',
title: '備端字段'
}, {
field: 'BackField',
title: '備端字段'
}, {
field: 'BackField',
title: '備端字段'
}, {
field: 'BackField',
title: '備端字段'
}, {
field: 'BackField',
title: '備端字段'
}, {
field: 'BackField',
title: '備端字段'
}, {
field: 'BackField',
title: '備端字段'
}, {
field: 'BackField',
title: '備端字段'
}, {
field: 'BackField',
title: '備端字段'
}],
//無(wú)線循環(huán)取子表,直到子表里面沒(méi)有記錄
onExpandRow: function (index, row, $Subdetail) {
//oInit.InitSubTable(index, row, $Subdetail);
}
});
};
//編輯事件
var editModel = function (id) {
//根據(jù)當(dāng)前行的id獲取當(dāng)前的行數(shù)據(jù)
var row = $("#tb_user").bootstrapTable('getRowByUniqueId', id);
//彈出模態(tài)框
$("#myModal").modal();
//給彈出框里面的各個(gè)文本框賦值
$("#myModal input[name='Name']").val(row.Name);
$("#myModal input[name='Age']").val(row.Age);
$("#myModal input[name='School']").val(row.School);
$("#myModal input[name='Address']").val(row.Address);
$("#myModal textarea[name='Remark']").val(row.Remark);
}
//刪除事件
var deleteModel = function (id) {
alert("刪除id為" + id + "的用戶");
}
</script>
</body>
</html>
bootstrapTableFixColumns.html
代碼釋疑:

1、源碼各個(gè)方法解釋
- BootstrapTable.prototype.initFixedColumns :當(dāng)初始化的時(shí)候配置了fixedColumns: true時(shí)需要執(zhí)行的凍結(jié)列的方法。
- BootstrapTable.prototype.initHeader:重寫(xiě)組件的的初始化表頭的方法,加入凍結(jié)的表頭。
- BootstrapTable.prototype.initBody:重寫(xiě)組件的初始化表內(nèi)容的方法,加入凍結(jié)的表內(nèi)容。
- BootstrapTable.prototype.resetView:重寫(xiě)“父類(lèi)”的resetView方法,通過(guò)setTimeout去設(shè)置凍結(jié)的表頭和表體的寬度和高度。
- BootstrapTable.prototype.fitHeaderColumns:設(shè)置凍結(jié)列的表頭的寬高。
- BootstrapTable.prototype.fitBodyColumns :設(shè)置凍結(jié)列的表體的寬高,以及滾動(dòng)條和主體表格的滾動(dòng)條同步。
2、對(duì)于上述拋出的ie和谷歌的兼容性問(wèn)題的解析
查看BootstrapTable.prototype.initBody方法,你會(huì)發(fā)現(xiàn)里面寫(xiě)有部分注釋。
this.$body.find('> tr[data-index]').each(function () {
var $tr = $(this).clone(),
$tds = $tr.find('td');
//$tr.html('');這樣存在一個(gè)兼容性問(wèn)題,在IE瀏覽器里面,清空tr,$tds的值也會(huì)被清空。
//$tr.html('');
var $newtr = $('<tr></tr>');
$newtr.attr('data-index', $tr.attr('data-index'));
$newtr.attr('data-uniqueid', $tr.attr('data-uniqueid'));
var end = that.options.fixedNumber;
if (rowspan > 0) {
--end;
--rowspan;
}
for (var i = 0; i < end; i++) {
$newtr.append($tds.eq(i).clone());
}
that.$fixedBodyColumns.append($newtr);
if ($tds.eq(0).attr('rowspan')) {
rowspan = $tds.eq(0).attr('rowspan') - 1;
}
});
這一段做了部分修改,有興趣可以調(diào)適細(xì)看。
3、項(xiàng)目中的使用
最近在研究學(xué)習(xí)abp的相關(guān)源碼,將bootstrapTable融入abp里面去了,貼出表格凍結(jié)的一些效果圖。


4、擴(kuò)展
除此之外,還特意做了右邊操作列的凍結(jié)。

和左邊列的凍結(jié)一樣,最右邊列的凍結(jié)也是可以做的,最不同的地方莫過(guò)于右邊列有一些操作按鈕,如果在點(diǎn)擊凍結(jié)列上面的按鈕時(shí)觸發(fā)實(shí)際表格的按鈕事件是難點(diǎn)。如果有這個(gè)需求,可以看看。
bootstrap-table-fixed-columns.js bootstrap-table-fixed-columns.css
需要說(shuō)明的是,由于時(shí)間問(wèn)題,右側(cè)固定列的代碼和上述解決高度的代碼并未合并,所以如果你既想要解決凍結(jié)列的高度,又想要右側(cè)列的凍結(jié),需要自己花點(diǎn)時(shí)間合并下代碼。
以上所述是小編給大家介紹的JS 組件系列之Bootstrap Table的凍結(jié)列功能徹底解決高度問(wèn)題,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- bootstrap-table.js擴(kuò)展分頁(yè)工具欄(增加跳轉(zhuǎn)到xx頁(yè))功能
- AngularJS tab欄實(shí)現(xiàn)和mvc小案例實(shí)例詳解
- 使用ReactJS實(shí)現(xiàn)tab頁(yè)切換、菜單欄切換、手風(fēng)琴切換和進(jìn)度條效果
- Extjs 3.3切換tab隱藏相應(yīng)工具欄出現(xiàn)空白解決
- JS實(shí)現(xiàn)table表格固定表頭且表頭隨橫向滾動(dòng)而滾動(dòng)
- js實(shí)現(xiàn)Tab選項(xiàng)卡切換效果
- 使用vue.js寫(xiě)一個(gè)tab選項(xiàng)卡效果
- js tab欄切換代碼實(shí)例解析
相關(guān)文章
Javascript 更新 JavaScript 數(shù)組的 uniq 方法
2008-01-01
jscript之Open an Excel Spreadsheet
jscript之Open an Excel Spreadsheet...2007-06-06
使用reflect-metadata實(shí)現(xiàn)數(shù)據(jù)校驗(yàn)與日志記錄
在?TypeScript?生態(tài)系統(tǒng)中,reflect-metadata?庫(kù)是一種強(qiáng)大的工具,它允許我們?cè)谶\(yùn)行時(shí)獲取更多的類(lèi)型信息,下面我們來(lái)看看如何在前端項(xiàng)目中使用reflect-metadata以及它能實(shí)現(xiàn)的能力吧2024-12-12
JavaScript地圖拖動(dòng)功能SpryMap的簡(jiǎn)單實(shí)現(xiàn)
SpryMap是一個(gè)獨(dú)立的并且是輕量級(jí)的JavaScript類(lèi)庫(kù),它不依賴于任何其他的JS框架2013-07-07
JavaScript詞法作用域與調(diào)用對(duì)象深入理解
關(guān)于 Javascript 的函數(shù)作用域、調(diào)用對(duì)象和閉包之間的關(guān)系很微妙,關(guān)于它們的文章已經(jīng)有很多,本文做了一些總結(jié),需要的朋友可以參考下2012-11-11
Javascript面試經(jīng)典套路reduce函數(shù)查重
reduce函數(shù),是ECMAScript5規(guī)范中出現(xiàn)的數(shù)組方法.下面通過(guò)本文給大家分享Javascript面試經(jīng)典套路reduce函數(shù)查重,需要的朋友參考下吧2017-03-03
BootStrap Table 設(shè)置height表頭與內(nèi)容無(wú)法對(duì)齊的問(wèn)題
這篇文章主要介紹了BootStrap Table 設(shè)置height表頭與內(nèi)容無(wú)法對(duì)齊的問(wèn)題,需要的朋友可以參考下2016-12-12
JavaScript的DOM與BOM的區(qū)別與用法詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript的DOM與BOM的區(qū)別與用法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助2022-03-03
?javascript數(shù)組中的slice方法和join??方法
這篇文章主要介紹了?javascript數(shù)組中的slice方法和join??方法,文章內(nèi)容介紹詳細(xì),具有一的參考價(jià)值,需要的小伙伴可以參考一下,希望對(duì)你的學(xué)習(xí)有所幫助2022-03-03

