Často potřebuji ukázat tabulková data a chci veškerou magii. . . třídění sloupců, stránkování atd. Raději používám sloupce, kde kliknete na název sloupce a třídění se provádí pro uživatele (obvykle pomocí javascriptu, i když je to také obtížnější, pokud máte stránkování, protože třídíte pouze data na na obrazovce nebo se vám uchýlí podle tohoto sloupce a poté je umístíte zpět na první stránku?) Jak ale mohu označit, že byl roztříděn? Co je pro to dobrý tip na uživatelské rozhraní? Jak by měly vypadat názvy sloupců? Také ráda obarvím každý další výsledek šedou barvou, ale pak vidím někoho, kdo má obrazovku s příliš vysokým jasem a není dost šedá, aby dokázala rozlišit řádky, ale pokud zvýším množství šedé, není dostatečný kontrast pro pohodlné čtení černého textu.
Jaké jsou příklady hotových tabulek?
Tradičně je "Seřadit podle" označeno pomocí šipek nahoru/dolů, které představují třídění vzestupně nebo sestupně. Názvy sloupců by měly mít vyšší úroveň kontrastu než hodnoty, například odvážnější text nebo stínované pozadí.
Osobně při obarvení střídavých řádků obvykle přecházím na světlejší než na tmavší, protože efekt se zvyšuje tím výrazněji, čím déle vaši uživatelé interagují s tabulkou.
Zde je několik skvělých příkladů možností rozvržení tabulky: http://patterntap.com/tap/collection/tables
Momentálně pro vás nemám žádné okamžité příklady, ale zde je příklad tabulky, kterou jsem navrhl pro moji webovou aplikaci a která následuje mé výše uvedené rady/preference:
Z čistě vizuálního hlediska se podívejte na http://www.datatables.net/ (plugin pro jQuery). Ukázková tabulka na domovské stránce obsahuje funkce, které zmiňujete, již implementované.
Tech-moudrý, záleží na tom, co vaše back-end technologie používá. Pokud používáte server .Net, ovládací prvky obsažené v ASP 3.5 a 4 jsou velmi snadné pracovat, jak jste popsali, bez závislosti na jQuery a plug-inu).
Podívejte se na mřížky ExtJS. http://dev.sencha.com/deploy/dev/examples/#sample-
Nejlepší uživatelská interakce jakéhokoli rámce JS, který jsem viděl. Spoléháme se na to značně pro naši aplikaci v Marketu.
Pokud potřebujete datovou mřížku s „veškerou magií“, zkuste dhtmlxGrid: http://www.dhtmlx.com/docs/products/dhtmlxGrid/index.shtml
Je to jedna z nejsilnějších mřížek JavaScriptu, které jsem kdy viděl.
Pokud chcete třídit oběma směry, existuje klasická šipka nahoru/dolů, jako u oken Průzkumník/gnome nautilus, obvykle jsou tmavší barvy než buňka.