zhangsiqi
9 months ago
8 changed files with 3633 additions and 0 deletions
@ -0,0 +1,40 @@ |
|||
.fixed-table-container thead th .th-inner, .fixed-table-container tbody td .th-inner { |
|||
line-height: 18px; |
|||
} |
|||
|
|||
.fixed-table-pagination .pagination a { |
|||
padding: 5px 10px; |
|||
} |
|||
|
|||
.fixed-table-toolbar .bars, .fixed-table-toolbar .search, .fixed-table-toolbar .columns { |
|||
margin-top: 5px; |
|||
margin-bottom: 5px; |
|||
} |
|||
|
|||
.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; |
|||
} |
|||
@ -0,0 +1,306 @@ |
|||
/** |
|||
* @author zhixin wen <wenzhixin2010@gmail.com> |
|||
* version: 1.11.0 |
|||
* https://github.com/wenzhixin/bootstrap-table/ |
|||
*/ |
|||
|
|||
.bootstrap-table .table { |
|||
margin-bottom: 0 !important; |
|||
border-bottom: 1px solid #dddddd; |
|||
border-collapse: collapse !important; |
|||
border-radius: 1px; |
|||
} |
|||
|
|||
.bootstrap-table .table:not(.table-condensed), |
|||
.bootstrap-table .table:not(.table-condensed) > tbody > tr > th, |
|||
.bootstrap-table .table:not(.table-condensed) > tfoot > tr > th, |
|||
.bootstrap-table .table:not(.table-condensed) > thead > tr > td, |
|||
.bootstrap-table .table:not(.table-condensed) > tbody > tr > td, |
|||
.bootstrap-table .table:not(.table-condensed) > tfoot > tr > td { |
|||
padding: 8px; |
|||
} |
|||
|
|||
.bootstrap-table .table.table-no-bordered > thead > tr > th, |
|||
.bootstrap-table .table.table-no-bordered > tbody > tr > td { |
|||
border-right: 2px solid transparent; |
|||
} |
|||
|
|||
.bootstrap-table .table.table-no-bordered > tbody > tr > td:last-child { |
|||
border-right: none; |
|||
} |
|||
|
|||
.fixed-table-container { |
|||
position: relative; |
|||
clear: both; |
|||
border: 1px solid #dddddd; |
|||
border-radius: 4px; |
|||
-webkit-border-radius: 4px; |
|||
-moz-border-radius: 4px; |
|||
} |
|||
|
|||
.fixed-table-container.table-no-bordered { |
|||
border: 1px solid transparent; |
|||
} |
|||
|
|||
.fixed-table-footer, |
|||
.fixed-table-header { |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.fixed-table-footer { |
|||
border-top: 1px solid #dddddd; |
|||
} |
|||
|
|||
.fixed-table-body { |
|||
overflow-x: auto; |
|||
overflow-y: auto; |
|||
height: 100%; |
|||
} |
|||
|
|||
.fixed-table-container table { |
|||
width: 100%; |
|||
} |
|||
|
|||
.fixed-table-container thead th { |
|||
height: 0; |
|||
padding: 0; |
|||
margin: 0; |
|||
border-left: 1px solid #dddddd; |
|||
} |
|||
|
|||
.fixed-table-container thead th:focus { |
|||
outline: 0 solid transparent; |
|||
} |
|||
|
|||
.fixed-table-container thead th:first-child { |
|||
border-left: none; |
|||
border-top-left-radius: 4px; |
|||
-webkit-border-top-left-radius: 4px; |
|||
-moz-border-radius-topleft: 4px; |
|||
} |
|||
|
|||
.fixed-table-container thead th .th-inner, |
|||
.fixed-table-container tbody td .th-inner { |
|||
padding: 8px; |
|||
line-height: 24px; |
|||
vertical-align: top; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.fixed-table-container thead th .sortable { |
|||
cursor: pointer; |
|||
background-position: right; |
|||
background-repeat: no-repeat; |
|||
padding-right: 30px; |
|||
} |
|||
|
|||
.fixed-table-container thead th .both { |
|||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAQAAADYWf5HAAAAkElEQVQoz7X QMQ5AQBCF4dWQSJxC5wwax1Cq1e7BAdxD5SL+Tq/QCM1oNiJidwox0355mXnG/DrEtIQ6azioNZQxI0ykPhTQIwhCR+BmBYtlK7kLJYwWCcJA9M4qdrZrd8pPjZWPtOqdRQy320YSV17OatFC4euts6z39GYMKRPCTKY9UnPQ6P+GtMRfGtPnBCiqhAeJPmkqAAAAAElFTkSuQmCC'); |
|||
} |
|||
|
|||
.fixed-table-container thead th .asc { |
|||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAZ0lEQVQ4y2NgGLKgquEuFxBPAGI2ahhWCsS/gDibUoO0gPgxEP8H4ttArEyuQYxAPBdqEAxPBImTY5gjEL9DM+wTENuQahAvEO9DMwiGdwAxOymGJQLxTyD+jgWDxCMZRsEoGAVoAADeemwtPcZI2wAAAABJRU5ErkJggg=='); |
|||
} |
|||
|
|||
.fixed-table-container thead th .desc { |
|||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAZUlEQVQ4y2NgGAWjYBSggaqGu5FA/BOIv2PBIPFEUgxjB+IdQPwfC94HxLykus4GiD+hGfQOiB3J8SojEE9EM2wuSJzcsFMG4ttQgx4DsRalkZENxL+AuJQaMcsGxBOAmGvopk8AVz1sLZgg0bsAAAAASUVORK5CYII= '); |
|||
} |
|||
|
|||
.fixed-table-container th.detail { |
|||
width: 30px; |
|||
} |
|||
|
|||
.fixed-table-container tbody td { |
|||
border-left: 1px solid #dddddd; |
|||
} |
|||
|
|||
.fixed-table-container tbody tr:first-child td { |
|||
border-top: none; |
|||
} |
|||
|
|||
.fixed-table-container tbody td:first-child { |
|||
border-left: none; |
|||
} |
|||
|
|||
/* the same color with .active */ |
|||
.fixed-table-container tbody .selected td { |
|||
background-color: #f5f5f5; |
|||
} |
|||
|
|||
.fixed-table-container .bs-checkbox { |
|||
text-align: center; |
|||
} |
|||
|
|||
.fixed-table-container .bs-checkbox .th-inner { |
|||
padding: 8px 0; |
|||
} |
|||
|
|||
.fixed-table-container input[type="radio"], |
|||
.fixed-table-container input[type="checkbox"] { |
|||
margin: 0 auto !important; |
|||
} |
|||
|
|||
.fixed-table-container .no-records-found { |
|||
text-align: center; |
|||
} |
|||
|
|||
.fixed-table-pagination div.pagination, |
|||
.fixed-table-pagination .pagination-detail { |
|||
margin-top: 10px; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.fixed-table-pagination div.pagination .pagination { |
|||
margin: 0; |
|||
} |
|||
|
|||
.fixed-table-pagination .pagination a { |
|||
padding: 6px 12px; |
|||
line-height: 1.428571429; |
|||
} |
|||
|
|||
.fixed-table-pagination .pagination-info { |
|||
line-height: 34px; |
|||
margin-right: 5px; |
|||
} |
|||
|
|||
.fixed-table-pagination .btn-group { |
|||
position: relative; |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
.fixed-table-pagination .dropup .dropdown-menu { |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
.fixed-table-pagination .page-list { |
|||
display: inline-block; |
|||
} |
|||
|
|||
.fixed-table-toolbar .columns-left { |
|||
margin-right: 5px; |
|||
} |
|||
|
|||
.fixed-table-toolbar .columns-right { |
|||
margin-left: 5px; |
|||
} |
|||
|
|||
.fixed-table-toolbar .columns label { |
|||
display: block; |
|||
padding: 3px 20px; |
|||
clear: both; |
|||
font-weight: normal; |
|||
line-height: 1.428571429; |
|||
} |
|||
|
|||
.fixed-table-toolbar .bs-bars, |
|||
.fixed-table-toolbar .search, |
|||
.fixed-table-toolbar .columns { |
|||
position: relative; |
|||
margin-top: 10px; |
|||
margin-bottom: 10px; |
|||
line-height: 34px; |
|||
} |
|||
|
|||
.fixed-table-pagination li.disabled a { |
|||
pointer-events: none; |
|||
cursor: default; |
|||
} |
|||
|
|||
.fixed-table-loading { |
|||
display: none; |
|||
position: absolute; |
|||
top: 42px; |
|||
right: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
z-index: 99; |
|||
background-color: #fff; |
|||
text-align: center; |
|||
} |
|||
|
|||
.fixed-table-body .card-view .title { |
|||
font-weight: bold; |
|||
display: inline-block; |
|||
min-width: 30%; |
|||
text-align: left !important; |
|||
} |
|||
|
|||
/* support bootstrap 2 */ |
|||
.fixed-table-body thead th .th-inner { |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.table th, .table td { |
|||
vertical-align: middle; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.fixed-table-toolbar .dropdown-menu { |
|||
text-align: left; |
|||
max-height: 300px; |
|||
overflow: auto; |
|||
} |
|||
|
|||
.fixed-table-toolbar .btn-group > .btn-group { |
|||
display: inline-block; |
|||
margin-left: -1px !important; |
|||
} |
|||
|
|||
.fixed-table-toolbar .btn-group > .btn-group > .btn { |
|||
border-radius: 0; |
|||
} |
|||
|
|||
.fixed-table-toolbar .btn-group > .btn-group:first-child > .btn { |
|||
border-top-left-radius: 4px; |
|||
border-bottom-left-radius: 4px; |
|||
} |
|||
|
|||
.fixed-table-toolbar .btn-group > .btn-group:last-child > .btn { |
|||
border-top-right-radius: 4px; |
|||
border-bottom-right-radius: 4px; |
|||
} |
|||
|
|||
.bootstrap-table .table > thead > tr > th { |
|||
vertical-align: bottom; |
|||
border-bottom: 1px solid #ddd; |
|||
} |
|||
|
|||
/* support bootstrap 3 */ |
|||
.bootstrap-table .table thead > tr > th { |
|||
padding: 0; |
|||
margin: 0; |
|||
} |
|||
|
|||
.bootstrap-table .fixed-table-footer tbody > tr > td { |
|||
padding: 0 !important; |
|||
} |
|||
|
|||
.bootstrap-table .fixed-table-footer .table { |
|||
border-bottom: none; |
|||
border-radius: 0; |
|||
padding: 0 !important; |
|||
} |
|||
|
|||
.pull-right .dropdown-menu { |
|||
right: 0; |
|||
left: auto; |
|||
} |
|||
|
|||
/* calculate scrollbar width */ |
|||
p.fixed-table-scroll-inner { |
|||
width: 100%; |
|||
height: 200px; |
|||
} |
|||
|
|||
div.fixed-table-scroll-outer { |
|||
top: 0; |
|||
left: 0; |
|||
visibility: hidden; |
|||
width: 200px; |
|||
height: 150px; |
|||
overflow: hidden; |
|||
} |
|||
File diff suppressed because one or more lines are too long
@ -0,0 +1,64 @@ |
|||
<!DOCTYPE html> |
|||
<html> |
|||
<head> |
|||
<title>Fixed Columns</title> |
|||
<meta charset="utf-8"> |
|||
<link rel="stylesheet" href="css/bootstrap.min.css"> |
|||
<link rel="stylesheet" href="css/bootstrap-table.css"> |
|||
<link rel="stylesheet" href="css/bootstrap-table-fixed-columns.css"> |
|||
<script src="js/jquery.min.js"></script> |
|||
<script src="js/bootstrap.min.js"></script> |
|||
<script src="js/bootstrap-table.js"></script> |
|||
<script src="js/bootstrap-table-fixed-columns.js"></script> |
|||
</head> |
|||
<body> |
|||
<div class="container"> |
|||
<h1>Fixed Columns</h1> |
|||
<div class="toolbar form-inline"> |
|||
<span>Fixed Number: </span> |
|||
<input class="form-control" id="fixedNumber" type="number" value="1" min="1" max="5"> |
|||
</div> |
|||
<table id="table" data-height="400" data-show-columns="true"></table> |
|||
</div> |
|||
<script> |
|||
var $table = $('#table'); |
|||
|
|||
$(function () { |
|||
buildTable($table, 20, 20); |
|||
|
|||
$('#fixedNumber').change(function () { |
|||
buildTable($table, 20, 20); |
|||
}); |
|||
}); |
|||
|
|||
function buildTable($el, cells, rows) { |
|||
var i, j, row, |
|||
columns = [], |
|||
data = []; |
|||
|
|||
for (i = 0; i < cells; i++) { |
|||
columns.push({ |
|||
field: 'field' + i, |
|||
title: 'Cell' + i, |
|||
sortable: true |
|||
}); |
|||
} |
|||
for (i = 0; i < rows; i++) { |
|||
row = {}; |
|||
for (j = 0; j < cells; j++) { |
|||
row['field' + j] = 'Rows-' + i + '-' + j; |
|||
} |
|||
data.push(row); |
|||
} |
|||
$el.bootstrapTable('destroy').bootstrapTable({ |
|||
columns: columns, |
|||
data: data, |
|||
search: true, |
|||
toolbar: '.toolbar', |
|||
fixedColumns: true, |
|||
fixedNumber: +$('#fixedNumber').val() |
|||
}); |
|||
} |
|||
</script> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,177 @@ |
|||
/** |
|||
* @author zhixin wen <wenzhixin2010@gmail.com> |
|||
* @version: v1.0.1 |
|||
*/ |
|||
|
|||
(function ($) { |
|||
'use strict'; |
|||
|
|||
$.extend($.fn.bootstrapTable.defaults, { |
|||
fixedColumns: tr, |
|||
fixedRightNumber: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 + ')').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(''); |
|||
var end = that.options.fixedNumber; |
|||
if (rowspan > 0) { |
|||
--end; |
|||
--rowspan; |
|||
} |
|||
for (var i = 0; i < end; i++) { |
|||
$tr.append($tds.eq(i).clone()); |
|||
} |
|||
that.$fixedBodyColumns.append($tr); |
|||
|
|||
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 + 1).show(); |
|||
}; |
|||
|
|||
BootstrapTable.prototype.fitBodyColumns = function () { |
|||
var that = this, |
|||
top = -(parseInt(this.$el.css('margin-top')) - 2), |
|||
// the fixed height should reduce the scorll-x height
|
|||
height = this.$tableBody.height() - 14; |
|||
|
|||
if (!this.$body.find('> tr[data-index]').length) { |
|||
this.$fixedBody.hide(); |
|||
return; |
|||
} |
|||
|
|||
if (!this.options.height) { |
|||
top = this.$fixedHeader.height(); |
|||
height = height - top; |
|||
} |
|||
|
|||
this.$fixedBody.css({ |
|||
width: this.$fixedHeader.width(), |
|||
height: height, |
|||
top: top |
|||
}).show(); |
|||
|
|||
this.$body.find('> tr').each(function (i) { |
|||
that.$fixedBody.find('tr:eq(' + i + ')').height($(this).height() - 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); |
|||
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue