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

作者：JAY 2017-07-15

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',
        ],
    ]
])

The following is Chinese translation.（以下是中文翻译）

简介

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的文档。