Ovládací prvok DetailsList

Článok
01/15/2024

Ovládací prvok používaný na zobrazenie množiny údajov.

Poznámka

Úplnú dokumentáciu a zdrojový kód nájdete v úložisku komponentov kódu GitHub.

Ovládací prvok DetailsList.

Description

Zoznam podrobností (DetailsList) je robustný spôsob, ako zobraziť kolekciu položiek bohatú na informácie a umožniť ľuďom triediť, zoskupovať a filtrovať obsah. Ak je hustota informácií kritická, použite DetailsList.

Komponent kódu DetailsList umožňuje používať komponent Fluent UIDetailsList vnútri aplikácií plátna a vlastných stránok.

Môže byť naviazaný na množinu údajov Dataverse alebo lokálnu kolekciu.
Podporuje konfigurovateľné stĺpce oddelené od metaúdajov stĺpcov poskytovaných zdrojovou množinou údajov z dôvodu flexibility.
Typy buniek pre odkazy, ikony, rozbalenie/zbalenie a bunky s vedľajším textom.
Podpora stránkovania.
Podpora triedenia pomocou triedenia Dataverse alebo konfigurovateľných vlastností SortBy.

Vlastnosti

Kľúčové vlastnosti

Vlastnosť	Description
`Items`	Množina údajov, ktorá obsahuje riadky na vykreslenie. Zobrazuje sa tiež ako `Records`. Pozrite si tabuľku Vlastnosti položiek nižšie.
`Columns`	Množina údajov, ktorá obsahuje metaúdaje možností pre stĺpce. Ak je poskytnutá táto množina údajov, úplne nahradí stĺpce poskytnuté v množine údajov Záznamy. Pozrite si tabuľku Vlastnosti stĺpcov nižšie.
`SelectionType`	Typ výberu (žiadny, jeden, viacero)
`PageSize`	Definuje, koľko záznamov sa má načítať na stránku.
`PageNumber`	Zobrazí aktuálnu zobrazenú stránku.
`HasNextPage`	Výstupy sú pravdivé, ak existuje ďalšia strana.
`HasPreviousPage`	Výstupy sú pravdivé, ak existuje predchádzajúca strana.
`TotalRecords`	Vypíše celkový počet dostupných záznamov.
`CurrentSortColumn`	Názov stĺpca, ktorý sa má zobraziť ako aktuálne používaný na triedenie
`CurrentSortDirection`	Smer aktuálne používaného stĺpca triedenia

Vlastnosti `Items`

Tieto atribúty musia byť dostupné v zdroji údajov, aby sa umožnila súvisiaca funkčnosť. Na pripojenie týchto hodnôt k pôvodnému zdroj údajov možno použiť vzorec Power Fx AddColumns().

Vlastnosť	Description
`RecordKey`	(voliteľné) – Jedinečný názov kľúčového stĺpca. Túto možnosť uveďte, ak chcete, aby sa výber zachoval pri aktualizácii záznamov a ak chcete `EventRowKey` , aby po spustení udalosti namiesto indexu `OnChange` riadka obsahoval identifikátor.
`RecordCanSelect`	(voliteľné) – Názov stĺpca, ktorý obsahuje hodnotu `boolean` určujúcu, či je možné vybrať riadok.
`RecordSelected`	(nepovinné) – Názov stĺpca, ktorý obsahuje hodnotu `boolean`určujúcu, či je riadok predvolene vybraný a či nastavenie `InputEvent` obsahuje `SetSelection`. Pozrite si časť o `Set Selection` nižšie.

Vlastnosti `Columns`

Vlastnosť	Description
`ColDisplayName`	(Povinné) – Poskytuje názov stĺpca, ktorý sa má zobraziť v hlavičke.
`ColName`	(Povinné) – Poskytuje názov aktuálneho poľa, ktorý sa má zobraziť v kolekcii Položky.
`ColWidth`	(Povinné) – Poskytuje absolútnu pevnú šírku stĺpca v pixeloch.
`ColCellType`	Typ bunky na vykreslenie. Možné hodnoty: `expand`, `tag`, `indicatortag`, `image`, `clickableimage`, `link`. Ďalšie informácie nájdete v nasledujúcich častiach.
`ColHorizontalAlign`	Zarovnanie obsahu bunky, ak `ColCellType` je typu `image` alebo `clickableimage`.
`ColVerticalAlign`	Zarovnanie obsahu bunky, ak `ColCellType` je typu `image` alebo `clickableimage`.
`ColMultiLine`	Pravda, keď by sa mal text v bunkách zalamovať, ak je príliš dlhý na to, aby sa zmestil do dostupnej šírky.
`ColResizable`	Pravda, ak by sa mala veľkosť šírky hlavičky stĺpca meniť.
`ColSortable`	Pravda, keď by mal byť stĺpec zoraditeľný. Ak množina údajov podporuje automatické triedenie prostredníctvom priameho spojenia Dataverse, údaje sa zoradia automaticky. V opačnom prípade sa nastavia výstupy `SortEventColumn` a `SortEventDirection`, ktoré sa musia použiť vo väzobnom výraze v záznamoch Power FX.
`ColSortBy`	Názov stĺpca, ktorý sa má poskytnúť pre udalosť `OnChange` , keď je stĺpec zoradený. Ak napríklad zoraďujete stĺpce dátumu, chcete zoradiť podľa skutočnej hodnoty dátumu, a nie podľa formátovaného textu zobrazeného v stĺpci.
`ColIsBold`	Pravda, keď by údaje bunky údajov mali byť tučným písmom
`ColTagColorColumn`	Ak je typ bunky značkou, nastavte hexadecimálnu farbu pozadia textovej značky. Je možné nastaviť na `transparent`. Ak typ bunky nie je značkou, nastavte hexadecimálnu farbu, ktorá sa použije ako indikátorová kruhová tag bunka. Ak je textová hodnota prázdna, značka sa nezobrazí.
`ColTagBorderColorColumn`	Nastavte na hexadecimálnu farbu, ktorá sa použije ako farba okraja textovej značky. Je možné nastaviť na `transparent`.
`ColHeaderPaddingLeft`	Pridá odsadenie do textu hlavičky stĺpca (v pixeloch)
`ColShowAsSubTextOf`	Nastavením tohto na názov iného stĺpca sa stĺpec presunie a stane sa z neho podriadený stĺpec tohto stĺpca. Pozri nižšie v časti Stĺpce s vedľajším textom.
`ColPaddingLeft`	Pridá odsadenie do ľavej časti podriadenej bunky (v pixeloch)
`ColPaddingTop`	Pridá odsadenie do hornej časti podriadenej bunky (v pixeloch)
`ColLabelAbove`	Premiestni označenie nad hodnotu podriadenej bunky, ak sa zobrazuje ako podtextový stĺpec.
`ColMultiValueDelimiter`	Spája hodnoty poľa s viacerými hodnotami spolu s týmto oddeľovačom. Pozri nižšie pod stĺpcami s viacerými hodnotami.
`ColFirstMultiValueBold`	Pri zobrazení hodnoty poľa s viacerými hodnotami je prvá položka zobrazená tučným písmom.
`ColInlineLabel`	Ak je nastavená na hodnotu reťazca, potom sa používa na zobrazenie označenia vnútri hodnoty bunky, ktoré sa môže líšiť od názvu stĺpca. napríklad
`ColHideWhenBlank`	Ak je to pravda, akékoľvek vnorené označenie bunky a výplň budú skryté, ak je hodnota bunky prázdna.
`ColSubTextRow`	Pri zobrazovaní viacerých buniek v bunke vedľajšieho textu nastavte index riadka. Nula označuje riadok obsahu hlavnej bunky.
`ColAriaTextColumn`	Stĺpec obsahujúci popis árií pre bunky (napríklad bunky ikon).
`ColCellActionDisabledColumn`	Stĺpec obsahujúci boolovský príznak na určenie, či je akcia bunky (napríklad akcia ikony) zakázaná.
`ColImageWidth`	Veľkosť ikony/obrázka v pixeloch.
`ColImagePadding`	Odsadenie okolo bunky ikony/obrázku.
`ColRowHeader`	Definuje stĺpec na vykreslenie väčšie ako ostatné bunky (14 px namiesto 12 px). Za normálnych okolností by existovala iba jedna hlavička riadka na množinu stĺpcov.

Vlastnosti štýlu

Vlastnosť	Description
`Theme`	Fluent UI Theme JSON, ktorý sa má použiť a ktorý sa generuje a exportuje z aplikácie Fluent UI Theme Designer. Pokyny na konfiguráciu nájdete v časti nastavenie motívov.
`Compact`	Pravda, keď sa má použiť kompaktný štýl
`AlternateRowColor`	Hexadecimálna hodnota farby riadka, ktorá sa má použiť v alternatívnych riadkoch.
`SelectionAlwaysVisible`	Mali by byť prepínače výberu viditeľné vždy a nie iba pri umiestnení kurzora myši na riadok.
`AccessibilityLabel`	Označenie, ktoré sa má pridať k popisu Aria tabuľky

Vlastnosti udalosti

Vlastnosť	Description
`RaiseOnRowSelectionChangeEvent`	Udalosť `OnChange` sa spustí, keď je vybratý/zrušený výber riadka. (pozri nižšie)
`InputEvent`	Jedna alebo viac vstupných udalostí (ktoré možno kombinovať pomocou zreťazenia reťazcov). Možné hodnoty `SetFocus`, `SetFocusOnRow`, `SetFocusOnHeader`, `ClearSelection`, `SetSelection`. Musí nasledovať prvok náhodného reťazca, aby sa zabezpečilo spustenie udalosti. Udalosti je možné kombinovať, napríklad,vyjasní `SetFocusClearSelection` a nastaví zameranie súčasne. `SetFocusOnRowSetSelection` nastaví zameranie na riadok a zároveň nastaví výber.
`EventName`	Výstupná udalosť pri spustení `OnChange`. Možné hodnoty – `Sort`, `CellAction`, `OnRowSelectionChange`
`EventColumn`	Názov poľa stĺpca výstupnej udalosti použitý pri vyvolaní `CellAction`
`EventRowKey`	Stĺpec výstupnej udalosti, ktorý obsahuje buď index riadka, v ktorom bola udalosť vyvolaná, alebo kľúč riadka, ak je nastavená vlastnosť `RecordKey`.
`SortEventColumn`	Názov stĺpca, ktorý spustil udalosť Zoradiť `OnChange`
`SortEventDirection`	Smer zoradenia, ktorý spustil udalosť Zoradiť `OnChange`

Základné použitie

Ak chcete určiť, ktoré stĺpce sa zobrazia v DetailsList, nakonfigurujte nasledujúce vlastnosti DetailsList:

Polia. Pridajte požadované polia výberom možnosti Upraviť v rozbaľovacej ponuke ovládacích prvkov napravo (používa sa rovnaké rozhranie na úpravu preddefinovaných dátových kariet).
Stĺpce. Poskytnite špecifické mapovanie medzi stĺpcami a poľami vo vlastnosti Columns.

Príklad:

Mapovanie na systémovú tabuľku Dataverse Účty s nasledujúcim vzorcom:

Table(
    {
        ColName: "name",
        ColDisplayName: "Name",
        ColWidth: 200,
        ColSortable: true,
        ColIsBold: true,
        ColResizable: true
    },{
        ColName: "address1_city",
        ColDisplayName: "City:",
        ColShowAsSubTextOf: "name"
    },{
        ColName: "address1_country",
        ColDisplayName: "Country:",
        ColShowAsSubTextOf: "name"
    },{
        ColName: "telephone1",
        ColDisplayName: "Telephone",
        ColWidth: 100,
        ColSortable: true,
        ColResizable: true
    },{
        ColName: "primarycontactid",
        ColDisplayName: "Primary Contact",
        ColWidth: 200,
        ColSortable: true,
        ColSortBy: "_primarycontactid_value",
        ColResizable: true,
        ColCellType: "link"
    }
)

Stĺpce s vedľajším textom

Vlastnosť stĺpca ColShowAsSubTextOf definuje stĺpec, ktorý sa zobrazuje pod hodnotou v inom stĺpci. Toto možno použiť na zobrazenie sekundárnych informácií a rozšíriteľného obsahu (pozri nižšie).

Ak ste mali kolekciu definovanú ako:

ClearCollect(colAccounts,
{id:"1",name:"Contoso",city:"Redmond",country:"U.S.",description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit.",expand:false},
{id:"2",name:"Litware, Inc",city:"Dallas",country:"U.S.",description:"Donec vel pellentesque turpis.",expand:false});

Môžete definovať stĺpce ako:

Table(
    {
        ColName: "name",
        ColDisplayName: "Account Name",
        ColWidth: Self.Width-100,
        ColIsBold:true
    },
    {
        ColName: "city",
        ColDisplayName: "City:",
        ColShowAsSubTextOf:"name",
        ColLabelAbove:false,
        ColIsBold:true,
        ColSubTextRow: 1
    },
    {
        ColName: "country",
        ColDisplayName: "Country:",
        ColShowAsSubTextOf:"name",
        ColLabelAbove:false,
        ColIsBold:true,
        ColSubTextRow: 1
    },
    {
        ColName: "description",
        ColDisplayName: "",
        ColShowAsSubTextOf:"name",
        ColLabelAbove:false,
        ColIsBold:false,
        ColSubTextRow: 2
    }
)

Výsledkom bude tabuľka, ktorá vyzerá takto:
Obrázok-20220323115627812

Typy buniek

Vlastnosť stĺpca ColCellTypeakceptuje nasledujúce hodnoty: expand, tag, image, indicatortag, clickableimage, link

Rozbaliť alebo zbaliť

Ak riadky Podtextu vyžadujú ikonu rozbalenia/zbalenia, do množiny údajov stĺpca možno pridať ďalší stĺpec a množinu ColCellType definícií expand stĺpcov tiež:

{ColName:"expand",ColDisplayName:"",ColWidth:32,ColResponsive:false, ColRightAligned:true, ColCellType:"expand"}

Za predpokladu, že vlastnosť RecordKey je nastavená na stĺpec index, udalosť OnChange by potom mohla obsahovať nasledujúce položky na rozbalenie/zbalenie riadkov:

If(Self.EventName="CellAction" && Self.EventColumn="expand",
    With(LookUp(colExpand,index=Self.EventRowKey) As Row,
        Patch(colExpand,Row,{expand:!Row.expand})
        )
);

Toto vyhľadá riadok, v ktorom bola vyvolaná akcia bunky pomocou indexu (ak nie je nastavené RecordKey, potom EventRowKey bude obsahovať číslo riadka) a potom prepne rozbalenie hodnotu.

Výsledkom bude nasledujúci výsledok:

Značka a značka indikátora

Pomocou typu tag bunky alebo indicatortag môžete vytvoriť vnorené farebné značky na zobrazenie obsahu bunky.

tag - Zobrazí sa pole so značkou s farebným pozadím a okrajom
tagindicator – Zobrazuje pole značky s farebným kruhovým indikátorom

Farby sa môžu líšiť v závislosti od riadka, a preto množina údajov metaúdajov stĺpca jednoducho poskytuje názvy stĺpcov, ktoré obsahujú farby značiek.

Zvážte množinu údajov:

ClearCollect(
    colAccounts,
    {
        name: "Contoso",
        city: "Redmond",
        country: "U.S.",
        TagColor: "rgb(0, 183, 195)",
        TagBorderColor: "rgb(0,137,147)"
    },
    {
        name: "Litware, Inc",
        city: "Dallas",
        country: "U.S.",
        TagColor: "rgb(255, 140, 0)",
        TagBorderColor: "rgb(194,107,0)"
    }
);

Potom môžete pridať metadáta stĺpca a pridať dva stĺpce, jeden zobrazený ako tag a druhý ako tagindicator – každý používa stĺpce TagColor a TagBorderColor na určenie farieb:

{
        ColName: "country",
        ColDisplayName: "Country",
        ColCellType:"tag",
        ColWidth: 60,
        ColTagColorColumn: "TagColor",
        ColTagBorderColorColumn: "TagBorderColor"
},
{
        ColName: "country",
        ColDisplayName: "Country",
        ColCellType:"indicatortag",
        ColWidth: 60,
        ColTagColorColumn: "TagColor",
        ColTagBorderColorColumn: "TagBorderColor"
}

Výsledkom bude nasledujúci výsledok:
Obrázok-20220323150248449

Obrázok a klikateľný obrázok

Pomocou typu bunky image alebo clickableimage môžete nakonfigurovať vložené obrázky, ktoré možno voliteľne vybrať na spustenie akcie OnChange.

Obsah obrázka možno definovať predponou s:

https: Odkaz na externý obrázok. napríklad https://via.placeholder.com/100x70
icon: Pomocou jednej z ikon používateľského rozhrania Fluent napríklad icon:SkypeCircleCheck
data: Použitie vložených obrazových údajov svg: napríklad, data:image/svg+xml;utf8, %3Csvg%20%20viewBox%3D%270%200%2020...

Ak je obrázok typu clickableimage, udalosť OnChange sa spustí po výbere ikony s EvenName z CellAction, EventColumn uvádza názov stĺpca obrázka a EventRowKey je RecordKey riadka (ak nie je nastavené RecordKey, potom EventRowKey bude obsahovať číslo riadka).

Zvážte napríklad údaje riadkov:

{
        id: "1",
        name: "Contoso",
        city: "Redmond",
        country: "U.S.",
        ImageColor: "rgb(0, 183, 195)",
        externalimage: "https://via.placeholder.com/100x70",
        iconimage: "icon:SkypeCircleCheck"
    },
    {
        id: "2",
        name: "Litware, Inc",
        city: "Dallas",
        country: "U.S.",
        ImageColor: "rgb(255, 140, 0)",
        externalimage: "https://via.placeholder.com/100x70",
        iconimage: "icon:SkypeCircleCheck"
    }

a metadáta stĺpca:

 {
        ColName: "externalimage",
        ColDisplayName: "Image",
        ColCellType:"image",
        ColWidth: 60,
        ColImageWidth: 60,
        ColImagePadding: 8,
        ColVerticalAlign: "Top"
},
{
        ColName: "iconimage",
        ColDisplayName: "Clickable Image",
        ColCellType:"clickableimage",
        ColWidth: 60,
        ColImageWidth: 60,
        ColImagePadding: 8,
        ColVerticalAlign: "Top"
}

To by dalo výsledok:
Obrázok-20220323161817524

clickableimage Pre stĺpec,udalosť potom môže spracovať, keď používateľ vyberie (myš alebo klávesnicu) a ikonu (za predpokladu, OnChange že nie je vypnutá) pomocou:

If(Self.EventName="CellAction",
	Notify("CellAction " & Self.EventColumn & " " & Self.EventRowKey)
)

Do EventRowKey sa vyplní hodnota stĺpca definovaná ako vlastnosť RecordKey.

Prepojenia

Stĺpce môžu byť vykreslené ako odkazy, ktoré pri výbere odkazu vyvolajú udalosť OnChange podobným spôsobom, ako fungujú obrázky s možnosťou kliknutia popísané vyššie.

Metadáta stĺpca pre prepojenie sú nakonfigurované takto:

  {
        ColName: "name",
        ColDisplayName: "Account Name",
        ColWidth: 150,
        ColIsBold:true,
        ColCellType: "link"
    }

Výsledkom bude, že obsah bunky sa vykreslí takto:
Obrázok-20220323162653369

Po kliknutí na odkaz sa opäť vyvolá udalosť OnChange, pričom EventColumn je názov stĺpca, ktorý obsahuje odkaz, a EventRowKey je vyplnený hodnotou stĺpca definovanou ako vlastnosť RecordKey.

Stĺpce s viacerými hodnotami

Ak môže mať hodnota stĺpca viacero hodnôt, nastavte ju na Tabuľku/Kolekciu. To potom vykreslí hodnoty ako viaceré hodnoty buniek. napríklad:

 {
        id: "1",
        name: "Contoso",
        tags:["#PowerApps","#PowerPlatform"]
    },

Metadáta stĺpca potom môžu byť:

 {
        ColName: "tags",
        ColDisplayName: "Tags",
        ColWidth: 250,
        ColFirstMultiValueBold :true,
        ColMultiValueDelimiter:" "
    }

Výsledkom by bola tabuľka, ktorá ukazuje:
Obrázok-20220324160725874

Správanie

Zoradenie udalostí

Stĺpec je definovaný ako zoraditeľný nastavením vlastnosti ColSortable na hodnotu pravda. Ak stĺpec zobrazuje textovú hodnotu, ktorá sa líši od požadovaného spôsobu zoradenia (napríklad formátovaný stĺpec dátumu alebo stavu), pomocou vlastnosti je možné zadať iný stĺpec zoradenia ColSortBy .

Zoradenie sa potom vykonáva dvoma spôsobmi:

Automaticky pri pripojení k zdroju údajov Dataverse.
Manuálne pri používaní kolekcií.

Automatické zoradenie

Keď je množina údajov položiek natívnou množinou údajov Dataverse, automaticky sa zoradí, ak je stĺpec označený ako zoraditeľný. Ak dôjde k zmenám tvaru kolekcie Dataverse pomocou AddColumn alebo uložením údajov do kolekcie, automatické zoradenie už nebude fungovať a je potrebné implementovať manuálne zoradenie.

Manuálne zoradenie

Manuálne zoradenie je podporované mimo komponentu, aby sa umožnila podpora vlastných konektorov a miestne zoradenie kolekcií, keď nie sú pripojené k pripojeniu Dataverse. Stĺpce môžu byť definované ako zoraditeľné alebo nezoraditeľné. Keď je vybraté zoradenie stĺpcov, spustí sa udalosť OnChange, ktorá poskytne stĺpec a smer. Aplikácia by potom mala použiť tieto hodnoty na zmenu viazanej kolekcie na tabuľku, aby sa aktualizovala pomocou triedených záznamov.

V kolekcii Stĺpce pridajte zoraditeľný booleovský stĺpec
Pridajte názov zoraditeľného stĺpca k vlastnosti Columns.ColSortable

Do udalosti OnChange tabuľky pridajte kód:

If(Self.EventName="Sort", 
UpdateContext({
                ctxSortCol:Self.SortEventColumn,
                ctxSortAsc:If(Self.SortEventDirection='PowerCAT.FluentDetailsList.SortEventDirection'.Ascending,true,false)
 })
);

Nastavte vlastnosť Sort Column na ctxSortCol

Nastavte vlastnosť Sort Direction na:

If(ctxSortAsc,
    'PowerCAT.FluentDetailsList.CurrentSortDirection'.Ascending,
    'PowerCAT.FluentDetailsList.CurrentSortDirection'.Descending)

Nastavte kolekciu vstupných položiek na zoradenie pomocou kontextových premenných nastavených vyššie:
```
SortByColumns(colData,ctxSortCol,If(ctxSortAsc,SortOrder.Ascending,SortOrder.Descending))
```

Keď sa udalosť OnChange spustí po tom, čo používateľ vyberie v hlavičke stĺpca na zmenu zoradenia, premenné kontextu zoradenia sa aktualizujú pomocou nových poskytnutých informácií o zoradení, čo spôsobí opätovné zoradenie množiny vstupných údajov a zodpovedajúcu aktualizáciu tabuľky.

Stránkovanie

Stránkovanie interne spravuje komponent, avšak tlačidlá na pohyb späť/vpred musí vytvoriť hostiteľská aplikácia a udalosti odoslať komponentu.

Na ovládanie stránkovania sa používajú nasledujúce vlastnosti:

PageSize – Definuje, koľko záznamov sa má načítať na stránku.
PageNumber – Zobrazí aktuálnu zobrazenú stránku.
HasNextPage - Výstupy sú pravdivé, ak existuje ďalšia strana.
HasPreviousPage - Výstupy pravdivé, ak existuje predchádzajúca strana.
TotalRecords – Vypíše celkový počet dostupných záznamov.

Tlačidlá stránkovania potom možno definovať takto:

Načítať prvú stranu
- OnSelect: UpdateContext({ctxGridEvent:"LoadFirstPage" & Text(Rand())})
- DisplayMode: If(grid.HasPreviousPage,DisplayMode.Edit,DisplayMode.Disabled)
Načítať predchádzajúcu stranu
- OnSelect: UpdateContext({ctxGridEvent:"LoadPreviousPage" & Text(Rand())})
- DisplayMode: If(grid.HasPreviousPage,DisplayMode.Edit,DisplayMode.Disabled)
Načítať nasledujúcu stranu
- OnSelect: UpdateContext({ctxGridEvent:"LoadNextPage" & Text(Rand())})
- DisplayMode: If(grid.HasNextPage,DisplayMode.Edit,DisplayMode.Disabled)

Označenie počtu záznamov možno nastaviť na výraz podobný:

grid.TotalRecords & " record(s)  " & Text(CountRows(grid.SelectedItems)+0) & " selected"

Zobrazenie hornej časti nasledujúcej strany

Toto sa implementuje pomocou udalosti 'SetFocusOnRow'. Ak by ste mali naviazanú ctxGridEvent vlastnosť InputEvent, vo vlastnosti OnSelect tlačidla ďalšej stránky by ste použili: UpdateContext({ctxGridEvent:"LoadNextPageSetFocusOnRow" & Text(Rand())});

Vstupné udalosti

Vlastnosť InputEvent môže byť nastavená na jednu alebo viacero z nasledujúcich možností:

SetFocus – Nastaví zameranie na prvý riadok mriežky
ClearSelection – Vymaže akýkoľvek výber a nastaví späť predvolený výber.
SetSelection – Nastaví výber podľa definície v stĺpci RowSelected.
LoadNextPage - Načíta ďalšiu stránku, ak existuje
LoadPreviousPage - Načíta predchádzajúcu stránku, ak existuje;
LoadFirstPage – Načíta prvú stránku

Aby sa zabezpečilo zachytenie vstupnej udalosti, musí jej stačiť náhodná hodnota. napríklad SetSelection" & Text(Rand())

Podrobnosti nájdete uvedené nižšie.

Vybrané položky a akcie riadkov

Komponent podporuje režimy výberu Jeden, Viaceré alebo Žiadne.

Pri výbere položiek sa aktualizujú vlastnosti SelectedItems a Selected.

SelectedItems – Ak je tabuľka v režime viacnásobného výberu, bude obsahovať jeden alebo viac záznamov z kolekcie Položky.
Selected – Ak je tabuľka v režime jednoduchého výberu, bude obsahovať vybrané záznamy.

Keď používateľ vyvolá akciu riadka, buď dvojitým kliknutím alebo stlačením klávesu Enter alebo vybratého riadka, spustí sa udalosť OnSelect. Vlastnosť Selected bude obsahovať odkaz na záznam, ktorý bol vyvolaný. Túto udalosť možno použiť na zobrazenie podrobného záznamu alebo na prechod na inú obrazovku.

RaiseOnRowSelectionChangeEvent Ak je vlastnosť povolená, po zmene OnChange vybratých riadkov sa udalosť zvýši nastavením EventName na OnRowSelectionChange. Ak aplikácia potrebuje odpovedať na výber jedného riadka namiesto dvojitého kliknutia na riadok, dokáže OnChange to zistiť pomocou kódu podobného:

If(
    Self.EventName = "OnRowSelectionChange",
        If(!IsBlank(Self.EventRowKey),
        	// Row Selected
        )
);

Vymazanie aktuálne vybratých položiek

Ak chcete vymazať vybraté záznamy, musíte nastaviť vlastnosť InputEvent na reťazec, ktorý sa začína na

napríklad

UpdateContext({ctxTableEvent:"ClearSelection"&Text(Rand())})

Kontextová premenná ctxTableEvent môže byť potom naviazaná na vlastnosť InputEvent.

Nastavenie výberu riadka

Ak existuje scenár, v ktorom by sa mala programovo vybrať konkrétna množina záznamov, InputEvent vlastnosť môže byť nastavená na SetSelectionSetFocusOnRowSetSelection alebo v kombinácii s nastavením RecordSelected vlastnosti záznamu.

Príklad: Ak ste mali množinu údajov nasledovne:

{RecordKey:1, RecordSelected:true, name:"Row1"}

Ak chcete vybrať a vybrať prvý riadok, môžete nastaviť možnosť InputEvent byť "SetFocusOnRowSetSelection"&Text(Rand()) alebo "SetSelection"&Text(Rand())

Konfigurácia správanie „Pri zmene“

Pridajte a upravte nasledujúci vzorec vo vlastnosti OnChange komponentu na konfiguráciu konkrétnych akcií na základe EventName poskytnutých komponentom:

Spúšťacie udalosti, keď používateľ zmení vybratý riadok: Povoľte vlastnosť Vyvolať udalosť OnRowSelectionChange v komponente.
Konfigurácia správania odkazu: Pridajte stĺpce s hodnotou ColCellType nastavenou na odkaz.

/* Runs when selected row changes and control property 'Raise OnRowSelection event' is true */
If( Self.EventName = "OnRowSelectionChange",
    Notify( "Row Select " & Self.EventRowKey )
);

/* Runs when a user selects a column with ColCellType set to 'link' */
If( Self.EventName = "CellAction",
    Notify( "Open Link " &  Self.EventColumn & " " & Self.EventRowKey )
)

Obmedzenia

Tento komponent kódu je možné použiť iba v aplikáciách plátna a vlastných stránkach.

Zdieľať cez

Ovládací prvok DetailsList

Description

Vlastnosti

Kľúčové vlastnosti

Vlastnosti `Items`

Vlastnosti `Columns`

Vlastnosti štýlu

Vlastnosti udalosti

Základné použitie

Stĺpce s vedľajším textom

Typy buniek

Rozbaliť alebo zbaliť

Značka a značka indikátora

Obrázok a klikateľný obrázok

Prepojenia

Stĺpce s viacerými hodnotami

Správanie

Zoradenie udalostí

Automatické zoradenie

Manuálne zoradenie

Stránkovanie

Zobrazenie hornej časti nasledujúcej strany

Vstupné udalosti

Vybrané položky a akcie riadkov

Vymazanie aktuálne vybratých položiek

Nastavenie výberu riadka

Konfigurácia správanie „Pri zmene“

Obmedzenia

Ďalšie zdroje informácií

Zdieľať cez

Ovládací prvok DetailsList

Description

Vlastnosti

Kľúčové vlastnosti

Vlastnosti Items

Vlastnosti Columns

Vlastnosti štýlu

Vlastnosti udalosti

Základné použitie

Stĺpce s vedľajším textom

Typy buniek

Rozbaliť alebo zbaliť

Značka a značka indikátora

Obrázok a klikateľný obrázok

Prepojenia

Stĺpce s viacerými hodnotami

Správanie

Zoradenie udalostí

Automatické zoradenie

Manuálne zoradenie

Stránkovanie

Zobrazenie hornej časti nasledujúcej strany

Vstupné udalosti

Vybrané položky a akcie riadkov

Vymazanie aktuálne vybratých položiek

Nastavenie výberu riadka

Konfigurácia správanie „Pri zmene“

Obmedzenia

Ďalšie zdroje informácií

Vlastnosti `Items`

Vlastnosti `Columns`