javascript - Yii2 表格縮放列寬，頁面重新整理後保持不變怎麼實現？

1、Yii2 DynaGrid外掛程式產生的列表可以手動拖動每一列的寬度，但是拖動之後怎麼儲存？使重新整理頁面後還是剛才拖動停止的寬度。

主要代碼如下：（由rc-table-resizing與rc-column-resizing這兩class控制）

注釋：以下是源碼，不能改動，要重寫。

 ResizableColumns.prototype.pointerdown = function(e) {      var $currentGrip, $leftColumn, $ownerDocument, $rightColumn, newWidths, startPosition, widths;      e.preventDefault();      $ownerDocument = $(e.currentTarget.ownerDocument);      startPosition = pointerX(e);      $currentGrip = $(e.currentTarget);      $leftColumn = $currentGrip.data('th');      $rightColumn = this.$tableHeaders.eq(this.$tableHeaders.index($leftColumn) + 1);      widths = {        left: parseWidth($leftColumn[0]),        right: parseWidth($rightColumn[0])      };      newWidths = {        left: widths.left,        right: widths.right      };      this.$handleContainer.add(this.$table).addClass('rc-table-resizing');      $leftColumn.add($rightColumn).add($currentGrip).addClass('rc-column-resizing');      this.triggerEvent('column:resize:start', [$leftColumn, $rightColumn, newWidths.left, newWidths.right], e);      $ownerDocument.on('mousemove.rc touchmove.rc', (function(_this) {        return function(e) {          var difference;          difference = (pointerX(e) - startPosition) / _this.$table.width() * 100;          setWidth($leftColumn[0], newWidths.left = _this.constrainWidth(widths.left + difference));          setWidth($rightColumn[0], newWidths.right = _this.constrainWidth(widths.right - difference));          if (_this.options.syncHandlers != null) {            _this.syncHandleWidths();          }          return _this.triggerEvent('column:resize', [$leftColumn, $rightColumn, newWidths.left, newWidths.right], e);        };      })(this));      return $ownerDocument.one('mouseup touchend', (function(_this) {        return function() {          $ownerDocument.off('mousemove.rc touchmove.rc');          _this.$handleContainer.add(_this.$table).removeClass('rc-table-resizing');          $leftColumn.add($rightColumn).add($currentGrip).removeClass('rc-column-resizing');          _this.syncHandleWidths();          _this.saveColumnWidths();          return _this.triggerEvent('column:resize:stop', [$leftColumn, $rightColumn, newWidths.left, newWidths.right], e);        };      })(this));    };    return ResizableColumns;  })();

回複內容：

1、Yii2 DynaGrid外掛程式產生的列表可以手動拖動每一列的寬度，但是拖動之後怎麼儲存？使重新整理頁面後還是剛才拖動停止的寬度。

主要代碼如下：（由rc-table-resizing與rc-column-resizing這兩class控制）

注釋：以下是源碼，不能改動，要重寫。

 ResizableColumns.prototype.pointerdown = function(e) {      var $currentGrip, $leftColumn, $ownerDocument, $rightColumn, newWidths, startPosition, widths;      e.preventDefault();      $ownerDocument = $(e.currentTarget.ownerDocument);      startPosition = pointerX(e);      $currentGrip = $(e.currentTarget);      $leftColumn = $currentGrip.data('th');      $rightColumn = this.$tableHeaders.eq(this.$tableHeaders.index($leftColumn) + 1);      widths = {        left: parseWidth($leftColumn[0]),        right: parseWidth($rightColumn[0])      };      newWidths = {        left: widths.left,        right: widths.right      };      this.$handleContainer.add(this.$table).addClass('rc-table-resizing');      $leftColumn.add($rightColumn).add($currentGrip).addClass('rc-column-resizing');      this.triggerEvent('column:resize:start', [$leftColumn, $rightColumn, newWidths.left, newWidths.right], e);      $ownerDocument.on('mousemove.rc touchmove.rc', (function(_this) {        return function(e) {          var difference;          difference = (pointerX(e) - startPosition) / _this.$table.width() * 100;          setWidth($leftColumn[0], newWidths.left = _this.constrainWidth(widths.left + difference));          setWidth($rightColumn[0], newWidths.right = _this.constrainWidth(widths.right - difference));          if (_this.options.syncHandlers != null) {            _this.syncHandleWidths();          }          return _this.triggerEvent('column:resize', [$leftColumn, $rightColumn, newWidths.left, newWidths.right], e);        };      })(this));      return $ownerDocument.one('mouseup touchend', (function(_this) {        return function() {          $ownerDocument.off('mousemove.rc touchmove.rc');          _this.$handleContainer.add(_this.$table).removeClass('rc-table-resizing');          $leftColumn.add($rightColumn).add($currentGrip).removeClass('rc-column-resizing');          _this.syncHandleWidths();          _this.saveColumnWidths();          return _this.triggerEvent('column:resize:stop', [$leftColumn, $rightColumn, newWidths.left, newWidths.right], e);        };      })(this));    };    return ResizableColumns;  })();

這是css控制的，你可以設定一個session，儲存下你的列表的寬度，重新整理的時候，就可以用js賦值給css就可以了。

樓上說的沒錯呢

