Hlavička tabulky |
#29 |
Řádky a sloupce v hlavičce si můžeme upravovat. Některé z řádků můžou zabírat více než jeden řádek a stejně tak tomu může být u sloupců.
V hlavičce vytvoříme celkově tři řádky a šest sloupců (jeden nultý). Začneme opět s nadefinováním sloupců.
{
"name": "Položka",
"fields": {
"columns": [
{
"id": "table_P1E", "type": "recordSet", "name": "Údaje o položce",
"columns": [
{"id": "pr1e_sl_1", "type": "string", "len": 20, "name": "Název"},
{"id": "pr1e_sl_2", "type": "int", "name": "Kód"},
{"id": "pr1e_sl_3", "type": "money", "name": "Cena položky"},
{"id": "pr1e_sl_4_od", "type": "date", "name": "Záruka od"},
{"id": "pr1e_sl_4_do", "type": "date", "name": "Záruka do"}
]
}
],Před samotnými sloupci jde v příkladu vidět, že jsme celé tabulce přiřadili id a nazvali ji. id využijeme v dalším kroku.
Sloupec č. 4 jsme rozdělili do dvou.
Začneme s hlavičkou:
"layout": [
{
"recordSetTable": {
"recordSetColumn": "table_P1E",
"header": [
{
"#": "Řádek",
"pr1e_sl_1": "Název",
"pr1e_sl_2": "Kód",
"pr1e_sl_3": "Cena",
"pr1e_sl_4_od": "Záruka",
"_options": {
"colSpan": {"pr1e_sl_4_od": 2},
"rowSpan": {"#": 3, "pr1e_sl_1": 2, "pr1e_sl_2": 2, "pr1e_sl_3": 2},
"cellClasses": {"pr1e_sl_1": "center", "pr1e_sl_2": "center", "pr1e_sl_3": "center", "pr1e_sl_4_od": "center"}
}
},Tady vidíme první řádek hlavičky. Některé ze sloupců budou zasahovat do více než jednoho řádku (Řádek, Název, Kód, Cena), některé zaberou řádek jen jeden (Záruka).
- V recordSetColumn vidíme id naší tabulky.
- colSpan určí, kolik sloupců sloupec zabere. V příkladu chceme sloupec „Záruka“ rozšířit do dvou sloupců. Stačí tedy přidělit sloupci „pr1e_sl _4_od“ délku 2. Pokud sloupec zabere jen jeden sloupec, nemusíme to určovat.
- rowSpan nám určí, kolik řádků zabere sloupec. Pokud zabere sloupec jen jeden řádek, nemusíme to určovat.
- V cellClasses opět nadefinujeme zarovnání na střed.
Tímto krokem jsme naplnili první řádek hlavičky. Některé řádky budou spadat do více než jednoho řádku. Tento krok vytvoří tyto řádky: (šedé bez textu ještě vytvořené nejsou)
V druhém řádku doplníme sloupce „Od“ a „Do“, které umístíme pod „Záruka“.
{
"pr1e_sl_4_od": "Od",
"pr1e_sl_4_do": "Do",
"_options": {
"cellClasses": {"pr1e_sl_4_od": "center", "pr1e_sl_4_do": "center"}
}
},Zde naplníme sloupce č. 4. Sloupcům zde nemusíme přiřazovat colSpan ani rowSpan, jelikož je jejich hodnota rovná jedné. Pouze je zarovnáme na střed. Do řádku jiné sloupce nepřidáváme, sloupce před těmito dvěmi sloupci jsme již přidali v minulém kroku, kdy jsme jim nastavili hodnotu, která je roztáhla přes více řádků. Výsledek dalšího kroku bude tento:
Třetí řádek naplníme čísly. Ty budou symbolizovat čísla sloupců (pokud si toto u tabulky nepřejeme, vynecháme tento krok a upravíme rozsah sloupce "Řádek).
{
"pr1e_sl_1": "1",
"pr1e_sl_2": "2",
"pr1e_sl_3": "3",
"pr1e_sl_4_od": "4 - od",
"pr1e_sl_4_do": "4 - do",
"_options": {
"cellClasses": {"pr1e_sl_1": "center", "pr1e_sl_2": "center", "pr1e_sl_3": "center", "pr1e_sl_4_od": "center", "pr1e_sl_4_do": "center"}
}
}
],Zde vidíme přiřazení čísla každému sloupci. Nultý sloupec „Řádek“ vynecháváme, protože jsme si jeho délku nastavili přes tři řádky a číslo pro něj uvádět nechceme. Text opět zarovnáme na střed.
Tímto jsme vytvořili hlavičku tabulky. Na konec přidáme ještě vytvoření řádků (tento kód vytvoří šest řádků, které budou mít všechny stejné prázdné kolonky, je možné použít kód z předešlé tabulky).
"cols": {
"#": " Řádek",
"pr1e_sl_1": " qwe",
"pr1e_sl_2": " aaa",
"pr1e_sl_3": " bbb",
"pr1e_sl_4_od": "Od", "pr1e_sl_4_do": "Do"
}
}
}
]
}
}Celý kód bude vypadat takto:
{
"name": "Položka",
"fields": {
"columns": [
{
"id": "table_P1E", "type": "recordSet", "name": "Údaje o položce",
"columns": [
{"id": "pr1e_sl_1", "type": "string", "len": 20, "name": "Název"},
{"id": "pr1e_sl_2", "type": "int", "name": "Kód"},
{"id": "pr1e_sl_3", "type": "money", "name": "Cena položky"},
{"id": "pr1e_sl_4_od", "type": "date", "name": "Záruka od"},
{"id": "pr1e_sl_4_do", "type": "date", "name": "Záruka do"}
]
}
],
"layout": [
{
"recordSetTable": {
"recordSetColumn": "table_P1E",
"header": [
{
"#": "Řádek",
"pr1e_sl_1": "Název",
"pr1e_sl_2": "Kód",
"pr1e_sl_3": "Cena",
"pr1e_sl_4_od": "Záruka",
"_options": {
"colSpan": {"pr1e_sl_4_od": 2},
"rowSpan": {"#": 3, "pr1e_sl_1": 2, "pr1e_sl_2": 2, "pr1e_sl_3": 2},
"cellClasses": {"pr1e_sl_1": "center", "pr1e_sl_2": "center", "pr1e_sl_3": "center", "pr1e_sl_4_od": "center"}
}
},
{
"pr1e_sl_4_od": "Od",
"pr1e_sl_4_do": "Do",
"_options": {
"cellClasses": {"pr1e_sl_4_od": "center", "pr1e_sl_4_do": "center"}
}
},
{
"pr1e_sl_1": "1",
"pr1e_sl_2": "2",
"pr1e_sl_3": "3",
"pr1e_sl_4_od": "4 - od",
"pr1e_sl_4_do": "4 - do",
"_options": {
"cellClasses": {"pr1e_sl_1": "center", "pr1e_sl_2": "center", "pr1e_sl_3": "center", "pr1e_sl_4_od": "center", "pr1e_sl_4_do": "center"}
}
}
],
"cols": {
"#": " Řádek",
"pr1e_sl_1": " qwe",
"pr1e_sl_2": " aaa",
"pr1e_sl_3": " bbb",
"pr1e_sl_4_od": "Od", "pr1e_sl_4_do": "Do"
}
}
}
]
}
}A jeho výsledek bude tento:
