Editace in place – spolupráce s Jeditable,

Mám složité zobrazení např. skladové položky, které obsahuje spoustu údajů. Data, místa, názvy, osoby, poznámky, atd. Chci uživatelům umožnit co nejjednodušší editaci. Zobrazit obrovský formulář je velmi nepřehledné, tak jsem se nakonec rozhodl využít jQuery plugin Jeditable. Uživatelé velmi vítají, že jim prostě stačí kliknout a editovat. Po nějakém zkoušení jsem to uvedl do provozu a funguje to dobře. Jsem ale začátečník, tak bych prosil, máte-li trochu času, zkouknout řešení:

Jeditable vyžaduje jen adresu scriptu, který zpracuje data předaná POSTem.

Šablona (část) – co se má editovat se obalí <div> s příslušnou třídou a id, kde je název položky:

<tr>
<td>Poznámky:</td>
<td><div class="edit_area" id="info_poznamky*{$polozka->id}">{$polozka->info_poznamky}</div></td>
</tr>

K tomu je javascript:

$(document).ready(function() {
     $('.edit_area').editable('?presenter=Receiver', {
         type      : 'textarea',
         cancel    : 'Zrušit',
         submit    : 'OK',
         indicator : '<img src="img/indicator.gif">',
         tooltip   : 'Editovat...'
     });
 });

Zadanému scriptu se pošle id=element_id&value=text k vložení.

Presenter:

class ReceiverPresenter extends BasePresenter {

    private $Model;
    public function getModel() {
        if ($this->Model === NULL) $this->Model = new Model;
        return $this->Model;}

    public function isAjax() {
    // překryjeme isAjax, jinak se detekuje ajaxový požadavek a vrátí se jen {"state":[]}
        return FALSE;}

    public function renderDefault () {
        $user = Environment::getUser();
        if ($user->isAuthenticated()) {

            $this->setLayout(); //žádný layout se nepoužije

            if($_POST) {
                $arr = array(); //k vložení

                $parts = explode("*", $_POST["id"]); //id pro update máme za hvězdičkou

                if(is_array($parts)) {
                    $arr[$parts[0]]= $_POST["value"]; //toto se vloží do tabulky
                    if(!empty($parts[1])) {$id = $parts[1];
                        $this->getModel()->update($id, $arr); //volání modelu
                        $this->template->odpoved = $arr[$parts[0]]; //toto se zobrazí uživateli
                    }
                    else $this->template->odpoved = "Chyba: ID nelze rozlišit, zápis není možný.";
                } else $this->template->odpoved = "Chyba: žádná data k vložení, zápis není možný.";
            }else $this->template->odpoved = "Chyba: žádná data k vložení, zápis není možný.";
        }
    }
} //class

V šabloně k presenteru Receiver.default je jen

{$odpoved}

Funguje to tak, že uživatel jen klikne na text v poznámce, ten se změní ve formulář, napíše co chce, stiskne [OK], presenter Receiver

• zpracuje $_POST data, předá modelu, ten je pomocí Dibi updatuje
• vrátí zpět co se má objevit na místě formuláře

Jakémukoliv volnému textu v šabloně od této chvíle stačí přiřadit class="edit_area" a správné id a editace je hotová. Totéž se dá udělat pro obyčejný text, data, selecty.

Editoval jarks (11. 8. 2009 17:17)