Grido

Grido je komponenta usnadňující výpis dat, jejich formátování, řazení, stránkování, filtrování, hromadné akce a export dat. Při návrhu byl kladen důraz na jednoduché použití a přizpůsobení.

Instalace

Komponentu si stáhněte a rozbalte do projektu, nebo nainstalujte pomocí nástroje Composer.

composer require o5/grido

Použití

Grido vytvoříme továrničkou na komponenty, nastavíme model. Grido aktuálně podporuje tyto datasources: Nette Database, Dibi, Doctrine a Array.

protected function createComponentGrid($name)
{
    $grid = new Grido\Grid($this, $name);
    $grid->setModel(array(
        array('name' => 'Lucie', 'gender' => 'female'),
        array('name' => 'Petra', 'gender' => 'female'),
        array('name' => 'Lenka', 'gender' => 'female'),
    ));
}

Settery gridu

Gettery gridu

Vlastní metody modelu

Pokud potřebujeme změnit některou z modelových metod, lze místo dědění využít callback.

//reimplementace metody getCount()
$grid->model->callback['getCount'] = function($model) {
    $fluent = clone $model->fluent;
    return $fluent->removeClause('SELECT')->select('COUNT(*)')->fetchSingle();
};

//je samozřejmě možné "přetěžovat" všechny metody modelu,
//přičemž argumenty volané z gridu jsou předány jako pole v druhém parametru
$grid->model->callback['limit'] = function($model, $args) {
    $offset = $args[0];
    $limit = $args[1];
    //...
};

Události gridu

Sloupce

$grid->addColumnText('email', 'E-mail');

První parametr reprezentuje název sloupce v datasource, následuje popisek.

Typy

Settery

Gettery

Filtry

$grid->addFilterText('bir­thday', 'Birthday');

První parametr reprezentuje název sloupce v datasource, následuje popisek.

Typy

Settery

Vlastní podmínky

//pouze operátor
$grid->addFilterCheck('male', 'Only male')
    ->setCondition('<> ?');

//výčet hodnot a přiřazení celé podmínky
$list = array('' ⇒ '', 'publihed' ⇒ 'Published', 'deleted' ⇒ 'Deleted');
$grid->addFilterSelect('status', 'Status', $list)
    ->setCondition(array(
        'publihed' ⇒ array('status',  '<> ?', 'deleted'),
        'deleted' ⇒ array('status',  '= ?', 'deleted')
));

//callback
$grid->addFilterCheck('male', 'Only male')
    ->setWhere(function($value, \Nette\Database\Table\Selection $connection) {
        $value
            ? $connection->where('column = ?' , 'male')
            : NULL;
});

Gettery

Akce

$grid->addActionHref('edit', 'Edit');

První parametr je název akce, následuje popisek.

Typy

Settery

Gettery

Operace

$grid->setOperation(array('delete' ⇒ 'Delete'), function($operation, $id) { … } );

První parametr je pole podporovaných akcí, druhý je handler volající se po vybrání akce.

Settery

Export

$grid->setExport('user_export');

První parametr je název exportovného souboru, pokud není nastaven použije se název gridu. Formát exportu je CSV. Export zohleďňuje aktuální filtr.

Inline editace

Inline editace umožní upravovat jednotlivé buňky přímo v tabulce Grido. Pro datasource Nette Database je již implementována výchozí update() metoda, v ostatních případech je potřeba si metodu doimplementovat a to prvním parametrem metody $grid->setEditableColumns(), nebo pomocí $column->setEditableCallback().

Ovládání

• Pro otevření buňky k inline editaci lze využít:
  • CTRL + DOUBLE CLICK na Windows/Linux
  • CMD + DOUBLE CLICK na Mac OS
• Pro potvrzení editace stiskněte ENTER, buňka pro editaci musí mít focus
• Pro zrušení editace stiskněte ESC, buňka pro editaci musí mít focus

Ukázka kódu a použití

    // Umožnění inline editace nad celým gridem
    $grid->setEditableColumns();

    // Umožnění inline editace nad celým gridem s vlastním callbackem pro práci se změněnými daty
    $grid->setEditableColumns(callback(...));

    // Umožnění inline editace pouze nad konkrétním sloupcem
    $column->setEditable();

    // Nastavení vlastního callbacku pro práci se změněnými daty nad jediným sloupcem
    $column->setEditable(callback(...));
    //nebo
    $column->setEditable();
    $column->setEditableCallback();

    // Znemožnění editace nad jediným konkrétním sloupcem
    $grid->setEditableColumns();
    $column->disableEditable();

    // Nastavení vlastního IControl pro konkrétní sloupec
    $column->setEditable(callback(...), $control);
    // nebo
    $column->setEditableControl($control);
    // případně
    $column->setEditable(NULL, $control);

    // Pokud potřebujete předzpracovat hodnotu sloupce pro IControl je možné nastavit vlastní ValueCallback
    $column->setEditableValueCallback(function($row) {
        return $row->id;
    });

    /**
     *  Callback funkce pro zpracování změněných dat s parametry
     *  $id mixed primární klíč řádku
     *  $newValue mixed změněná hodnota
     *  $oldValue mixed původní hodnota
     *  $column Grido\Components\Columns\Editable sloupec grida
     */
    function($id, $newValue, $oldValue, $column) {
        if ($isDataSaved) {
            $success = true;
        } else {
            $success = false;
        }
        return $success;
    }

    

Client-side features

Ve složce client-side lze najít základní css styl a javascriptové skripty zastřešující klientskou část. Obojí lze nainstalovat přes Bower, název balíčku je grido. Grido.js lze pomocí prototypů snadno rozšířit a je možné tak použít např. vlastní plugin pro kalendářík. Příklad takového rozšíření lze najít zde.

• ajax s kompletním stavem v URL
• hromadné označování řádků s podporou shiftu
• invertování výběru řádků
• prompt pro rychlé přeskočení na stranu
• kontrola numerického vstupu
• potvrzování nastavených akcí a operací
• odscrolování po změně
• cool url parametry
• odeslání filtru po změně hodnoty