Yii2 Sortable GridView（Yii2列表拖动排序扩展）

Yii2 GridView widget base on jQuery UI sortable widget.

Installation

The preferred way to install this extension is through composer.

Either run

php composer.phar require --prefer-dist "oonne/yii2-sortable-grid-view" "*"

or add

"oonne/yii2-sortable-grid-view" : "*"

to the require section of your composer.json file.

Usage

Add to your database new unsigned int attribute, such "sequence".

Add new behavior in the active record model, for example:

use oonne\sortablegrid\SortableGridBehavior;

  public function behaviors()
  {
      return [
          'sort' => [
              'class' => SortableGridBehavior::className(),
              'sortableAttribute' => 'sequence'
          ],
      ];
  }

Add action in the controller, for example:

use oonne\sortablegrid\SortableGridAction;
  
  public function actions()
  {
      return [
          'sort' => [
              'class' => SortableGridAction::className(),
              'modelName' => Model::className(),
          ],
      ];
  }

Add SortableGridView in the view, for example:

use oonne\sortablegrid\SortableGridView;
  
  SortableGridView::widget([
      'dataProvider' => $dataProvider,
      'sortableAction' => ['/bannersuper/sort'],
      'columns' => [
          [
              'class' => 'yii\grid\SerialColumn',
              'contentOptions' => ['class' => 'sortable-handle'],
          ],
          [
              'attribute' => 'sName',
          ],
      ]
  ])

中文文档

简介

Yii2 可拖动排序的GridView扩展。拖动操作基于jQuery UI的sortable widget。

安装

通过composer安装。

执行以下命令：

php composer.phar require --prefer-dist "oonne/yii2-sortable-grid-view" "*"

或者把以下内容添加到composer.json中：

"oonne/yii2-sortable-grid-view" : "*"

使用

首先在需要排序的表中增加排序的字段，比如“sequence”。

这个字段需要unsigned int类型，获取这张表的内容时基于这个字段倒序排序。拖动排序时，每行的排序字段会跟着改变。

在model里增加一个behavior，代码如下：

use oonne\sortablegrid\SortableGridBehavior;
  
  public function behaviors()
  {
      return [
          'sort' => [
              'class' => SortableGridBehavior::className(),
              'sortableAttribute' => 'sequence'
          ],
      ];
  }

在controller里增加一个action，代码如下：

use oonne\sortablegrid\SortableGridAction;
  
  public function actions()
  {
      return [
          'sort' => [
              'class' => SortableGridAction::className(),
              'modelName' => Model::className(),
          ],
      ];
  }

在view里加入widget，代码如下：

use oonne\sortablegrid\SortableGridView;
  
  SortableGridView::widget([
      'dataProvider' => $dataProvider,
      'sortableAction' => ['/bannersuper/sort'],
      'columns' => [
          [
              'class' => 'yii\grid\SerialColumn',
              'contentOptions' => ['class' => 'sortable-handle'],
          ],
          [
              'attribute' => 'sName',
          ],
      ]
  ])

拖动每个tr里加入'.sortable-handle'的tr，可以对整行进行拖动排序。其他内容可以正常选择和操作，不可拖动。详见Jquery UI sortable widget的文档。