ublaboo/datagrid: mocný, rychlý, rozšiřitelný, hezký, anglicky dokumentovaný datagrid

@Hurass funguje to zatím jen u sloupců, nikoliv u akcí. Přidám, dej mi chvíli.

Je možné skrýt select box s výběrem počtu záznamů na stránku? Nerad bych to řešil v css, prostě bych chtěl, aby se to vůbec nevykreslovalo.

Lze nastavit custom šablona a přepsat block #pagination.

@hury 2, $grid->setOuterFilterRendering(), je to v docu.

1, Neznám Grido do detailu, ale předpokládám, že s tím ti pomohla spíš NDBT než Grido. Když uděláš něco takového, tak by ti to mohlo vypsat požadovaná data:

$ndb->table('users')->select('users.*, : users_skupina.nazev')

Zkus to – ale spíš jsem to tak střelil od boku. Doufám chápeš moji pointu.

Je ale možné, že s tím Grido dělá nějaká kouzla, podávám se. :)

Editoval Pavel Janda (23. 2. 2016 14:05)

Diky, ten outerFilter jsem uplne prehledl…

externi data jsem udelal pres

->setRenderer(function($item){
	if ($item->skupina_id !== null) {
		return $item->skupina->nazev;
	}
	else {
		return '-';
	}
});

mozna jsem jen ovlivnen vice gridy, posledni dobou zkousim vse mozne a nemuzu najit neco co budu pouzivat. Ten tvuj je na dobre ceste :-)

nejaka myslenka, jak udelat toto?
ruzne barevne tlacitka, pokud je $item aktivni, ci nikoli

$grid->addAction('detail','')->setIcon('search')->setClass(function($item){
	if ((int)$item->aktivni === 1) {
		return 'btn btn-xs btn-success';
	}
	else {
		return 'btn btn-xs btn-danger';
	}
});

pak jeste jedna otazka:
potrebuji udelat filterSelect, kde filtruji nad ruznymi sloupci…
(kazda hodnota ma ruzny WHERE …)
polozky selectu: vse, nove, stare, propadle

	vse = zadne omezeni...
	nove = tabulka.aktivni = 1 && tabulka.datum > '2016-01-01'
	stare = tabulka.datum < '2016-01-01'
	propadle = tabulka.aktivni = 0 && tabulka.stav = 'abc...'

je to jen priklad, takovy select by bala asi kravina :-)

@PavelJanda: Nová verze vypadá super. Ty překlady jsou mnohem lepší takhle.

Chvíli mi trvalo dát do kupy JS (jsem nicka – nepoužívám balíčkovač na JS, jen composer). Všiml jsem si jen dvou drobností u item-detail.

V minulé verzi fungoval bez jquery-sortable(), to je asi úplně nepodstatné. Jen mi překvapila ta závislost navíc.

A když definuji grouped-action a vyberu vše a následně kliknu na „eye-icon“ pro zobrazení detailu, tak se řádek odoznačí. Zkoušel jsem na lokále i na demíčku. Asi by bylo lepší, kdyby zůstal řádek označený.

v2.0.2 opravuje oboje – Není třeba jquery sortable, pokud nechci sortit a neposílá se v xhr response item row.

@PavelKravčík DataGrid použivá mojí miniaturní library happy (bower install happy), která dělá ty pěkné checkboxy. Includuješ scripty té knihovničky? Pokud bys je nehctěl používat, lze je vypnout: $grid->useHappyComponents(FALSE).

@PavelKravčík Hehe, nejlepší donations jsou do kódu. :)
Možná tam nějaké tlačítko přidáme. :)

tady to tedy frci :-)

btw, nejaky duvod, proc s nepreklada filter?

pouzivam kdyby/translator
$grid->setTranslator($this->translator);

nazvy sloupcu i grid jsou v pohode, prekladaji se… ale toto nefunguje:
$grid->addFilterText('hledat', 'grid.hledat-cokoli', ['nazev', 'popis']);

toto me stve i u formulare…
reseni se mi vubec nelibi (ale treba to delam blbe, a jde to lepe :-))

$form->setTranslator($this->translator);

$form->addText('aresIc', 'sign.form.ic', 12, 20); // tady je to v pohode...

$form->addSelect('aresZeme', $this->translator->translate('sign.form.zeme'), $seznamZemiSelect)
     ->setTranslator(null) // kvuli seznamu zemi - aby se to neprekladalo
     ->setPrompt($this->translator->translate('sign.form.vyberte'));

nejake elegantnejsi reseni by bodlo… neco jako:

$form->addSelect('aresZeme', 'sign.form.zeme', $seznamZemiSelect)
     ->translateLabel()
     ->translateOptions(false)
     ->translatePrompt();

Mám jeden problém s řazezím na joinované tabulky. Používám Kdyby/Doctrine. Konkrétně vypisuju data z tabuky user která má vazbu n:1 na tabulku user_role.

Třída App\ModelUser:

/**
 * @ORM\ManyToOne(targetEntity="UserRole", inversedBy="users", cascade={"persist"})
 */
protected $userRole;

Ukázka jak tvořím grid:

$grid->setDataSource(
	$this->userRepository->createQueryBuilder("u")
		->leftJoin(\App\Model\UserRole::class, "ur", \Kdyby\Doctrine\Dql\Join::WITH, "ur.id = u.userRole")
);

$grid->addColumnText("role", "Role", "ur.name")
		->setSortable();

Vypíše se vše v pořádku, řadit jde podle všech slouplců, ale né právě Role, která je $name ve tříde App\Model\UserRole.

Při pokusi seřadit data podle role se vygeneruje DQL:

SELECT u
FROM App\Model\User u
LEFT JOIN App\Model\UserRole ur WITH ur.id = u.userRole
ORDER BY u.ur.name ASC

Předpokládám, že by to mělo být takto:

SELECT u
FROM App\Model\User u
LEFT JOIN App\Model\UserRole ur WITH ur.id = u.userRole
ORDER BY ur.name ASC

Poradí mi někdo, jak toho docílit?

Funguje, díky!

Nová verze – v2.1:

• Možnost definovat icon, title, confirmation dialog a class Column\Action callbackem
• DataGrid::setDefaultSort does not need a session in time anymore
• Fixy

Editoval Pavel Janda (25. 2. 2016 0:10)

@pitr82

2, Zkoušíš to na existujícím projektu, nebo na sandboxu? Kdybys to zkoušel na nějakém sandboxu, tak to můžeš hodin na git a já se na to podívám.

Takhle tam může být chybka z více důvodů.

• Máš popořadě naincludované všechny scripty jako je to v docu? – Nehází ti console žádné errory?
• Používáš poslední verzi DataGridu – v2.1.1?
• Jak stahuješ scripty? Přes bower?

Funguje ti správně demo na ublaboo.paveljanda.com/datagrid?

1, Mohl bys mi ukázat, jak máš napsanou celou component factory v presenteru? Jakou vrstvu mezi databází a aplikací používáš?

Editoval Pavel Janda (25. 2. 2016 14:20)

@pitr82 :) Jsem rád, že je používán.
Co myslíš tím „ve stejné kvalitě“? Myslíš aby vypadaly podobně jako ty checkboxy? Nebo se ti jen nepodařilo nahrát bootstrap-datapicker? Ten je tam nyní normálně využit.

Kdyby to první, tak rovnou odpovím, že já určitě asi ne. :) Jsem primárně backenďák a nemyslím, že mám znalosti na to, abych napsal lepší..

@PavelJanda:

Co něco takového do další verze? Tj. správa hromadných akcí jako u obyčejných. Myslíš, že už je to trochu složitější oříšek. :)

$grid->addGroupAction('gruppen', Zaplatit smlouvy');

$grid->allowRowsGroupAction('gruppen', function($row)
{
	return $row->status != \Psa\Entity\ImportEntity::STATUS_MANUAL;
});

@PavelJanda: Jasně, tomu rozumím. Myslel jsem něco jako onChange[], kontrola jen vybraných a nějaký disable. Moc hezké to není, proto jsem to jen nadhodil, kdyby existovalo hezčí řešení. Na nějakém starém gridu jsem to někde měl. Ale nic pěkného to nebylo.

@exquis

1. To je dost divné. Pravděpodobně ti do toho zasahují scripty třetích stran nebo tvoje. Dal jsem na github v rychlosti testovací array-datagrid-sandbox, kde se nic takového neděje a vše je přesně podle dokumentace. Stačí akorát composer update a bower install ublaboo-datagrid.
2. Ano, to je pravda. Bohužel eventy tohoto typu nejsou v JS ideální na 100%. Momentálně se odesílá ajaxový request při každém input::onChange. A onchange v js znamená, že se pošle i v případě, že přejde input pouze do stavu focus.

@harmim
1, Protože jednodušeji nastavíš selectu datagridu přeložené options než odebereš překládání. Představ si, že bych to překládal – jak bys docílil toho, aby se překlady zrušily? Moc by to nešlo..

Kdy jsou potřeba nepřeložené selecty? Pokud jsi se s tím ještě nesetkal, tak například tehdy, pokud potřebuješ select jmen produktů, adres, jmen zákazníků, kódů zemí, telefonních čísel… – prostě veškerých dat, která bereš z databáze.

2, Ze stejného důvodu, z jakého nepřekládám ani hodnoty sloupců. Replacement je náhrada za hodnotu sloupce. A opět, vypíše se víceméně hodnota řádku databáze. Může to být jak číslo, tak text. Může to být text k překladu, nebo jenom poupravený text, který se překládat nemá.

Pokud potřebuješ překládat jedno či druhé, je třeba nejdřív vytvořit přeložený seznam a ten předat DataGridu.

@PavelJanda ještě jsem narazil na drobnou chybku – jakmile vypisuješ data pomocí nette/database a máš spojených více tabulek, tak hlásí chybu, že existuje více sloupců „ID“ a že nemá jak spočítat záznamy, to se mi povedlo obejít, když jsem natvrdo změnil, aby nedělal COUNT nad ID, ale „*“

/**
 * Get count of data
 * @return int
 */
public function getCount() {
    return $this->data_source->count("*");
}

Pavel Janda napsal(a):

@exquis To doporučuji nechat na css. Jednotlivé sloupce jsou snadno indetifikovatelné, každý má třídu col-<key>.

Hm, to se mi sice nelíbí, ale pravděpodobně to tak budu muset udělat. Dík za tip, přidám.

Už na to koukám, paráda, díky. I když myslím, že by bylo nebylo špatné udělat něco jako setWidth().. když si představím, že bych musel pro každý sloupec z rozsáhlejšího systému psát vlastní styl .. to by se pak hodilo v tu chvíli udělat v CSS třídy .col-width-10, 20, 30 atd a ty třídy pak jednotlivým sloupcům přiřazovat.

Jinak musím pochválit perfektní datagrid ;)

Co možnost nastavit sloupci vlastní třídu (ideláně udělat to univerzálně jako nastavení atributu), která se pak použije v každé TH a TD onoho sloupce?

@Šaman Tak by to jistě šlo. Tedy jich udělám 10. Jenže pak bude chtít někdo 15% šířku. Tak se přidá dalších 10. Pak bude chtít někdo 17,5%. :D Atp.

Bral bych to jako poslední možnost.