TwiGrid – omlouvám se :-(
- uestla
- Backer | 799
Moc se omlouvám za nový datagrid, vážně.
Jmenuje se TwiGrid a je ještě mladý a v rozpuku. Je
to spíše takový experiment s klony.
Zprvu bych chtěl podotknout, že jsem masivně vycházel
z hrachova gridu https://github.com/…ras/datagrid,
přičemž jsem některé věci řešil tak trochu jinak (ale zase ne moc).
Myšlenka nestránkování coby UI antipatternu se mi
moc líbí, chyběly mi ale hromadné akce a jiné (zbytek
níže). Stejně jsem přistupoval také k řešení filtrování
coby sestavení vlastního form. kontajnéru.
Kromě již zmíněných group akcích by můj datagrid měl
mj. podporovat i vícesloupcové primární klíče (když
už je nově umí i NDb).
Nerad u gridů vkládám hodně závislých věcí (js a css)
a dlouho studuji, jak co nastavit, aby to fungovalo – tento
jsem postavil na twitter boostrapu (odtud název TwiGrid),
a základních js knihovnách (jQuery, nette.forms, nette.ajax).
Co se puntičkářství týče, tak se u mě chronicky projevuje
spíše jen v kódu a chování aplikace, čili si hodně zakládám
na 3stavovém sortu – nesnáším, když dám řadit podle urč.
sloupce vzestupně, opětovným kliknutím sestupně, a dalšími
kliky už nemám možnost řazení rušit. Dále jsem si dal záležet
na HTML výstupu – což uznávám, že u gridu není zrovna důležité,
ale minimálně mě to potěší.
Co bych rád v nejbližší době dozapracoval je inline editace,
řešení překladů a řádkové akce.
Závěrem se ještě jednou omlouvám všem – i kdyby měly
být zdrojáky jen inspirací v přístupu k řešení některých
věcí, budu rád. Díky za pozornost a dobrou.
- GitHub source: https://github.com/uestla/twigrid
- GitHub demo: https://github.com/…twigrid-demo
- Live demo: http://kesspess.cz/twigrid/
Editoval uestla (29. 5. 2018 14:14)
- uestla
- Backer | 799
Můj experiment pokračuje. Před chvilkou jsem
doimplementoval řádkové úpravy. Mimochodem nevím,
jestli si toho někdo všiml, ale většina ostatních
datagridů, které podporují řádkové akce, jaksi
pozapomněla na CSRF – já ne, CSRF ochranu jsem
poctivě na odkazy namontoval (v tomto patří čest
snad jen poctivému Griditu).
Jak jsem už v úvodním příspěvku předeslal, měl
by můj datagrid podporovat vícesloupcové primární
klíče. On celkově je hodně spjat s primárními
klíči – parametr callbacku pro hromadnou akci
je pole právě primárních klíčů, stejně tak parametr
callbacku pro akci řádkovou (tedy nikoli řádek
tabulky / entita).
Editoval uestla (3. 1. 2013 22:51)
- LeonardoCA
- Člen | 296
+1 vícesloupcové primární klíče – taky jsem si všiml, že je skoro nikdo nepodporuje a zrovna dneska jsem dělal ještě trochu obecnější podporu
+1 CSRF – budu se inspirovat
- hrach
- Člen | 1838
voe :D jestli obslehnes moji fintu na inline-editace tak te dojedu uskrtit :D
jinak pekne :)
edit: kdybys byl co k cemu, tak radej mne doprogramuj podporu vice
klicu :D
edit 2: asi zpychnu :D :D
t's based on another (and great) datagrid written by @hrach – https://github.com/…ras/datagrid. My datagrid is hugely inspired by this component and its programming ideas and therefore I would like to give this man a maximum credit and respect :-)
edit 3: btw, ja se asi chystam dodelat strankovani pro ty lamy, ktery by se bez nej neobesly :D
Editoval hrach (3. 1. 2013 1:43)
- uestla
- Backer | 799
Jelikož jsem férovej kluk, přidal jsem do
dema ukázku použití dibi
(vedle Nette\Database),
ale hlavně ještě přidal zobrazovátko pokládaných
SQL příkazů, abyste se mohli podívat na náročnost
na databázi co do počtu dotazů. Tedy – zobrazují se
jen při zapnutém javascriptu, ale čert to vem.
Může se zdát přinejmenším pozoruhodné, že se při
filtrování či hromadné akci položí ne jeden, ale dva
dotazy (u obou data sourců). Inu to je daň za nepřesměrování,
kdy první dotaz se pokládá z důvodu vytvoření konzistentního
formuláře, a až poté, kdy se zpracuje coby odeslaný,
se položí nový, filtrující dotaz. Je třeba si to
přiznat na rovinu.
Co se dibi ukázky týče, tak je pěkně vidět, že jak
šablony, tak definici, tak všechno ostatní, je oběma
ukázkám společné (Nette\Database a dibi) – jediné,
co se liší, je loader dat. To ale zase abych byl fér
je v podstatě i u ostatních datagridů, to se musí nechat…
Editoval uestla (10. 2. 2013 20:49)
- David Ďurika
- Člen | 328
dobra praca, co takto sa spojit s hrachom ? pride mi ze chcete viac-menej rovnaku vec…
- enumag
- Člen | 2118
@uestla, @hrach: Dotaz na vás dva. :-) Když nepoužíváte stránkování, jak řešíte výpis tabulek s mnoha a mnoha záznamy z nichž je ve většině případů potřeba pouze několik prvních? Tahat celou tabulku je blbost, protože by to trvalo moc dlouho. Dotahujete záznamy nějak ajaxem? (Zdrojáky jsem nestudoval.)
- David Ďurika
- Člen | 328
nie, vypise sa len prvych X zaznamov a ak ti nevihovuju (alebo si hladal nieco ine) tak zacnes filtrovat az kym to nenajdes…
- uestla
- Backer | 799
@snake.aas: Děkuji za upozornění, bylo to neimplementovaným
escape handlerem pro LIKE v PDO driveru (který musím v demu
používat kvůli absenci sqlite3 PHP extenze na hostingu), tak
jsem to vyřešil rukama.
@enumag: Moc jsem to asi nepochopil – sám jsi
uvedl,
že chces ve většině případů vypsat prvních několik záznamů.
Cokoli dalšího už souvisí s hledáním/filtrováním, ale
jeví se mi to čistě jako otázka přístupu k věci.
- David Ďurika
- Člen | 328
@uestla
dobra praca, co takto sa spojit s hrachom ? pride mi ze chcete viac-menej rovnaku vec…
- David Ďurika
- Člen | 328
@uestla kde je vôla tam je aj cesta :)
@hrach co ty na to?
bolo by to super keby ste to spojili aby sme sa nemuseli rozhodovat ze kt. pouzijeme… kedze budu dost podobne a rozdieli budu asi len v „drobnostiach“
- David Ďurika
- Člen | 328
Milo napsal(a):
Stránkování taky nemám rád a už jsem po Hrachovo gridu pokukoval. Ale co počet řádků? Od gridu často vyžaduju export do PDF (nebo XLS) a někdy, aby byl export úplný, je jak naschvál potřeba zobrazit 51 řádků a ne 50.
Dá se to s tímhle gridem?
nechapem co ma strankovanie v gride spolocne s exportom… pri ecporte ti grid doda dataSource a ty si s tym v exporte urobis co potrebujes…
- Milo
- Nette Core | 1283
achtan napsal(a):
nechapem co ma strankovanie v gride spolocne s exportom… pri ecporte ti grid doda dataSource a ty si s tym v exporte urobis co potrebujes…
Stránkování nic, píšu o počtu řádků. Dejme tomu, že chci do XLS dostat výpis všech faktur od 3/2012 do 6/2012. Podle toho si nastavím filtr. Když bude ale počet řádků větší než maximum co grid zobrazí, nedostanou se mi do exportu všechny.
Grid by měl minimálně signalizovat, že existuje víc řádků vyhovující danému filtru. Ještě lépe by měl vypsat jejich počet a ideálně dát možnost k tomu zobrazit je.
- David Ďurika
- Člen | 328
Milo napsal(a):
Stránkování nic, píšu o počtu řádků. Dejme tomu, že chci do XLS dostat výpis všech faktur od 3/2012 do 6/2012. Podle toho si nastavím filtr. Když bude ale počet řádků větší než maximum co grid zobrazí, nedostanou se mi do exportu všechny.
ale ano dostanu! ako som pisal s gridu dostanes len datasource (bez limitu)
Grid by měl minimálně signalizovat, že existuje víc řádků vyhovující danému filtru. Ještě lépe by měl vypsat jejich počet a ideálně dát možnost k tomu zobrazit je.
hej to co pises je pravda… to by tam malo by dajako zvyraznene… ale to je potom uz iba krocik od toho aby tam pribudlo strankovanie… ze ano
- Milo
- Nette Core | 1283
achtan napsal(a):
ale ano dostanu! ako som pisal s gridu dostanes len datasource (bez limitu)
Pak to ale budou jiná data. Čekal bych, že v exportu bude to, co vidím na webu.
hej to co pises je pravda… to by tam malo by dajako zvyraznene… ale to je potom uz iba krocik od toho aby tam pribudlo strankovanie… ze ano
Tady nejde o stránkování, ale o indikaci, že to co vidím není vše, a o způsobu jak se k tomu dostat. Cool by bylo, kdyby při rolování dolů data přibývala (ala FB timeline).
Grid, který se řídí pravidlem „chceš míň řádků ⇒ filtruj detailněji“ nenajde uplatnění tam, kde je potřeba se dostat ke všem výsledkům.
Každopádně tento i hrachův grid jsou pěkný, nechci je nijak hanit. Jen se ptám, jestli je do nich snadné dopasovat to, co poptávám.
- uestla
- Backer | 799
Rád bych uvedl na pravou míru diskutovaný
export, stránkování, apod., abychom se tu
nějak moc nepoprali – současný stav je takový
(a v čem je tento přístup odlišný oproti
ostatním gridům), že nic jako DataSource
v tom původním slova smyslu neexistuje. Existuje
metoda
vracející data na základě předaných
parametrů (řazení a filtry), a to hned v okamžiku
zavolání – tedy žádné dodatečné zlimitnění, apod.
V současné chvíli je limit
natvrdo zadrátován,
čímž při výše zmíněném požadovaném exportu
celého výsledku samozřejmě narazíme. Otázkou je,
jak rozumně tohle vyřešit…
Osobně bych se inspiroval např. u Admineru,
kde se po twitterovsku (nevím, kdo s tím přišel
jako první – autorovi se omlouvám) přisouvají
další a další záznamy podobně jako v timelině twitteru
(tedy nechtěl bych to dát na scrollování, ale na
tlačítko). Další možnost by byla rozšířit hromadné
akce, ale to už by chtělo fištróna a toho nemám.
Editoval uestla (5. 1. 2013 0:12)
- uestla
- Backer | 799
Přiznejme si, že demo
bylo takové nijaké,
výpis dat z jedné tabulky spojený s nějakým
tím formátováním (aby se neřeklo), to už
dnes nikoho neoslní. Přidal jsem tedy trochu
režie, jméno a příjmení uživatelů jsem spojil
dohromady, přidal jsem údaj o státě z boční tabulky.
Také je nyní možné při změně filtrů a řazení
se ve stejném stavu přepnout do jiného datasourcu
při zachování kritérií a prohlédnout si, jak
se změní (popravdě se moc nemění) pokládané
dotazy.
Editoval uestla (10. 2. 2013 20:50)
- David Ďurika
- Člen | 328
uestla napsal(a):
Otázkou je,
jak rozumně tohle vyřešit…Osobně bych se inspiroval např. u Admineru,
kde se po twitterovsku (nevím, kdo s tím přišel
jako první – autorovi se omlouvám) přisouvají
další a další záznamy podobně jako v timelině twitteru
(tedy nechtěl bych to dát na scrollování, ale na
tlačítko). Další možnost by byla rozšířit hromadné
akce, ale to už by chtělo fištróna a toho nemám.
co takto dat na spodok (alebo niekam kde sa to bude hodit) tabulky selectBox s moznostami:
- zobrazit 20 zaznamov
- zobrazit 50 zaznamov
- zobrazit 100 zaznamov
- zobrazit vsetky zaznami
nieco v tom zmysle…
- uestla
- Backer | 799
Po delší odmlce se opět hlásím – přidendal
jsem podporu pro překlady (což ovšem nese pouze
navěšení translatoru na formulář a do šablony,
čili žádný světoborný počin).
Dále jsem se pokusil implementovat timeline
chování, což prosím berte zatím jako experimentální,
chová se to teď tak nějak divně, nicméně vyzkoušet
si to můžete. V zápatí
datagridové tabulky přibyla
3 tlačítka pro přisunutí dalších záznamů, zobrazení
všech, a anulování čítače.
Hlavní nevýhody, se kterými jaksi nejsem moc spokojen,
jsou neustálé zvyšování čítače „stránek“ při dalším
a dalším klikání na šipečku „načíst další“ i po načtení
již všech záznamů, a další – což možná nemusí až
tak vadit – jsem po změně filtrů automaticky anuloval
čítač.
Jako poznámku si dovolím uvést, že jelikož má
demo databáze několik tisíc záznamů, nastavil jsem
pro prezentační účely limit i pro zobrazení všech
záznamů, proto se tomu prosím nedivte.
@Milo: Teď už mohu odpovědět na tvoji
otázku.
V tuto chvíli je možné zobrazit všechny záznamy
odpovídající filtru. Pak už můžeš všechny záznamy
označit (klikem do prvního řádku záhlaví nebo přímo
na hromadný checkbox) a vše exportovat (coby
vlastní hromadnou akci). Přisouvání dalších a dalších
záznamů (resp. počet nově přisunutých) je plně
v tvojí režii.
Editoval uestla (10. 2. 2013 20:51)
- uestla
- Backer | 799
Snad vás z mých sloupků nebolí hlava, ale:
Přidal jsem filtr pro
datum narození tvořený
dvěma inputy – čímž jsem chtěl demonstrovat
hrachovu super myšlenku nezávislosti filtrů
na sloupcích gridu. Přidám sice sloupec,
ale filtrovací form container přijme dva inputy
(což pochopitelně v šabloně přizpůsobím).
Co se datagridu týče, ten jsem obohatil o možnost
nastavení defaultního filtru (využito právě
u datumu narození).
Co se počtu dotazů týče, pokládá se jich malinko
víc – nikoli však z důvodu neefektivnosti,
ale např. jeden dotaz padne na zjištění všech
využitých zemí (pro selectbox filtr. formu),
jeden zase pro zjištění min. a max. data narození
coby výchozího filtru. Čili ne všechny
zobrazované dotazy přímo souvisejí s načítáním
dat, berte to prosím na vědomí.
Jen bych ještě co se jiného přístupu týče
doplnil, že (výše už jsem to zmínil) při
načítání dat jsou dopředu známy všechny
informace ohledně řazení, filtrů a nyní nově
i čítač stránky, čili je možné data načíst
naráz. Co je ale nevýhoda je, že kvůli tomu
nezjistím, zda jsem už na poslední stránce,
resp. kolik stránek ještě zbývá. Z toho důvodu
pokud postupným přisouváním dalších a dalších
záznamů dorazím na poslední stránku, tlačítko
nezmizí a bude pořád zvyšovat čítač, až přeteče
integer a to zapříčiní zobrazení
všech záznamů
(alespoň tedy v demu – chování si může určit
každý svoje).
Editoval uestla (10. 2. 2013 20:52)
- uestla
- Backer | 799
Svůj monolog ještě rozšířím – po několika
všemožných fixech jsem přidal možnost (nikoli
povinnost) nastavit počet
všech záznamů (před
závěrečným zlimitněním), čímž je pak možno
v timelině detekovat přisunutí posledních
záznamů. Pokud celkový počet nenastavíme,
bude se grid chovat stejně jako je popsáno výše.
- LeonardoCA
- Člen | 296
uestla napsal(a):
Z toho důvodu
pokud postupným přisouváním dalších a dalších
záznamů dorazím na poslední stránku, tlačítko
nezmizí a bude pořád zvyšovat čítač, až přeteče
integer a to zapříčiní zobrazení všech záznamů
K zobrazen( všech záznanamů? Jinak řečemp to způsobí při dostatečném počtu záznamů pád serveru nebo uživatelova prohlížeče, podle toho kdo vydrží víc… (A k tomu jednou pokud bude knihovna používaná určitě dojde)- Chtělo by to i limit pro maximální počet záznamů když už.
- pepakriz
- Člen | 246
Pokud jsem něco nepřehlédl, tak při načítání dalších záznamů se posílá ajaxem celý grid znovu. To by šlo vyřešit lépe. Viz https://github.com/…ette.ajax.js#….
- uestla
- Backer | 799
Od timeline jsem nakonec upustil, bylo s ní
více starostí, než užitku. Od minule se toho
navenek moc nezměnilo, ale vězte, že co šlo,
to se nyní inicializuje či zjišťuje líně,
ať už počet
dat, nebo sestavení
formuláře.
Nechť vám slouží…
- Reloecc
- Člen | 15
Ahoj, jak nejsnadněji TwiGrid naučit filtraci/sortování podle sloupců, která mají jiná jména, než jména sloupců v databázi?
Příkladem: více tabulek v jednom gridu (user.name, book.name), nebo jeden sloupec zobrazený vícekrát (name1, name2, name3)
Přehlížím nějakou snadnou cestu, nebo je nutné editovat střeva
TwiGridu?
Díky..
- uestla
- Backer | 799
Jelikož do databáze (nebo jinam) sahá náš dataLoader callback, je na nás, na jaké sloupce či co nakonec bude sahat.
Čili sloupce si pojmenuju podle svého a v loaderu správně namapuji:
$grid->addColumn('user_name')->setSortable();
$grid->addColumn('book_name')->setSortable();
$grid->setDataLoader(function ($grid, $columns, $filters, $order) {
// ...
foreach ($order as $column => $desc) {
switch ($column) {
case 'user_name':
$column = 'user.name';
break;
case 'book_name':
$column = 'book.name';
break;
}
$db->order($column . ($desc ? ' DESC' : ''));
}
// ...
});Stejně při filtrování…
