支持左右列冻结

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;
 }

ruoyi-admin/src/main/resources/static/ajax/libs/bootstrap-table/extensions/columns/bootstrap-table-fixed-columns.js

@@ -1,13 +1,16 @@
 /**
- * @author zhixin wen <wenzhixin2010@gmail.com>
+ * 基于bootstrap-table-fixed-columns修改
- * @version: v1.0.1
+ * 支持左右列冻结
+ * 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 = $([
-            '<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'));
+        if (this.options.fixedColumns) {
-        this.$fixedBodyColumns = this.$fixedBody.find('tbody');
+            this.$fixedBody = $([
-        this.$tableBody.before(this.$fixedBody);
+                '<div class="fixed-table-column" style="position: absolute; background-color: #fff; border-right:1px solid #ddd;">',
+                '<table>',
+                '<thead></thead>',
+                '<tbody></tbody>',
+                '</table>',
+                '</div>'].join(''));
+
+
+            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 = $([
+                '<div class="fixed-table-column" style="position: absolute;right:0px; background-color: #fff; border-right:1px solid #ddd;">',
+                '<table>',
+                '<thead></thead>',
+                '<tbody></tbody>',
+                '</table>',
+                '</div>'].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();
+        var $ltr = this.$header.find('tr:eq(0)').clone(),
-        $trs.each(function () {
+            $rtr = this.$header.find('tr:eq(0)').clone(),
-            $(this).find('th:gt(' + that.options.fixedNumber + ')').remove();
+            $lths = $ltr.clone().find('th'),
-        });
+            $rths = $rtr.clone().find('th');
-        this.$fixedHeaderColumns.html('').append($trs); 
+
+        $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,
+        var that = this;
-            rowspan = 0;
+        if (this.options.fixedColumns) {
+            this.$fixedBodyColumns.html('');
+            this.$body.find('> tr[data-index]').each(function () {
+                var $tr = $(this).clone(),
+                    $tds = $tr.clone().find('td');
 
-        this.$fixedBodyColumns.html('');
+                $tr.html('');
-        this.$body.find('> tr[data-index]').each(function () {
+                for (var i = 0; i < that.options.fixedNumber; i++) {
-            var $tr = $(this).clone(),
+                    $tr.append($tds.eq(i).clone());
-                $tds = $tr.find('td');
+                }
+                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('');
+                $tr.html('');
-            var end = that.options.fixedNumber;
+                for (var i = 0; i < that.options.rightFixedNumber; i++) {
-            if (rowspan > 0) {
+                    var indexTd = $tds.length - that.options.rightFixedNumber + i;
-                --end;
+                    var oldTd = $tds.eq(indexTd);
-                --rowspan;
+                    var fixTd = oldTd.clone();
-            }
+                    var buttons = fixTd.find('button');
-            for (var i = 0; i < end; i++) {
+                    //事件转移：冻结列里面的事件转移到实际按钮的事件
-                $tr.append($tds.eq(i).clone());
+                    buttons.each(function (key, item) {
-            }
+                        $(item).click(function () {
-            that.$fixedBodyColumns.append($tr);
+                            that.$body.find("tr[data-index=" + $tr.attr('data-index') + "] td:eq(" + indexTd + ") button:eq(" + key + ")").click();
-            
+                        });
-            if ($tds.eq(0).attr('rowspan')){
+                    });
-            	rowspan = $tds.eq(0).attr('rowspan') - 1;
+                    $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) {
+                if (i >= that.options.fixedNumber) {
-            var $this = $(this),
+                    return false;
-                index = i;
+                }
 
-            if (i >= that.options.fixedNumber) {
+                if (that.options.detailView && !that.options.cardView) {
-                return false;
+                    index = i - 1;
-            }
+                }
 
-            if (that.options.detailView && !that.options.cardView) {
+                that.$fixedBody.find('thead th[data-field="' + visibleFields[index] + '"]')
-                index = i - 1;
+                    .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;
 
-            that.$fixedHeader.find('th[data-field="' + visibleFields[index] + '"]')
+                if (i >= visibleFields.length - that.options.rightFixedNumber) {
-                .find('.fht-cell').width($this.innerWidth());
+                    return false;
-            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() - 2;
-            height = this.$tableBody.height() - 14;
 
-        if (!this.$body.find('> tr[data-index]').length) {
+        if (that.options.fixedColumns) {
-            this.$fixedBody.hide();
+            if (!this.$body.find('> tr[data-index]').length) {
-            return;
+                this.$fixedBody.hide();
+                return;
+            }
+
+            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;
+            }
 
-        if (!this.options.height) {
+            this.$body.find('> tr').each(function (i) {
-            top = this.$fixedHeader.height();
+                that.$rightfixedBody.find('tbody tr:eq(' + i + ')').height($(this).height());
-            height = height - top;
+            });
+
+            //// 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');
+            });
         }
-
-        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);

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,                        // 是否启用冻结列
+        			fixedColumns: _fixedColumns,                        // 是否启用冻结列（左侧）
-        			fixedNumber: _fixedNumber,                          // 冻结列的个数
+        			fixedNumber: _fixedNumber,                          // 列冻结的个数（左侧）
+        			rightFixedColumns: _rightFixedColumns,              // 是否启用冻结列（右侧）
+        			rightFixedNumber: _rightFixedNumber,                // 列冻结的个数（右侧）
                     queryParams: $.table._params,                       // 传递参数（*）
                     columns: options.columns,                           // 显示列信息（*）
                     responseHandler: $.table.responseHandler            // 回调函数