Nový Nette DataGrid pro Bootstrap s možností vypsat strom

@mesour: Pěkný, půjde i bez dibiDataSource?

Upgradoval jsem pager. Celou componentu pageru jsem překopal a vnitřek jsem úplně změnil (to co tam bylo bylo ještě z úplně prvního DataGridu a chtělo to už změnit) + jsem použil Nette\Utils\Paginator.

Metoda pagerUrl(‚Presenter:action‘) je nyní deprecated a nahradila jí metoda enablePager(), která je už bez parametru, takže není potřeba nastavovat nějakou URL.

Zatím se v pagerUrl() bude volat $this->enablePager() a tak za měsíc do toho hodím vyhazování vyjímky, něco jako „Method pagerUrl is deprecated, use enablePager instead.“.

• Až budu mít trochu víc času, tak přidám pageru vlastnost, že bude přidávat „…“ pokud tam bude fakt hodně stránek.

Tyhle změny jsou již v repozitáři, takže stačí updatovat. Demo je už updatované.

Do budoucna plánuji přidat NetteDatabaseDataSource, jak už jsem psal a také bych chtěl celý Grid pokrýt testy. Nebudu slibovat žádný termín, protože nevím, jak na to budu mít čas.

Nejde místo těch akčních tlačítek editace a smazání tam dát Dropdown? Šlo by to nějak propojit s LeanMapperem? (ber to jako otázku před tím, než začnu hrabat do kódu – abych se v něm nehrabal zbytečně).

Podívám se na to, ale bude to chybka v Demu, nikoliv v Gridu. Je také možné, že jsi měl zapnuté řazení a to by teoreticky mohlo ovlivnit následný výpis.

EDIT: Upravil jsem to tak, že všude lze řadit, pouze na stránce Sortable a Tree je řazení vypnuté a na DataSource je nastaveno řazení natvrdo podle sloupce sort, kde jsou hodnoty pro sortování. Z toho vyplývá, ža pokud se použije sortable, tak je dobré vypnout řazení, aby v tom nevznikl zmatek.

castamir napsal(a):

Nějak mi v demu blbne řazení… něco se řadí něco ne…

Editoval mesour (8. 9. 2014 17:29)

Přidal jsem tři nové columny:

ImageColumn, demo: http://grid.mesour.com/column/image/
DateColumn, demo: http://grid.mesour.com/column/date/
NumberColumn, demo: http://grid.mesour.com/column/number/

Také jsem Grid fixnul pro Nette 2.2, zjistilo se, že vyhazoval jednu exception kvůli změně v latte :-)

Během víkendu se snad dostanu k DropdownColumnu ;-)

Editoval mesour (25. 9. 2014 16:15)

Dobrý den,
děkuji autorovi za super grid !
Chtěl bych se zeptat, zda je v plánu /nebo zda nemá někdo v plánu udělat datasource i pro Doctrine ? Rád bych si ho udělal sám ovšem moc mi to nejde.

Děkuji.

Dobrý den,

datasource pro Doctrine je v plánu. Snad během týdne bych se k tomu mohl dostat nebo to nějak zařídit :-)

Klainer napsal(a):

Dobrý den,
děkuji autorovi za super grid !
Chtěl bych se zeptat, zda je v plánu /nebo zda nemá někdo v plánu udělat datasource i pro Doctrine ? Rád bych si ho udělal sám ovšem moc mi to nejde.

Děkuji.

Zdravím, přidal jsem možnost inline editace, tady je k tomu demo:

http://grid.mesour.com/editable/

Časem až se k tomu dostanu, tak to ještě rozšířím, například column\Date bude mít jquery.ui datepicker a přidám validaci na číslo u column\Number. Zatím je potřeba mít vlastní validaci na backendu a případně nastavit flashMessage a dát redrawControl, aby se vykreslily.

Také jsem přemýšlel že by DataGrid mohl mít nějaký interní handler, na který by to chodilo a do setEditableUrl by se nenastavovala URL, ale rovnou callback. Grid by pak rovnou mohl kontrolovat, zda má daný sloupec povolenou editaci a tak dále :)

Bohužel jsem to potřeboval do jednoho projektu, tak jsem zatím udělal takovou základní zjednodušenou verzi.

Velké díky za tento perfektní grid. Neuvěřitelně rychle dozrává.
Obrovský hlubokosklon autorovi.
Ale co bych chtěl maximálně vyzdvihnout, je dokumentace na autorových stránkách. Je to precizní práce, která přinese všem uživatelům, ale hlavně těm, kteří s Nette teprve začínají, úsporu času a hlavně nervů.
Z toho, jak je tato dokumentace zpracovaná, by se měli poučit všichni spolutvůrci Nette a doplňků do Nette.
Kdyby totiž byla dokumentace k Nette zpracovaná přesně tímto způsobem, stal by se z Nette absolutně bezkonkurenční produkt. Takto je to pouze téměř bezkonkurenční produkt, který díky nedokonalé dokumentaci odrazuje spoustu začátečníků.

Je to na GitHubu: https://github.com/mesour/DataGrid
A taky zde: https://packagist.org/…our/datagrid

Takže už se instaluje přes composer jen pomocí: „mesour/datagrid“: „1.2“ :-)

Editoval mesour (3. 10. 2014 13:59)

Přidal jsem novou verzi 1.3, tady jsou změny: http://grid.mesour.com/versions/#1.3

Je tam dost změn v API, změny namespaců a inicializací. Chápu, že je to dost blbé, ale z hlediska správnosti názvů to bylo nevyhnutelné. Tohle API chci udržet nějakou delší dobu i když se možná nějaký malým změnám nevyhnu, ale budu to dělat tak, že minimálně do verze 2.0 bude API zpětně kompatibilní s verzí 1.3.

Co asi dost uvítáte je pager při více datech: http://grid.mesour.com/…anced-pager/ s možností přejít na konkrétní stránku. Pager lze i nastavit. Blbé je, že je nyní závislý na http requestu. Tuhle závislost chci do příští verze odstranit. A http request se nebude muset posílat ani pro editable a sortable.

Je možné, že jQuery načítáte až v patičce, protože grid vkládá scripty přímo do templaty je potřeba jquery a jquery.ui pro sortování vložit už v hlavičce nebo alespoň před vložením componenty gridu do templaty.

S tím vlastním nastavením itemů na stránku, to je dobrý nápad, určitě implementuji :-)

Díky za tip :-)

mpis napsal(a):

Advanced-pager jsem už vyzkoušel. Dobrá práce.
Mám ale jeden problém, že v advanced-pager mi nefunguje přechod na zadanou stánku(Go!).
Hlásí mi to „ReferenceError: jQuery is not defined“ a nemůžu přijít na příčinu.
Všechno ostatní maká dobře.
V dalším vývoji pageru by bylo dobré přidat „Items 1 – 10 of 25“ a možnost určit počet řádků na stránku třeba selectem.

Editoval mesour (8. 10. 2014 16:43)

Do callbacku sort přijde pole, je tam znázorněné, jak to pole vypadá. Takže by tam mohlo být třeba toto:

public function sort($data) {
	$sort = 0;
    foreach($data as $id => $parent_id) {
		$this->model->updateTable('myTable', array(
			'sort' => $sort
		), $id);
		$sort = $sort + 10;
	}
	$this->redrawControl();
}

Metoda updateTable updatuje tabulku myTable, nastaví do sloupce sort čísla, podle kterých se bude při selectu řadit. A udělá update where primary_key = $id. Pokud by jste sortoval strom a zařazoval položky pod sebe, tak by se neupdatoval jen sloupec sort, ale i parent_id a hodnotu by měl $parent_id.

Je pravda, že je to tam trochu blbě popsané. Zkusím to nějak lépe popsat ;-)

Co se týče vlastního filtru, je potřeba nastavit u setFilterForm jako druhý parametr false, tím se vypne defaultní filtrování a pak ručně filtrovat na dataSource, jak je vidět tady http://grid.mesour.com/filter/custom/ pod komentářem „//using custom filtering“.

Jinak připravuji opravdu obsáhlé filtry, budou umět skoro vše, takže ani nebude potřeba mít vlastní filtr a používat nějaký formulář. Přesto tam asi nechám možnost nastavit vlastní filtr form.

svobodai napsal(a):

Jakým způsobem se sortuje, resp. co má být v té funkci sort, protože na stránkách s demem jsem to neviděl a zřejmně nepochopil.
V demu je poznámka, že sortování nefunguje se stránkováním.

Ve filtru mám několik selectboxů a ty jsou na sobě závislé. Ten form jsem si samostatně vyzkoušel a připravil si skripty tak abz to probíhalo správně, ale není mi jasné jak to dostanu do té filtrace.

Editoval mesour (10. 10. 2014 20:38)

Demo ti háže pětistovky.

Filip Procházka napsal(a):

Demo ti háže pětistovky.

Myslíš při nějakých akcích, když se například klikne na active/unactive, delete, edit a tak? Zatím jsem se nedostal k tomu, abych tam ty metody a presentery přidal. Až budu dělat nějaký update, tak to přidám, ať to nevypadá blbě.

svobodai napsal(a):

mesour napsal(a):

svobodai napsal(a):

Filtr se zobrazuje a i předává parametry. Problém pro mně je, že bych tomu formu potřeboval nastavit šablonu, protože ho mám rozdělen na několik snippetů, pomocí kterých zajišťuji zužování výběrů v selectboxech.

Nefunguje mi řazení, když stisknu jméno sloupce tak se sice přenačte stránka, ale dokumnety se nesetřídí.

Jak mohu nastylovat šířka sloupce a zarovnání dat.

Aha, tak šablona formuláři nastavit nejde. Do další verze to umožním.

Nemáte náhodou nastavené ORDER BY ještě před tím, než ho posíláte do gridu? Druhá možnost proč to vypadá, že neřadí je, pokud řadíte podle dvou sloupců, například name a amount. V tom případě se zavolá ORDER BY name ASC, amount ASC. Priorita je podle toho, co začnete řadit dříve a když jsou name vždycky různorodé, tak se to podle amount už neseřadí, protože primárně řadíte podle jména. Kdyby byly třeba dvě stejné jména, tak se ty dva řádky budou následně řadit podle amount, to už fungovat bude.

Šířku sloupce asi také nenastavíte, jedině mě napadá to fixnout přes Javascript a podle toho kolikátý je to sloupec, tak mu nastavit šířku nebo dát classy column-first, -second, -third… Do další verze přidám do hlavičky na <th> class=„column-key_name“.

Aha ORDER BY mám nastavené, dá se nějak nastavit defaultní order, který by se použil, když není jiný zadán. Bohužel jsem nucen pracovat s MSSQL a to sice ve verzi 2012 umí jakousi variantu limit, offset , ale je k tomu nutno mít nastaven alespoň jeden ORDER BY.
No možná by si do definice sloupce buď člověk mohl dát class sám, nebo možnost nastavit style pro hlavičku i data podobně jako je to v GRIDO, které mi bohužel jinak nevyhovuje.
Dá se gridu nastavit jakou si m vzít šablonu. Mohl bych si nadefinovat vlastní latte ve kterém bych měl tan formulář tak jak potřebuju?
Takový námět, nemohlo by být to řazení přepínáno mezi postupným přidáváním a sortováním podle aktuálně vybraného sloupce. Možná to tam je.

Právě na tom pracuji.

1. Možnost nastavit defaultní order, který by se přepsal, pokud by bylo kliknuto na jiný bych mohl dodělat. Zatím to neumí.
2. Takové nastavení pro sloupce bych také mohl dodělat, ale podle mě by bohatě stačilo, kdyby měl každý <th> v hlavičce classu například class=„column_name“ případně column_email. Name a email by byl název sloupce v DB, který se posílá do columnu pod klíčem s konstantou Column\Type::ID.
3. Jestli myslíte šablonu pro vykreslení filtrovacího formuláře, tak takovou možnost mám v plánu dodělat, zatím to tam není. Možnost přepsat gridu defaultní šablonu pro celý grid mi přijde zbytečné. S tím filtr formem to bude tak, že se nebude muset posílat žádný formulář a grid už bude mít nějaký defaultní v sobě, když nastavíte vlastní formulář, tak použije ten a půjde mu také nastavit šablona, když se nenastaví, tak grid formuláři nastaví FilterFormRenderer a vykreslí ho automaticky.
4. Jestli to dobře chápu, tak myslíte mít nějakou možnost nastavit, zda se bude moct řadit podle více sloupců, či nikoliv? Při zapnutém řazení pouze podle jednoho sloupce by se předchozí hodnota přepsala? Jestli to je tak, takovou možnost to nemá, ale mohl bych dodělat.

Editoval mesour (11. 10. 2014 16:14)

No spíš jsem mzslel, že bych si vztvořil vlastní grid do kterého bzch extendoval tvůj a nastavil mu novou šablonu, kterou bych si zkopíroval a upravil, takže bych si některé věci mohl rychle vyřešit, ale jestli to v nové verzi půjde tak počkám.

Ještě dotaz pokud je sloupec numerický šlo by udělat abz se na posledním řádku udělal suma tohoto sloupce za danou stránku. Kdyby to umělo ještě řádek se sumou za celý select bylo by to příjemné.

Editoval svobodai (11. 10. 2014 17:00)

Nějak mi nefunguje Sloupec Action
vstup do Gridu

		$selection = $this->database->table('AdminUsers');
		$selection->select('IdAdminUser, FullName, Login, ActiveUser');

a v gridu je vytváření sloupce

		$grid->column(new Column\Action(array(
			 Column\Action::ID => 'ActiveUser',
			 Column\Action::LINK => 'changeStateUser',
		)));

Při nahrávání mi to vyhodí Chybu undefined index: action na řádku 72 v souboru Action.php

68:        public function getBodyAttributes($data) {
69:            if (!$this->checkPermissions()) {
70:                return FALSE;
71:            }
72:            if ($data[self::$action_column_name] == self::$actions['active']) {
73:                return array('class' => 'is-unactive');
74:            } else {
75:                return array('class' => 'is-active');
76:            }

Kde nastavím ten action_column_name, zjistil jsem, že action je default hodnota

Díky s tím nastavení už to funguje. Možná by to chtělo dát do toho dema.

Ahoj,
prosímtě GridTree nefunguje s DibiDataSource? jestli ne, plánuješ na to podporu anebo si mám raději vše předělat na NetteDbDataSource?

Dík Tom

Ajo díky :) A prosímtě, snažím se nastavit sortování ale dostávám

Argument 1 passed to DataGrid\Grid::sortable() must be an instance of DataGrid\callable, instance of Nette\Callback given

Nevíš čím to opravit?

Dík

mesour napsal(a):

tom napsal(a):

Ahoj,
prosímtě GridTree nefunguje s DibiDataSource? jestli ne, plánuješ na to podporu anebo si mám raději vše předělat na NetteDbDataSource?

Dík Tom

Ahoj, stačí mrknou sem: http://grid.mesour.com/…source/dibi/ ;-)

@tom to vypadá, že používáš PHP 5.3. V tom případě to můžeš sám opravit jedině upgradem PHP, protože @mesour použil typehint callable, což je 5.4+ feature.

Ještě se zeptám Mesoura jestli třeba v nějaké další verzi neplánuje i podporu PHP 5.3. Jsem ve fázi rozhodování, který grid použít v dalším projektu a zatím si nejsem jistý jestli budu mít možnost použít PHP 5.4 nebo vyšší. Tak pro info.

Díky

Jenom skromný dotaz jak jsi na tom s novou verzí?

Bude během dneška, trochu jsem se zasekl s napojením ArrayDataSource na nový filtr, takže jsem musel celý tenhle data source překopat. Ostatní je vše hotovo, už jen doladím drobnosti a udělám update ;-)

Editoval mesour (13. 10. 2014 16:34)

Zdravím, tak jsem konečně nahrál novou verzi, je toho dost nového. Jsou nějaké deprecated a co je dost důležité, tak byly z gridu odstraněny dvě metody injectHttpRequest a setCacheDir.

Asi největší změna je nový defaultní filtr: http://grid.mesour.com/filter/, není potřeba nastavovat žádný formulář ;-)

Tady je vidět, jak se dá nastavit vlastní šablona pro vykreslení filtrovacího formuláře: http://grid.mesour.com/filter/custom/#…

Dál jsem udělal metody sortable, editable, setFilterForm a setCheckboxSelection deprecated.

Mimo jiné vznikly dva eventy pro nastavení callbacků, protože s nimi byl problém: onSort a onEditCell.

Přidal jsem stránku, kde je možné zjistit, jak přepsat defaultní nastavení: http://grid.mesour.com/setting/

Byl odstraněný jquery.ui.datetimepicker a místo toho je tam bootstrap datetimepicker.

A také každý column má v hlavičce na <th> classu podle ID sloupce, takže třeba class=„grid-column-email“. Email je ID sloupce ;-)

Co není v přehledu změn, tak z gridu už není god object. Funkcionalita byla přesunuta do subcomponent (extensions), tím se odlehčilo i základní templatě grid.latte

Všechny změny jsou zde: http://grid.mesour.com/versions/#1.4

Editoval mesour (13. 10. 2014 22:45)