EditableTree – dalsia nadstavba pre TreeView

Ahoj,
vypada to moc pekne, nechces nekam hodit demo? Tyhle veci je dobre hned vyzkouset, uz treba kvuli kompatibilite s prohlizeci.

Moc pekny addon :)

Ad. demo: klidne to nahodim u me na serveru, posli mi to v zipu a ja to zverejnim

ok

timbulko napsal(a):

Vyzera to super. Funguje tam napriklad aj premiestnovanie jednotlivych poloziek? Idealne by bolo napriklad drag & drop.

jj funguje … ved je to postavene pre NestedSortable ktore prave toto riesi

oproti Tomik-ovej verzii tam mam doplnene checkboxy ktore pouzivam pre nastavenie default viditelnosti, kazda zmena je okamzite updatovana v DB …

editacia mena polozky je inline, kedze strukturu nasledne vyuzivam cez ID poloziek a tym padom nepotrebujem nastavovat ich adresy

Editoval Lopo (12. 3. 2010 17:29)

Hodilo by sa, keby to ešte fungovalo aj s vypnutým javascriptom.

timbulko napsal(a):

Hodilo by sa, keby to ešte fungovalo aj s vypnutým javascriptom.

osobne si neviem predstavit ako by toto mohlo bez JS fungovat …

wotaen napsal(a):

Mám jenom poznámku, ve třídě EditableTreeRenderer je třeba nahradit kus js kódu (týká se to všech třech volání)

<?php
'onClick'=>"jQuery.ajax({url: '".$pres->link('remType!', array('id'=>$id))."', type: 'post'}); history.go(0); window.location.reload();"
?>

tímto

<?php
'onClick'=>"jQuery.ajax({
      url: '".$prez->link('addType!')."',
        type: 'post',
        complete:function(data){
              window.location.reload();
        }
      });"
?>

V původním skriptu se totiž občas stalo, že location.reload() nastal dříve než se předchozí request vůbec poslal (connection aborted) a to vedlo k docela nepředvídanému chování, kdy se občas podařila manipulace s prvkem a občas ne.

otestujem a pripadne upravim

Taky jsem nepochopil, proč je tam history.go(0), jede to i bez něj.

to bolo narychlo osetrenie reloadu po akcii – niekedy sa mi totiz stavalo ze nerefreslo stranku s novym stavom, tvoja uprava toto mozno vyriesi

Kdo to používáte a máte košaté stromy, nestává se vám, že by nešlo hýbat (handle) s některou větví? No mě jo a když vyhodím ten vlastní ‚handle‘ (.handler) tak to funguje, divné, ale spíš to bude směřovat na NestedSortable

Lopo napsal(a):

wotaen napsal(a):

Chtěl bych jenom zmínit tenhle řádek

<?php
$g=Html::el('img', array('src'=>$this->img_move, 'height'=>'16', 'class'=>'handler','id'=>'handler'));
?>

Asi by chtělo vyhodit to stejné id pro handlery

to id bolo len v prvej verzii … v 0.1.1 uz bolo odstranene

wotaen napsal(a):

Kdo to používáte a máte košaté stromy, nestává se vám, že by nešlo hýbat (handle) s některou větví? No mě jo a když vyhodím ten vlastní ‚handle‘ (.handler) tak to funguje, divné, ale spíš to bude směřovat na NestedSortable

ja som s tym problem nemal …
co moze byt problem podla mna: nekompatibilita s jQuery urcitej verzie … kedze nestedSortable je balene s 1.1.4 a 1.2.1 co su dost stare verzie
ja to ale prevadzkujem s 1.3.2 a problemy som nezaznamenal

Mě to blbne s 1.4.2, víc nad tím bádat nebudu, spíš mě zajímalo jestli jsem to jenom já

prave som zistil ze v IE mi tento prvok zobrazi nie ako stromovku ale len ako zoznam … tj bez odsadzovania jednotlivych urovni … a pravdupovediac netusim ci sa mi to posahalo teraz ked som v tom robil dost zmien alebo to je od zaciatku vyvoja prvku – pouzivam vyhradne FF, v ktorom to vidim bez problemov

Potreboval by som odozvu, ci mate este niekto tento problem …

najlepsie asi napisat verziu nette, edittree a browsera v ktorom to je kontrolovane

pripadne aj ak je mozne tak link na konkretnu implementaciu aby som si to vedel sam pozret …

Nette 0.9.4, v IE<8 nefunguje – položky jsou pouze pod sebou. Chyba je v JavaScriptu, jelikož stejně se mi to chovalo ve všech prohlížečích, když bylo jquery vyšší než 1.3.2. Samotné IE hlásí chybu právě na řádku, kde začíná definice

<script>
$('#fTTree').NestedSortable( ...
</script>

EDIT: doporučuju službu http://browsershots.org , kde se můžete jak to vypadá v x prohlížečích.

Editoval hrtlik (13. 5. 2010 19:17)

Tak to muzu potvrdit, ze to nefungi v IE7 apod…na testovani je dobry IETester

Ještě by bylo fajn, když nefunguje javascript aby se to zobrazilo ve stromové struktuře a ne pod sebou

dobry den
pise me to tuhle hlasku a myslim ze tam mam vsechny zavislosti includnute. cim to muze byt ?
jQuery.iSort.helper.get(0) is undefined na radce 12 interface.js

regiss napsal(a):

Lopo napsal(a):

uvolnena verzia 0.2.0

najvacsie novinky:

• integracia jQueryUI Dialog pre nastavovanie mena polozky (mozne vypnut)
• moznost vypnut pouzitie CheckBox-ov
• oprava funkcnosti v IE (sposobovala jedna ciarka navyse)

Ahoj nemohl by jsi dat cely Editable Tree na Github, nejde mi to zprovoznit a takhle by to kazdy hned pochopil.

na tom sa pracuje ale rosku inac – edittree a cbtree budu integrovane do treeview

bohuzial mam teraz vo worku kopec roboty, takze ked dojdem podvecer na byt tak uz nemam vobec naladu nieco kodit

ale dufam ze tento vikend sa uz dokopem k tomu aby som sa k tomu posadil a konecne to zbuchal

Matúš Matula napsal(a):

Ahoj, ako to vyzera s tou integraciou? Nie ze by som chcel vyvijat natlak :) Inak sa tiez prihovaram za hodenie toho na Github. Thx

bohuzial pomaly … kedze je dovolenkove obdobie tak vo worku nestihacky …

ale postupne na tom makam … mam uz rozrobene aj normalne demo

Ahoj, tak sa zda, ze v mode expanded to dobre nevykresluje. Stiahol som si treeview z githubu, upravil to, aby sa to spustilo [chybaju tam namespaces v bootstrap.php a mozno este nieco..] a na 1. urovni to zobrazi polozky, kt. tam nepatria [maju parentId rozny on NULL].

btw. kedysi byvalo pekne demo, kde sa dalo presuvat polozky, editovat, tusim aj mazat a mozno este nieco..take daco uz nie je alebo len zle hladam? :-)

Editoval Matúš Matula (26. 8. 2010 11:38)

super, tesim sa ;-)

tak sorting je tam z TreeView, tj na to sa pytaj skor Jod-a kedze to je fork od neho … a ten presenter je jeho original …
Ja som sa zatial nedostal k tomu aby som tie presentery upravil

Ahoj, nevíte prosím proč mi EditableTree nefunguje?

V presenteru mám podle návodu toto:

public function renderDefault()
{
  $tree = new \TreeView($this, 'RolesTree');
  $tree->addLink(null, 'name', 'id', true, $this->presenter);
  $tree->dataSource = \AclModel::getRolesDataSource();
  $rnd = new \EditableTree;
  $tree->setRenderer($rnd);
  $this->template->roles_tree = $tree;
}

v modelu:

public static function getRolesDataSource() {
    return \Dibi::getConnection()->dataSource('SELECT *, active as visible, parent_id as parentId
                                               FROM `::acl_roles`
                                              ');
}

a v šabloně tohle:

{extends '../@layout.phtml'}
{block #content}

{$roles_tree->render()}

Přestože v tabulce mám uložené 4 záznamy, vyrenderuje se mi toto (žádný strom, jen nějaký zvláštní input)

Děkuji moc za rady.

On je potřebný javascript k tomu, aby se strom vůbec zobrazil? Ok, dodal jsem tam všechny javascripty, tlačítko „Přidať položku“ je teď o něco hezčí a otevře se pomocí něho krásné JS okno, ale jinak žádná změna :-)

Zkoušel jsem rozchodit ten ukázkový skript, který je v tom zipu co jsem si stáhnul, ale hází mi to chybu Call to a member function fetchAssoc() on a non-object. Nevadí, aspoň jsem si vzal kousky zdrojáků pro inspiraci a trochu s nima experimentoval. Řekl jsem si, že nejdřív zkusím se stejnými daty vykreslit TreeView, potom CBTree a nakonec EditableTree, ať vidím kde vznikla chyba:

Presenter:

protected function createComponentPTree()
{
        $tree=new \TreeView($this, 'pTree');
        $tree->useAjax=TRUE;
        $mode=1;
        $session=$this->getSession();
        $tree->mode=$mode;
        $tree->rememberState=TRUE;
        $tree->addLink('default', 'name', 'id', true, $this->presenter);
        $tree->dataSource=\AclModel::getRolesDataSource();

        $tree->renderer->wrappers['link']['collapse']='a class="ui-icon ui-icon-circlesmall-minus" style="float: left"';
        $tree->renderer->wrappers['link']['expand']='a class="ui-icon ui-icon-circlesmall-plus" style="float: left"';
        $tree->renderer->wrappers['node']['icon']='span class="ui-icon ui-icon-document" style="float: left"';

        return $tree;
}
public function createComponentFrmCTree()
{
        $form=new \Nette\Application\AppForm($this, 'frmCTree');
        $tree=new \TreeView;
        $tree->addLink(NULL, 'name', 'id', TRUE, $this->presenter);
        $tree->dataSource=\AclModel::getRolesDataSource();
        $form->addCBTree('ctree', 'tree', $tree);
        $form['ctree']->checkColumn='cb';
        $form->addSubmit('send', 'Send');
        $form->onSubmit[]=array($this, 'handleCTree');
        return $form;
}
protected function createComponentEditableTree()
{
$tree = new \TreeView($this, 'editableTree');
$tree->addLink(null, 'name', 'id', true, $this->presenter);
$tree->dataSource = \AclModel::getRolesDataSource();
$rnd = new \EditableTree;
$tree->setRenderer($rnd);
return $tree;
}

Šablona:

<script type="text/javascript" src="{$basePath}/js/interface/interface.js"></script>
<script type="text/javascript" src="{$basePath}/js/inestedsortable.js"></script>
<script type="text/javascript" src="{$basePath}/js/jquery.jeditable.js"></script>
<script type="text/javascript" src="{$basePath}/js/ui/jquery-ui-1.8.2.blitzer.js"></script>
<link type="text/css" href="{$basePath}/css/blitzer/jquery-ui-1.8.2.custom.css" rel="stylesheet" media="screen" />
<style type="text/css">
.helper {
        border: 2px dashed #777777;
        }
.current-nesting {
        background-color: yellow;
        }
.bold {
        color: red;
        font-weight: bold;
        }
</style>

TreeView: <br>
{widget pTree}
<hr>

CBTree: <br>
{widget frmCTree}
<hr>

EditableTree: <br>
{widget editableTree}

Výsledek: screenshot

Napadly mě dvě věci:

1. Zkoušel jsi to rozjet i na datech z MySQL, nebo jen SQLite?
2. Napadlo mě, že se možná nepodařilo rozšířit Nette forms o funkci addCBTree. Dělám to takto v BasePresenteru:

public function startup()
{
  parent::startup();

  \Nette\Forms\FormContainer::extensionMethod('\\Nette\\Forms\\FormContainer::addCheckboxList', array('CheckboxList', 'addCheckboxList'));
  \Nette\Forms\Form::extensionMethod('\\Nette\\Forms\\Form::addCBTree', array('CBTree', 'addCBTree'));
}

Pokud tě ani teď nic nenapadne, okleštím nějak ty zdrojáky a pošlu. Nebo můžu poslat klidně celé tak jak teď jsou, ale myslím že se nemám čím chlubit :-)

EDIT: používám XAMPP, PHP 5.3, Nette 0.9.5

Editoval xxxObiWan (1. 12. 2010 15:38)

pises ze si stiahol zip … tj mas asi starsiu verziu, najnovsia je dostupna na GitHub

Jj, stáhl jsem ten zip právě z githubu

ja to prevadzkujem ciste s MySQL

Aha, právě ty v tom ukázkovém příkladě (co byl v tom zipu) taháš všechny data z SQLite :-)

Jinak, vzal jsem čistý skeleton Nette, hodil do něho ten EditableTree a dělá to pořád to samé. Tady ho dávám ke stažení . Jen připomínám, že v téhle fázi se snažím aspoň o zobrazení stromu, o žádné ajaxové editování, nebo vůbec editování mi zatím nejde (to budu řešit až se ten strom aspoň zobrazí). Proto v odkazovaném příkladu nejsou připojené javascripty a nejsou tam ani handlery pro aditaci apod. Prostě mi jde o nejjednodušší příklad, který je schopný se zobrazit.

Spuštění: Stačí rozbalit archiv na localhost a v DB vytvořit databázi editable_tree_skeleton. O vytvoření tabulek se postará BasePresenter sám.

Opravdu moc děkuju, že ten zbytek času, který máš, do toho dáváš… Ale pořád ten ukázkový příklad nemůžu rozjet :-( Asi jen někde dělám nějakou zbytečnou chybu, ale když spustím na localhostu nejnovější verzi z githubu (stahoval jsem to asi před 30ti minutama), dostanu tohle. I když ty nové třídy z githubu dám do toho mojeho skeletonu, dělá to to co minule.

To jsem jediný, komu to nejde? :-(

Dobry den,

chtel bych se zeptat jestli EditableTree funguje v Nette 2.0-alpha2.

diky

skvělá komponenta, bohuzel mi nefunguje na 100%. Při manipulaci s prvkama lze uchopit jen prvky na lichých úrovních (ve vsech prohlizecich). Neřešil jste někdo podobný problém? Něco zde nakousl wotaen, nicméně problém asi přetrvává. Požívám Nette 2.0

vcera som zacal portovanie treeview aj prislusnych nadstavieb … tipujem ze do konca tydna by som to mohol mat hotove