Yahoo! User Interface Blog (YUIBlog)

Quick Edit mód pro Yui 3 DataTable

I když YUI 3 DataTable ještě nemá inline editaci jednotlivých buněk, to je relativně snadno implementovat Rychlý režim úprav. Rychlých plugin pro DataTable v Galerii Yui 3 umožňuje, aby všechny viditelné hodnoty v DataTable, který chcete upravit současně.

( Klikněte na screenshot hrát v tomto příkladu .)

Přehled

Stejně jako u YUI 2 verze , základní myšlenka rychlého režimu úprav je vyměnit veškeré buněčné formátovačů za nové, které obývají buňky s formulářovými prvky, např. vstupních polí a rozbalovacích nabídkách. To se děje, když start() je volána na základě konfigurace je popsáno níže. Poté, co uživatel skončí, můžete volat getChanges() získat změněné hodnoty a potom je přetrvávají. Pro ukončení rychlého režimu úprav, volejte cancel() . (To je pojmenované zrušit místo zastavení připomenout, že zruší všechny změny.)

Vzhledem k tomu, Quick Edit galerie modul je plugin pro DataTable, musíte jej připojte do DataTable, než budete moci použít:

 my_table.plug (Y.Plugin.DataTableQuickEdit);

To ukládá plugin v qe člen DataTable, tak musíte zavolat plugin jeho funkce takto:

 my_table.qe.start ();

Konfigurace

Quick Edit přidá dvě nové konfigurační atributy na všechny sloupce: quickEdit a qeFormatter .

Pokud sloupec v quickEdit majetek je definován, bude sloupec možné upravovat v rychlém režimu úprav. Chcete-li přijmout všechny výchozí nastavení, můžete si jednoduše nastavit quickEdit:true . Pro větší kontrolu, můžete předat objekt s následujícími vlastnostmi:

formatter

Buňky, které budou poskytovat formátovací vhodnou formou pole: <input type="text"> a <textarea> nebo <Zvolit>. Ve výchozím nastavení buněk formátovací Y.Plugin.DataTableQuickEdit.textFormatter se používá pro všechny buňky k produkci vstupní prvky. Chcete-li získat textarea prvku, konfigurovat sloupec, který použijete Y.Plugin.DataTableQuickEdit.textareaFormatter místo.

validation

Ověření konfigurace pro každé pole ve sloupci.

css

CSS třídy kódující základní ověřování pravidel:

yiv-required

Hodnota nesmí být prázdná.

yiv-length:[x,y]

Řetězec musí být alespoň x znaků a na většině y znaků. Alespoň jeden z X a Y musí být určen.

yiv-integer:[x,y]

Celočíselná hodnota musí být alespoň x a na většině y . x a y jsou oba volitelné.

yiv-decimal:[x,y]

Desítková hodnota musí být alespoň x a na většině y . Exponenty jsou zakázána. x a y jsou oba volitelné.

fn

Funkce, která bude volána s DataTable jako jeho rozsahu a buňky tvoří prvek jako argument. Vrátí true, pokud je hodnota platná. V opačném případě volejte this.displayMessage(...) se zobrazí chybu a pak se vrátit false.

msg

Mapa typů zpráv, které se zobrazí při základní nebo regex ověřovací pravidlo selže. Platné typy jsou: required , min_length , max_length , integer , decimal a regex . Neexistuje žádný výchozí pro typ regex , takže musíte zadat zprávu, pokud se konfigurovat regex ověření. Zprávy standardní chyby pro ostatní typy jsou uloženy v Y.FormManager.Strings (poskytuje výstavní formmgr-CSS-validace ) a může být přepsána a / nebo lokalizované.

regex

Regulární výraz, že hodnota musí splňovat, aby mohla být považována za platnou.

Někdy musí neupravitelné sloupec být vyjádřen rozdílně při rychlém režimu úprav. Nejlepším příkladem je sloupec obsahující odkaz, protože navigace od stránky, zatímco v režimu Quick Edit mohou být katastrofální. Chcete-li odstranit odkaz v Quick Edit, konfiguraci qeFormatter pro sloupci být Y.Plugin.DataTableQuickEdit.readonlyLinkFormatter . U e-mailových adres, použijte Y.Plugin.DataTableQuickEdit.readonlyEmailFormatter . Můžete také napsat vám vlastní, permanentní formátovače. Jednoduše postupujte podle běžných pravidel pro výstavbu buněk DataTable formátovače.

Chybějící funkce

Vzhledem k chybě v YUI 3.3.0 DataTable , td prvek předán sloupce formátoru je ve skutečnosti z předchozího sloupce. Z tohoto důvodu bylo příliš problematické podpořit kopii dolů, kde tlačítko v první řadě umožňuje kopírovat hodnotu dolů na všechny ostatní řádky.

Chyba také vyžádala kompletní přepracování základních buněčných formátovačů Quick Edit pro návrat textu místo manipulaci s DOM. To je důvod, proč jsou vlastní buňky formátovačů není oficiálně podporován v této první verzi. Pokud jste dobrodružné povahy, můžete nadále vytvářet je, ale mějte na paměti, že budete muset přepsat je, včetně přidání podporu pro kopírování dolů, jednou chyba v DataTable vyřešen.

O autorovi: John Lindal ( @ jafl5272 na Twitteru) je jedním z hlavních inženýrů budovat základ, na kterém Yahoo! APT je postaven. Předtím pracoval na síti Yahoo! Publisher.

Hledat konverzace: Bloglines | technorati

Sdílet a rozšiřovat: Záložka se Del.icio.us | Digg to! | reddit!