使用 jQuery 在 R-Shiny 中调整列宽 [英] Resizing column widths in R-Shiny using jQuery

问题描述

我想在一个闪亮的应用程序中使用 jQuery 中的 resizable 函数来调整列宽.不幸的是，我不确定如何将选项传递给 jqui_resizable 函数，以便我可以传递 also_resize 函数，或设置 maxHeight/minHeight.

理想情况下，我希望列具有设置的高度(即全屏)，但同步可调整大小的宽度(也占据屏幕的整个宽度).

下面是我展示我想要的内容的非常简单的尝试.不幸的是，鉴于设置的列宽，它不起作用，调整一列的大小以使其更大，将另一列向下移动一行.

任何关于如何做到这一点的想法将不胜感激！谢谢！

图书馆(闪亮)图书馆(shinyjqui)ui <-流体页面(流体行(jqui_resizable(列(6，文本"))，jqui_resizable(列(6，更多文本"))))服务器 <- 功能(输入，输出，会话){}闪亮应用程序(用户界面，服务器)

解决方案

这里是一个基于 this 的解决方案代码笔.

文件resizableColumns.js:

$(document).ready(function() {(函数($，窗口，文档，未定义){$.widget('ce.resizableGrid', {_创建:函数(){this.resizing = false;this._on({'mousedown .resizable-column-handle': '_resizeStartHandler','mousemove': '_resizeHandler','mouseup': '_resizeStopHandler','鼠标离开':'_resizeStopHandler'});},_init:函数(){this._createHelpers();},_createHelpers:函数(){this.element.addClass('resizable-grid');this.element.find('> .row:not(.resizable-row)').each(function(rowIndex, rowElement) {var row = $(rowElement);row.addClass('resizable-row');row.find('> [class^="col-"]:not(.resizable-column)').each(function(columnIndex, columnElement) {var column = $(columnElement);column.addClass('可调整大小的列');列.追加($('
', {类:'可调整大小的列句柄可调整大小的列句柄-w'，'data-is-west': '真'}),$('
', {类:'可调整大小的列句柄可调整大小的列句柄-e'，'data-is-west': '假'}));});});},_resizeStartHandler:函数(事件){this.resizing = {};this.resizing.handle = $(event.currentTarget).addClass('resizable-column-handle-resizing');this.resizing.column = this.resizing.handle.closest('.resizable-column').addClass('resizable-column-resizing');this.resizing.row = this.resizing.column.closest('.resizable-row').addClass('resizable-row-resizing');this.resizing.handleIsWest = this.resizing.handle.data('isWest');this.resizing.directionIsWest = this._getResizingDirectionIsWest(event.pageX);this.resizing.columnSize = this._getColumnSize(this.resizing.column);this.resizing.siblings = this._getResizingSiblings(this.resizing.column);this.resizing.offsets = this._getResizingOffsets();this.element.addClass('resizable-grid-resizing');},_resizeHandler:函数(事件){如果(！this.resize){返回;}this.resizing.directionIsWest = this._getResizingDirectionIsWest(event.pageX);var resizingOffsetSize = this._getResizingOffsetSize(event.pageX);if(resizingOffsetSize && (this.resizing.columnSize !== resizingOffsetSize)) {if(resizingOffsetSize > this.resizing.columnSize) {var widestColumn = this._getWidestColumn(this.resizing.siblings),widestColumnSize = this._getColumnSize(widestColumn);this._setColumnSize(widestColumn, (widestColumnSize - 1));this._setColumnSize(this.resizing.column, resizingOffsetSize);} 别的 {var窄列 = this._getNarrowestColumn(this.resizing.siblings),最窄列大小 = this._getColumnSize(narrowestColumn);this._setColumnSize(narrowestColumn, (narrowestColumnSize + 1));this._setColumnSize(this.resizing.column, resizingOffsetSize);}this.resizing.columnSize = resizingOffsetSize;}},_resizeStopHandler:函数(事件){如果(！this.resize){返回;}this.resizing.handle.removeClass('resizable-column-handle-resizing');this.resizing.column.removeClass('resizable-column-resizing');this.resizing.row.removeClass('resizable-row-resizing');this.element.removeClass('resizable-grid-resizing');this.resizing = false;},_getResizingDirectionIsWest:函数(x){var resizingDirectionIsWest;如果(！this.resizing.directionLastX){this.resizing.directionLastX = x;resizingDirectionIsWest = null;} 别的 {if(x < this.resizing.directionLastX) {resizingDirectionIsWest = true;} 别的 {resizingDirectionIsWest = false;}this.resizing.directionLastX = x;}返回 resizingDirectionIsWest;},_getResizingSiblings:函数(列){返回 ((this.resizing.handleIsWest) ? column.prevAll() : column.nextAll());},_getResizingOffsetSize:函数(x){var that = this,调整大小偏移大小；$.each(this.resizing.offsets, function(index, offset) {if((that.resizing.directionIsWest && ((x <= offset.end) && (x >= offset.start))) || (!that.resizing.directionIsWest &&((x >= offset.start) && (x <= offset.end)))) {resizingOffsetSize = offset.size;}});返回 resizingOffsetSize;},_getResizingOffsets:函数(){var that = this,row = this.resizing.row.clone(),css = {'高度':'1px'，'最小高度': '1px','最大高度':'1px'};row.removeClass('resizable-row resizable-row-resizing').css(css);row.children().empty().removeClass('resizable-column resizable-column-resizing').css(css);this.resizing.row.parent().append(row);var column = row.children().eq(this.resizing.row.children().index(this.resizing.column)),totalSize = this._getColumnSize(column);this._getResizingSiblings(column).each(function() {totalSize += (that._getColumnSize($(this)) - 1);that._setColumnSize($(this), 1);});var size = ((this.resizing.handleIsWest) ? totalSize : 1),sizeEnd = ((this.resizing.handleIsWest) ? 1 : totalSize),sizeOperator = ((this.resizing.handleIsWest) ? -1 : 1),偏移 = 0,offsetOperator = ((this.resizing.handleIsWest) ? 1 : 0);var columnGutter = ((column.outerWidth(true) - column.width())/2),columnWidth = ((this.resizing.handleIsWest) ? false : true);var resizingOffsets = [];而(真){this._setColumnSize(列，大小)；this._setColumnOffset(column, offset);var left = (Math.floor((column.offset()).left) + columnGutter + ((columnWidth) ? column.width() : 0));resizingOffsets.push({开始:(左+((columnGutter * 3)* -1))，结束:(左+(columnGutter * 3))，尺寸:尺寸});如果(大小 === 大小结束){休息;}大小 += 大小运算符；offset += offsetOperator;}行.remove();返回调整大小偏移量；},_getWidestColumn:函数(列){var that = this,最宽的列；列.每个(功能(){if(!widestColumn || (that._getColumnSize($(this)) > that._getColumnSize(widestColumn))) {最宽的列 = $(this);}});返回最宽的列；},_getNarrowestColumn:函数(列){var that = this,最窄列；列.每个(功能(){if(!narrowestColumn || (that._getColumnSize($(this)) < that._getColumnSize(narrowestColumn))) {最窄列 = $(this);}});返回最窄列；},_getColumnSize:函数(列){变量列大小；$.each($.trim(column.attr('class')).split(' '), function(index, value) {if(value.match(/^col-/) && !value.match(/-offset-/)) {columnSize = parseInt($.trim(value).replace(/\D/g, ''), 10);}});返回列大小；},_setColumnSize:函数(列，大小){column.toggleClass([['col', 'sm', this._getColumnSize(column)].join('-'), ['col', 'sm', size].join('-')].加入(' '));},_getColumnOffset:函数(列){var columnOffset;$.each($.trim(column.attr('class')).split(' '), function(index, value) {if(value.match(/^col-/) && value.match(/-offset-/)) {columnOffset = parseInt($.trim(value).replace(/\D/g, ''), 10);}});返回列偏移量；},_setColumnOffset:函数(列，偏移量){var currentColumnOffset,切换类 = [];if((currentColumnOffset = this._getColumnOffset(column)) !== undefined) {toggleClasses.push(['col', 'sm', 'offset', currentColumnOffset].join('-'));}toggleClasses.push(['col', 'sm', 'offset', offset].join('-'));column.toggleClass(toggleClasses.join(''));},_销毁:函数(){this._destroyHelpers();},_destroyHelpers:函数(){this.element.find('.resizable-column-handle').remove();this.element.find('.resizable-column').removeClass('resizable-column resizable-column-resizing');this.element.find('.resizable-row').removeClass('resizable-row resizable-row-resizing');this.element.removeClass('resizable-grid resizable-grid-resizing');}});})(jQuery, 窗口, 文档);$('#layout').resizableGrid();});

文件resizableColumns.css:

.container {边距顶部:50px；}.排 {背景颜色:rgba(189, 195, 199, 0.25);}.row:悬停{背景颜色:rgba(189, 195, 199, 0.5);}.row >.col-sm-1，.row >.col-sm-2，.row >.col-sm-3，.row >.col-sm-4，.row >.col-sm-5，.row >.col-sm-6，.row >.col-sm-7，.row >.col-sm-8，.row >.col-sm-9，.row >.col-sm-10，.row >.col-sm-11，.row >.col-sm-12 {最小高度:100px；}.row >.col-sm-1:之前，.row >.col-sm-2:之前，.row >.col-sm-3:之前，.row >.col-sm-4:之前，.row >.col-sm-5:之前，.row >.col-sm-6:之前，.row >.col-sm-7:之前，.row >.col-sm-8:之前，.row >.col-sm-9:之前，.row >.col-sm-10:之前，.row >.col-sm-11:之前，.row >.col-sm-12:之前{内容: '';显示:块；位置:绝对；顶部:0；右:15px；底部:0；左:15px；背景颜色:rgba(52, 152, 219, 0.25);}.row >.col-sm-1:hover:before,.row >.col-sm-2:hover:before,.row >.col-sm-3:hover:before,.row >.col-sm-4:hover:before,.row >.col-sm-5:hover:before,.row >.col-sm-6:hover:before,.row >.col-sm-7:hover:before,.row >.col-sm-8:hover:before,.row >.col-sm-9:hover:before,.row >.col-sm-10:hover:before,.row >.col-sm-11:hover:before,.row >.col-sm-12:hover:before {背景颜色:rgba(52, 152, 219, 0.5);}/* 可调整大小的网格 */.resizable-grid >.resizable-row >.resizable-column >.resizable-column-handle {z-索引:100；显示:无；位置:绝对；顶部:0；高度:100%；宽度:6px；光标:col-resize；-webkit-touch-callout:无；-webkit-user-select:无；-khtml-user-select: 无；-moz-user-select:无；-ms-user-select:无；用户选择:无；-ms-touch-action:无；触摸动作:无；}.resizable-grid >.resizable-row >.resizable-column >.resizable-column-handle-w {左:12px；}.resizable-grid >.resizable-row >.resizable-column >.resizable-column-handle-e {右:12px；}.resizable-grid >.resizable-row >.resizable-column:first-child:not(:last-child) >.resizable-column-handle-e,.resizable-grid >.resizable-row >.resizable-column:not(:first-child):not(:last-child) >.resizable-column-handle-w,.resizable-grid >.resizable-row >.resizable-column:not(:first-child):not(:last-child) >.resizable-column-handle-e,.resizable-grid >.resizable-row >.resizable-column:last-child:not(:first-child) >.resizable-column-handle-w {显示:块；}.resizable-grid-resizing {光标:col-resize；}.resizable-grid >.resizable-row-resizing >.resizable-column:not(.resizable-column-resizing) {不透明度:0.5；}

将文件 resizableColumns.js 和 resizableColumns.css 放入 www> 应用程序文件夹的子文件夹.应用程序:

library(shiny)ui <-流体页面(标签$头(tags$script(src = "https://code.jquery.com/ui/1.12.1/jquery-ui.js"),tags$link(rel = "stylesheet", href = "resizableColumns.css"),tags$script(src = "resizableColumns.js")),标签$div(id = "布局",流体行(柱子(宽度 = 3,h3("column1")),柱子(宽度 = 3,h3("column2")),柱子(宽度 = 3,h3("column3")),柱子(宽度 = 3,h3("第4列")))))服务器 <- 函数(输入，输出){}闪亮应用程序(用户界面，服务器)

I'd like to use the resizable function in jQuery to resize column widths in a shiny application. Unfortunately, I'm not sure how to pass along options to the jqui_resizable function, so that I can pass along the also_resize function, or to set maxHeight/minHeight.

Ideally, I'd like for the columns to have a set height (i.e. full-screen), but synchronous re-sizable width's (which also take up the entire width of the screen).

Below is my very simple attempt at demonstrating what I'd like. Unfortunately, it doesn't work as, given the set column widths, resizing one column to make it bigger moves the other column down a row.

Any ideas on how to do this would be greatly appreciated! Thanks!

library(shiny)
library(shinyjqui)

ui <- fluidPage(
  fluidRow(

    jqui_resizable(column(6,"text")),
    jqui_resizable(column(6,"more text"))



  )
)

server <- function(input, output, session) {

}

shinyApp(ui, server)

解决方案

Here is a solution based on this codepen.

File resizableColumns.js:

$(document).ready(function() {
  (function($, window, document, undefined) {

    $.widget('ce.resizableGrid', {

      _create: function() {
        this.resizing = false;
        this._on({
          'mousedown .resizable-column-handle': '_resizeStartHandler',
          'mousemove': '_resizeHandler',
          'mouseup': '_resizeStopHandler',
          'mouseleave': '_resizeStopHandler'
        });
      },

      _init: function() {
        this._createHelpers();
      },

      _createHelpers: function() {
        this.element.addClass('resizable-grid');
        this.element.find('> .row:not(.resizable-row)').each(function(rowIndex, rowElement) {
          var row = $(rowElement);
          row.addClass('resizable-row');
          row.find('> [class^="col-"]:not(.resizable-column)').each(function(columnIndex, columnElement) {
            var column = $(columnElement);
            column.addClass('resizable-column');
            column.append(
              $('<div>', {
                class: 'resizable-column-handle resizable-column-handle-w',
                'data-is-west': 'true'
              }),
              $('<div>', {
                class: 'resizable-column-handle resizable-column-handle-e',
                'data-is-west': 'false'
              })
            );
          });
        });
      },

      _resizeStartHandler: function(event) {
        this.resizing = {};
        this.resizing.handle = $(event.currentTarget).addClass('resizable-column-handle-resizing');
        this.resizing.column = this.resizing.handle.closest('.resizable-column').addClass('resizable-column-resizing');
        this.resizing.row = this.resizing.column.closest('.resizable-row').addClass('resizable-row-resizing');
        this.resizing.handleIsWest = this.resizing.handle.data('isWest');
        this.resizing.directionIsWest = this._getResizingDirectionIsWest(event.pageX);
        this.resizing.columnSize = this._getColumnSize(this.resizing.column);
        this.resizing.siblings = this._getResizingSiblings(this.resizing.column);
        this.resizing.offsets = this._getResizingOffsets();
        this.element.addClass('resizable-grid-resizing');
      },

      _resizeHandler: function(event) {
        if(!this.resizing) {
          return;
        }
        this.resizing.directionIsWest = this._getResizingDirectionIsWest(event.pageX);
        var resizingOffsetSize = this._getResizingOffsetSize(event.pageX);
        if(resizingOffsetSize && (this.resizing.columnSize !== resizingOffsetSize)) {
          if(resizingOffsetSize > this.resizing.columnSize) {
            var widestColumn = this._getWidestColumn(this.resizing.siblings),
              widestColumnSize = this._getColumnSize(widestColumn);
            this._setColumnSize(widestColumn, (widestColumnSize - 1));
            this._setColumnSize(this.resizing.column, resizingOffsetSize);
          } else {
            var narrowestColumn = this._getNarrowestColumn(this.resizing.siblings),
              narrowestColumnSize = this._getColumnSize(narrowestColumn);
            this._setColumnSize(narrowestColumn, (narrowestColumnSize + 1));
            this._setColumnSize(this.resizing.column, resizingOffsetSize);
          }
          this.resizing.columnSize = resizingOffsetSize;
        }
      },

      _resizeStopHandler: function(event) {
        if(!this.resizing) {
          return;
        }
        this.resizing.handle.removeClass('resizable-column-handle-resizing');
        this.resizing.column.removeClass('resizable-column-resizing');
        this.resizing.row.removeClass('resizable-row-resizing');
        this.element.removeClass('resizable-grid-resizing');
        this.resizing = false;
      },

      _getResizingDirectionIsWest: function(x) {
        var resizingDirectionIsWest;
        if(!this.resizing.directionLastX) {
          this.resizing.directionLastX = x;
          resizingDirectionIsWest = null;
        } else {
          if(x < this.resizing.directionLastX) {
            resizingDirectionIsWest = true;
          } else {
            resizingDirectionIsWest = false;
          }
          this.resizing.directionLastX = x;
        }
        return resizingDirectionIsWest;
      },

      _getResizingSiblings: function(column) {
        return ((this.resizing.handleIsWest) ? column.prevAll() : column.nextAll());
      },

      _getResizingOffsetSize: function(x) {
        var that = this,
          resizingOffsetSize;
        $.each(this.resizing.offsets, function(index, offset) {
          if((that.resizing.directionIsWest && ((x <= offset.end) && (x >= offset.start))) || (!that.resizing.directionIsWest && ((x >= offset.start) && (x <= offset.end)))) {
            resizingOffsetSize = offset.size;
          }
        });
        return resizingOffsetSize;
      },

      _getResizingOffsets: function() {
        var that = this,
          row = this.resizing.row.clone(),
          css = {
            'height': '1px',
            'min-height': '1px',
            'max-height': '1px'
          };
        row.removeClass('resizable-row resizable-row-resizing').css(css);
        row.children().empty().removeClass('resizable-column resizable-column-resizing').css(css);
        this.resizing.row.parent().append(row);
        var column = row.children().eq(this.resizing.row.children().index(this.resizing.column)),
          totalSize = this._getColumnSize(column);
        this._getResizingSiblings(column).each(function() {
          totalSize += (that._getColumnSize($(this)) - 1);
          that._setColumnSize($(this), 1);
        });
        var size = ((this.resizing.handleIsWest) ? totalSize : 1),
          sizeEnd = ((this.resizing.handleIsWest) ? 1 : totalSize),
          sizeOperator = ((this.resizing.handleIsWest) ? -1 : 1),
          offset = 0,
          offsetOperator = ((this.resizing.handleIsWest) ? 1 : 0);
        var columnGutter = ((column.outerWidth(true) - column.width()) / 2),
          columnWidth = ((this.resizing.handleIsWest) ? false : true);
        var resizingOffsets = [];
        while(true) {
          this._setColumnSize(column, size);
          this._setColumnOffset(column, offset);
          var left = (Math.floor((column.offset()).left) + columnGutter + ((columnWidth) ? column.width() : 0));
          resizingOffsets.push({
            start: (left + ((columnGutter * 3) * -1)),
            end: (left + (columnGutter * 3)),
            size: size
          });
          if(size === sizeEnd) {
            break;
          }
          size += sizeOperator;
          offset += offsetOperator;
        }
        row.remove();
        return resizingOffsets;
      },

      _getWidestColumn: function(columns) {
        var that = this,
          widestColumn;
        columns.each(function() {
          if(!widestColumn || (that._getColumnSize($(this)) > that._getColumnSize(widestColumn))) {
            widestColumn = $(this);
          }
        });
        return widestColumn;
      },

      _getNarrowestColumn: function(columns) {
        var that = this,
          narrowestColumn;
        columns.each(function() {
          if(!narrowestColumn || (that._getColumnSize($(this)) < that._getColumnSize(narrowestColumn))) {
            narrowestColumn = $(this);
          }
        });
        return narrowestColumn;
      },

      _getColumnSize: function(column) {
        var columnSize;
        $.each($.trim(column.attr('class')).split(' '), function(index, value) {
          if(value.match(/^col-/) && !value.match(/-offset-/)) {
            columnSize = parseInt($.trim(value).replace(/\D/g, ''), 10);
          }
        });
        return columnSize;
      },

      _setColumnSize: function(column, size) {
        column.toggleClass([
          ['col', 'sm', this._getColumnSize(column)].join('-'), ['col', 'sm', size].join('-')
        ].join(' '));
      },

      _getColumnOffset: function(column) {
        var columnOffset;
        $.each($.trim(column.attr('class')).split(' '), function(index, value) {
          if(value.match(/^col-/) && value.match(/-offset-/)) {
            columnOffset = parseInt($.trim(value).replace(/\D/g, ''), 10);
          }
        });
        return columnOffset;
      },

      _setColumnOffset: function(column, offset) {
        var currentColumnOffset,
          toggleClasses = [];
        if((currentColumnOffset = this._getColumnOffset(column)) !== undefined) {
          toggleClasses.push(['col', 'sm', 'offset', currentColumnOffset].join('-'));
        }
        toggleClasses.push(['col', 'sm', 'offset', offset].join('-'));
        column.toggleClass(toggleClasses.join(' '));
      },

      _destroy: function() {
        this._destroyHelpers();
      },

      _destroyHelpers: function() {
        this.element.find('.resizable-column-handle').remove();
        this.element.find('.resizable-column').removeClass('resizable-column resizable-column-resizing');
        this.element.find('.resizable-row').removeClass('resizable-row resizable-row-resizing');
        this.element.removeClass('resizable-grid resizable-grid-resizing');
      }
    });

  })(jQuery, window, document);

  $('#layout').resizableGrid();

});

File resizableColumns.css:

.container {
  margin-top: 50px;
}

.row {
  background-color: rgba(189, 195, 199, 0.25);
}

.row:hover {
  background-color: rgba(189, 195, 199, 0.5);
}

.row > .col-sm-1,
.row > .col-sm-2,
.row > .col-sm-3,
.row > .col-sm-4,
.row > .col-sm-5,
.row > .col-sm-6,
.row > .col-sm-7,
.row > .col-sm-8,
.row > .col-sm-9,
.row > .col-sm-10,
.row > .col-sm-11,
.row > .col-sm-12 {
  min-height: 100px;
}

.row > .col-sm-1:before,
.row > .col-sm-2:before,
.row > .col-sm-3:before,
.row > .col-sm-4:before,
.row > .col-sm-5:before,
.row > .col-sm-6:before,
.row > .col-sm-7:before,
.row > .col-sm-8:before,
.row > .col-sm-9:before,
.row > .col-sm-10:before,
.row > .col-sm-11:before,
.row > .col-sm-12:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 15px;
  bottom: 0;
  left: 15px;
  background-color: rgba(52, 152, 219, 0.25);
}

.row > .col-sm-1:hover:before,
.row > .col-sm-2:hover:before,
.row > .col-sm-3:hover:before,
.row > .col-sm-4:hover:before,
.row > .col-sm-5:hover:before,
.row > .col-sm-6:hover:before,
.row > .col-sm-7:hover:before,
.row > .col-sm-8:hover:before,
.row > .col-sm-9:hover:before,
.row > .col-sm-10:hover:before,
.row > .col-sm-11:hover:before,
.row > .col-sm-12:hover:before {
  background-color: rgba(52, 152, 219, 0.5);
}

/* Resizable Grid */

.resizable-grid > .resizable-row > .resizable-column > .resizable-column-handle {
  z-index: 100;
  display: none;
  position: absolute;
  top: 0;
  height: 100%;
  width: 6px;
  cursor: col-resize;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: none;
  touch-action: none;
}

.resizable-grid > .resizable-row > .resizable-column > .resizable-column-handle-w {
  left: 12px;
}

.resizable-grid > .resizable-row > .resizable-column > .resizable-column-handle-e {
  right: 12px;
}

.resizable-grid > .resizable-row > .resizable-column:first-child:not(:last-child) > .resizable-column-handle-e,
.resizable-grid > .resizable-row > .resizable-column:not(:first-child):not(:last-child) > .resizable-column-handle-w,
.resizable-grid > .resizable-row > .resizable-column:not(:first-child):not(:last-child) > .resizable-column-handle-e,
.resizable-grid > .resizable-row > .resizable-column:last-child:not(:first-child) > .resizable-column-handle-w {
  display: block;
}

.resizable-grid-resizing {
  cursor: col-resize;
}

.resizable-grid > .resizable-row-resizing > .resizable-column:not(.resizable-column-resizing) {
  opacity: 0.5;
}

Put the files resizableColumns.js and resizableColumns.css in the www subfolder of the app folder. The app:

library(shiny)

ui <- fluidPage(
  tags$head(
    tags$script(src = "https://code.jquery.com/ui/1.12.1/jquery-ui.js"),
    tags$link(rel = "stylesheet", href = "resizableColumns.css"),
    tags$script(src = "resizableColumns.js")
  ),
  tags$div(
    id = "layout",
    fluidRow(
      column(
        width = 3,
        h3("column1")
      ),
      column(
        width = 3,
        h3("column2")
      ),
      column(
        width = 3,
        h3("column3")
      ),
      column(
        width = 3,
        h3("column4")
      )
    )
  )
)

server <- function(input, output){}

shinyApp(ui, server)

这篇关于使用 jQuery 在 R-Shiny 中调整列宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！