GithubHelp home page GithubHelp logo

chuprik / yii2-sortable-widgets Goto Github PK

View Code? Open in Web Editor NEW
60.0 11.0 23.0 48 KB

:ice_cream: Rubaxa/Sortable for Yii2

License: MIT License

PHP 71.85% CSS 1.39% JavaScript 26.76%
yii2 yii2-widgets widget drag-and-drop sortable

yii2-sortable-widgets's Introduction

Yii2 Sortable widgets

Join the chat at https://gitter.im/kotchuprik/yii2-sortable-widgets

Implementation Rubaxa/Sortable for Yii2 widgets.

Supported:

  • GridView widget.

demo

Latest Stable Version Total Downloads Monthly Downloads Latest Unstable Version License

Usage

Create a new migration, change a parent to the migration class from the extension and specify the table name property:

class m140811_131705_Models_order extends \kotchuprik\sortable\migrations\Migration
{
    protected $tableName = 'models';
}

Add the sortable behavior to your model and specify the query property:

public function behaviors()
{
    return [
        'sortable' => [
            'class' => \kotchuprik\sortable\behaviors\Sortable::className(),
            'query' => self::find(),
        ],
    ];
}

Add the sorting action to your controller and specify the query property:

public function actions()
{
    return [
        'sorting' => [
            'class' => \kotchuprik\sortable\actions\Sorting::className(),
            'query' => \vendor\namespace\Model::find(),
        ],
    ];
}

If you're using another primary key (not 'id'), you must specify it in 'pk' parameter:

public function actions()
{
    return [
        'sorting' => [
            'class' => \kotchuprik\sortable\actions\Sorting::className(),
            'query' => \vendor\namespace\Model::find(),
            'pk' => 'modelField'
        ],
    ];
}

Add the column to your grid view and specify the sorting url like here:

echo \yii\grid\GridView::widget([
    'dataProvider' => $model->search(),
    'rowOptions' => function ($model, $key, $index, $grid) {
        return ['data-sortable-id' => $model->id];
    },
    'columns' => [
        [
            'class' => \kotchuprik\sortable\grid\Column::className(),
        ],
        'id',
        'title',
        'order',
    ],
    'options' => [
        'data' => [
            'sortable-widget' => 1,
            'sortable-url' => \yii\helpers\Url::toRoute(['sorting']),
        ]
    ],
]);

If cdn is not accessible in your country, you can use Sortable library from local dependencies:

...
    'columns' => [
        [
            'class' => \kotchuprik\sortable\grid\Column::className(),
            'useCdn' => false
        ],
        ...
    ],
...

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.