From 719dd295b981df5781f4c719a04f5fb784421441 Mon Sep 17 00:00:00 2001 From: RuoYi Date: Fri, 25 Jan 2019 11:08:13 +0800 Subject: [PATCH] =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=B7=A6=E5=8F=B3=E5=88=97?= =?UTF-8?q?=E5=86=BB=E7=BB=93?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../columns/bootstrap-table-fixed-columns.css | 2 +- .../columns/bootstrap-table-fixed-columns.js | 292 +++++++++++------- .../main/resources/static/ruoyi/js/ry-ui.js | 8 +- 3 files changed, 193 insertions(+), 109 deletions(-) diff --git a/ruoyi-admin/src/main/resources/static/ajax/libs/bootstrap-table/extensions/columns/bootstrap-table-fixed-columns.css b/ruoyi-admin/src/main/resources/static/ajax/libs/bootstrap-table/extensions/columns/bootstrap-table-fixed-columns.css index 40855f9a..b1ad801f 100644 --- a/ruoyi-admin/src/main/resources/static/ajax/libs/bootstrap-table/extensions/columns/bootstrap-table-fixed-columns.css +++ b/ruoyi-admin/src/main/resources/static/ajax/libs/bootstrap-table/extensions/columns/bootstrap-table-fixed-columns.css @@ -22,6 +22,6 @@ animation: none; } -.bootstrap-table .table-hover > tbody > tr.hover > td{ +.bootstrap-table .table-hover > tbody > tr.hover > td { background-color: #f5f5f5; } \ No newline at end of file diff --git a/ruoyi-admin/src/main/resources/static/ajax/libs/bootstrap-table/extensions/columns/bootstrap-table-fixed-columns.js b/ruoyi-admin/src/main/resources/static/ajax/libs/bootstrap-table/extensions/columns/bootstrap-table-fixed-columns.js index 24f4666f..adfae110 100644 --- a/ruoyi-admin/src/main/resources/static/ajax/libs/bootstrap-table/extensions/columns/bootstrap-table-fixed-columns.js +++ b/ruoyi-admin/src/main/resources/static/ajax/libs/bootstrap-table/extensions/columns/bootstrap-table-fixed-columns.js @@ -1,13 +1,16 @@ /** - * @author zhixin wen - * @version: v1.0.1 + * 基于bootstrap-table-fixed-columns修改 + * 支持左右列冻结 + * Copyright (c) 2019 ruoyi */ (function ($) { 'use strict'; $.extend($.fn.bootstrapTable.defaults, { fixedColumns: false, - fixedNumber: 1 + fixedNumber: 1, + rightFixedColumns: false, + rightFixedNumber: 1 }); var BootstrapTable = $.fn.bootstrapTable.Constructor, @@ -16,83 +19,121 @@ _resetView = BootstrapTable.prototype.resetView; BootstrapTable.prototype.initFixedColumns = function () { - this.$fixedHeader = $([ - '
', - '', - '', - '
', - '
'].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.timeoutBodyColumns_ = 0; + if (this.options.fixedColumns) { + this.$fixedBody = $([ + '
', + '', + '', + '', + '
', + '
'].join('')); - this.$fixedBody = $([ - '
', - '', - '', - '
', - '
'].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); + this.$fixedBody.find('table').attr('class', this.$el.attr('class')); + this.$fixedHeaderColumns = this.$fixedBody.find('thead'); + this.$fixedBodyColumns = this.$fixedBody.find('tbody'); + this.$tableBody.before(this.$fixedBody); + } + if (this.options.rightFixedColumns) { + this.$rightfixedBody = $([ + '
', + '', + '', + '', + '
', + '
'].join('')); + + this.$rightfixedBody.find('table').attr('class', this.$el.attr('class')); + this.$rightfixedHeaderColumns = this.$rightfixedBody.find('thead'); + this.$rightfixedBodyColumns = this.$rightfixedBody.find('tbody'); + this.$tableBody.before(this.$rightfixedBody); + } }; BootstrapTable.prototype.initHeader = function () { _initHeader.apply(this, Array.prototype.slice.apply(arguments)); - if (!this.options.fixedColumns) { + if (!this.options.fixedColumns && !this.options.rightFixedColumns){ 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); + var $ltr = this.$header.find('tr:eq(0)').clone(), + $rtr = this.$header.find('tr:eq(0)').clone(), + $lths = $ltr.clone().find('th'), + $rths = $rtr.clone().find('th'); + + $ltr.html(''); + $rtr.html(''); + //右边列冻结 + if (this.options.rightFixedColumns) { + for (var i = 0; i < this.options.rightFixedNumber; i++) { + $rtr.append($rths.eq($rths.length - this.options.rightFixedNumber + i).clone()); + } + this.$rightfixedHeaderColumns.html('').append($rtr); + } + + //左边列冻结 + if (this.options.fixedColumns) { + for (var i = 0; i < this.options.fixedNumber; i++) { + $ltr.append($lths.eq(i).clone()); + } + this.$fixedHeaderColumns.html('').append($ltr); + } }; BootstrapTable.prototype.initBody = function () { _initBody.apply(this, Array.prototype.slice.apply(arguments)); - if (!this.options.fixedColumns) { + if (!this.options.fixedColumns && !this.options.rightFixedColumns) { 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; - } - }); + var that = this; + if (this.options.fixedColumns) { + this.$fixedBodyColumns.html(''); + this.$body.find('> tr[data-index]').each(function () { + var $tr = $(this).clone(), + $tds = $tr.clone().find('td'); + + $tr.html(''); + for (var i = 0; i < that.options.fixedNumber; i++) { + $tr.append($tds.eq(i).clone()); + } + that.$fixedBodyColumns.append($tr); + }); + } + if (this.options.rightFixedColumns) { + this.$rightfixedBodyColumns.html(''); + this.$body.find('> tr[data-index]').each(function () { + var $tr = $(this).clone(), + $tds = $tr.clone().find('td'); + + $tr.html(''); + for (var i = 0; i < that.options.rightFixedNumber; i++) { + var indexTd = $tds.length - that.options.rightFixedNumber + i; + var oldTd = $tds.eq(indexTd); + var fixTd = oldTd.clone(); + var buttons = fixTd.find('button'); + //事件转移：冻结列里面的事件转移到实际按钮的事件 + buttons.each(function (key, item) { + $(item).click(function () { + that.$body.find("tr[data-index=" + $tr.attr('data-index') + "] td:eq(" + indexTd + ") button:eq(" + key + ")").click(); + }); + }); + $tr.append(fixTd); + } + that.$rightfixedBodyColumns.append($tr); + }); + } }; BootstrapTable.prototype.resetView = function () { _resetView.apply(this, Array.prototype.slice.apply(arguments)); - if (!this.options.fixedColumns) { + if (!this.options.fixedColumns && !this.options.rightFixedColumns) { return; } @@ -107,70 +148,109 @@ var that = this, visibleFields = this.getVisibleFields(), headerWidth = 0; + if (that.options.fixedColumns) { + this.$body.find('tr:first-child:not(.no-records-found) > *').each(function (i) { + var $this = $(this), + index = i; - 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 (i >= that.options.fixedNumber) { - return false; - } + if (that.options.detailView && !that.options.cardView) { + index = i - 1; + } + + that.$fixedBody.find('thead th[data-field="' + visibleFields[index] + '"]') + .find('.fht-cell').width($this.innerWidth() - 1); + headerWidth += $this.outerWidth(); + }); + this.$fixedBody.width(headerWidth - 1).show(); + } + if (that.options.rightFixedColumns) { + this.$body.find('tr:first-child:not(.no-records-found) > *').each(function (i) { + var $this = $(this), + index = i; + + if (i >= visibleFields.length - that.options.rightFixedNumber) { + 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(); + if (that.options.detailView && !that.options.cardView) { + index = i - 1; + } + that.$rightfixedBody.find('thead th[data-field="' + visibleFields[index] + '"]') + .find('.fht-cell').width($this.innerWidth() - 1); + headerWidth += $this.outerWidth(); + } + }); + this.$rightfixedBody.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; + height = this.$tableBody.height() - 2; - if (!this.$body.find('> tr[data-index]').length) { - this.$fixedBody.hide(); - return; - } + if (that.options.fixedColumns) { + if (!this.$body.find('> tr[data-index]').length) { + this.$fixedBody.hide(); + return; + } - if (!this.options.height) { - top = this.$fixedHeader.height(); - height = height - top; + this.$body.find('> tr').each(function (i) { + that.$fixedBody.find('tbody tr:eq(' + i + ')').height($(this).height()); + }); + + //// 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'); + }); } + if (that.options.rightFixedColumns) { + if (!this.$body.find('> tr[data-index]').length) { + this.$rightfixedBody.hide(); + return; + } - 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'); - }); + this.$body.find('> tr').each(function (i) { + that.$rightfixedBody.find('tbody tr:eq(' + i + ')').height($(this).height()); + }); + + //// events + this.$tableBody.on('scroll', function () { + that.$rightfixedBody.find('table').css('top', -$(this).scrollTop()); + }); + this.$body.find('> tr[data-index]').off('hover').hover(function () { + var index = $(this).data('index'); + that.$rightfixedBody.find('tr[data-index="' + index + '"]').addClass('hover'); + }, function () { + var index = $(this).data('index'); + that.$rightfixedBody.find('tr[data-index="' + index + '"]').removeClass('hover'); + }); + this.$rightfixedBody.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); \ No newline at end of file diff --git a/ruoyi-admin/src/main/resources/static/ruoyi/js/ry-ui.js b/ruoyi-admin/src/main/resources/static/ruoyi/js/ry-ui.js index 63d8eac9..f1f2f8ef 100644 --- a/ruoyi-admin/src/main/resources/static/ruoyi/js/ry-ui.js +++ b/ruoyi-admin/src/main/resources/static/ruoyi/js/ry-ui.js @@ -21,6 +21,8 @@ _showFooter = $.common.isEmpty(options.showFooter) ? false : options.showFooter; _fixedColumns = $.common.isEmpty(options.fixedColumns) ? false : options.fixedColumns; _fixedNumber = $.common.isEmpty(options.fixedNumber) ? 0 : options.fixedNumber; + _rightFixedColumns = $.common.isEmpty(options.rightFixedColumns) ? false : options.rightFixedColumns; + _rightFixedNumber = $.common.isEmpty(options.rightFixedNumber) ? 0 : options.rightFixedNumber; $('#bootstrap-table').bootstrapTable({ url: options.url, // 请求后台的URL（*） contentType: "application/x-www-form-urlencoded", // 编码类型 @@ -46,8 +48,10 @@ showColumns: $.common.visible(options.showColumns), // 是否显示隐藏某列下拉框 showToggle: $.common.visible(options.showToggle), // 是否显示详细视图和列表视图的切换按钮 showExport: $.common.visible(options.showExport), // 是否支持导出文件 - fixedColumns: _fixedColumns, // 是否启用冻结列 - fixedNumber: _fixedNumber, // 冻结列的个数 + fixedColumns: _fixedColumns, // 是否启用冻结列（左侧） + fixedNumber: _fixedNumber, // 列冻结的个数（左侧） + rightFixedColumns: _rightFixedColumns, // 是否启用冻结列（右侧） + rightFixedNumber: _rightFixedNumber, // 列冻结的个数（右侧） queryParams: $.table._params, // 传递参数（*） columns: options.columns, // 显示列信息（*） responseHandler: $.table.responseHandler // 回调函数