DetailsList element sterujący

Kontrolka służąca do wyświetlania zestawu danych.

Uwaga

Pełna dokumentacja i kod źródłowy znajdują się w repozytorium komponentów kodu w serwisie GitHub.

Kontrolka DetailsList.

Opis

Lista szczegółów (DetailsList) to niezawodny sposób wyświetlania bogatej w informacje kolekcji elementów oraz umożliwiania użytkownikom sortowania, grupowania i filtrowania zawartości. Użyj DetailsList, gdy gęstość informacji ma kluczowe znaczenie.

Składnik kodu DetailsList umożliwia używanie składnika DetailsList Fluent UI z aplikacji kanwy i niestandardowych stron.

  • Może być powiązany z zestawem danych Dataverse lub zbiorem lokalnym.
  • Obsługuje konfigurowalne kolumny oddzielone od metadanych kolumn dostarczonych przez źródłowy zestaw danych w celu zapewnienia elastyczności.
  • Typy komórek do linków, ikon, rozwijania/zwijania oraz komórek z tekstem pomocniczym.
  • Obsługa stronicowania.
  • Obsługa sortowania z użyciem sortowania Dataverse lub konfigurowalnych właściwości SortBy.

Właściwości

Właściwości kluczowe

Właściwości Opis
Items Zestaw danych zawierający wiersze do wyświetlenia. Wyświetlana także jako Records. Sprawdź tabelę właściwości elementów poniżej.
Columns Zestaw danych zawierający metadane opcji dotyczące kolumn. Jeśli ten zestaw danych zostanie dostarczony, całkowicie zastąpi kolumny podane w zestawie danych Records. Zobacz poniżej tabelę właściwości kolumn.
SelectionType Typ wyboru (brak, pojedynczy, wielokrotny)
PageSize Określa, ile rekordów ma być ładowanych na każdej stronie.
PageNumber Drukuje aktualnie wyświetlaną stronę.
HasNextPage Zwraca wartość „prawda”, jeśli istnieje następna strona.
HasPreviousPage Wartość wyjściowa jest true, jeśli znajduje się na poprzedniej stronie.
TotalRecords Wyprowadza całkowitą liczbę dostępnych rekordów.
CurrentSortColumn Nazwa kolumny wyświetlanej jako obecnie używana do sortowania
CurrentSortDirection Kierunek aktualnie używanej kolumny sortowania

Właściwości Items

Atrybuty te muszą być dostępne w źródle danych, aby włączyć pokrewne funkcje. Formuły Power Fx AddColumns() można użyć do dodawania tych wartości do źródła danych.

Właściwości Opis
RecordKey (opcjonalnie) — unikatowa nazwa kolumny klucza. Podaj to, jeśli chcesz, aby zaznaczenie zostało zachowane po zaktualizowaniu rekordów, i jeśli chcesz, aby element EventRowKey zawierał identyfikator zamiast indeksu wiersza po wyzwoleniu zdarzenia OnChange.
RecordCanSelect (opcjonalnie) — nazwa kolumny zawierająca wartość boolean definiującą, czy można wybrać wiersz.
RecordSelected (opcjonalnie) — Nazwa kolumny, która zawiera wartość boolean określającą, czy wiersz jest wybierany domyślnie, i ustawiając InputEvent tak, aby zawierał SetSelection. Zobacz poniżej sekcję dotyczącą Set Selection.

Columns Właściwości

Właściwości Opis
ColDisplayName (Wymagane) — zawiera nazwę kolumny, która ma być pokazywana w nagłówku.
ColName (Wymagane) - Podaje rzeczywistą nazwę pola kolumny w kolekcji Items.
ColWidth (Wymagane) — zapewnia bezwzględną stałą szerokość kolumny w pikselach.
ColCellType Typ komórki do renderowania. Możliwe wartości: expand, tag, indicatortag, image, clickableimage, link. Aby uzyskać więcej informacji, zapoznaj się z następną sekcją.
ColHorizontalAlign Wyrównanie zawartości komórki, jeśli element ColCellType jest typu image lub clickableimage.
ColVerticalAlign Wyrównanie zawartości komórki, jeśli jest ColCellType to typ image, lub clickableimage.
ColMultiLine Wartość „Prawda” oznacza, że tekst w komórkach ma być zawijany, jeśli jest zbyt długi, aby zmieścić się w dostępnej szerokości.
ColResizable Prawda, gdy można zmieniać szerokość nagłówka kolumny.
ColSortable Prawda, gdy kolumna powinna być sortowalna. Jeśli zestaw danych obsługuje automatyczne sortowanie za pośrednictwem bezpośredniego połączenia Dataverse, dane zostaną automatycznie posortowane. W przeciwnym razie wyjścia SortEventColumn i SortEventDirection zostaną ustawione i muszą być używane w wyrażeniu powiązania rekordów Power FX.
ColSortBy Nazwa kolumny, która ma być dostarczana do zdarzenia OnChange podczas sortowania kolumny. Na przykład, jeśli sortujesz kolumny dat, chcesz sortować według rzeczywistej wartości daty, a nie sformatowanego tekstu widocznego w kolumnie.
ColIsBold Prawda, jeśli dane w komórce mają być pogrubione
ColTagColorColumn Jeśli typem komórki jest znacznik, ustaw szesnastkowy kolor tła znacznika tekstowego. Można ustawić jako transparent. Jeśli typ komórki nie jest znacznikiem, ustaw kolor na hex, który będzie używać jako komórki tagu koła wskaźników. Jeśli wartość tekstowa jest pusta, znacznik nie jest wyświetlany.
ColTagBorderColorColumn Ustaw na kolor w formacie szesnastkowym, aby użyć go jako koloru obramowania tagu tekstowego. Można ustawić jako transparent.
ColHeaderPaddingLeft Dodaje dopełnienie do tekstu nagłówka kolumny (w pikselach)
ColShowAsSubTextOf Ustawienie tej opcji na nazwę innej kolumny spowoduje przeniesienie kolumny tak, aby była elementem podrzędnym tej kolumny. Zobacz niżej w obszarze Kolumny tekstu podrzędnego.
ColPaddingLeft Dodaje wewnętrzny margines po lewej stronie komórki podrzędnej (piksele)
ColPaddingTop Dodaje dopełnienie z górnej strony komórki podrzędnej (piksele)
ColLabelAbove Przenosi etykietę nad wartość komórki podrzędnej, jeśli jest ona wyświetlana jako kolumna Tekst podrzędny.
ColMultiValueDelimiter Łączy wartości tablicy wielowartościowej za pomocą tego ogranicznika. Zobacz poniżej w sekcji kolumn wielowartościowych.
ColFirstMultiValueBold W przypadku wyświetlania wartości tablicy z wieloma wartościami pierwszy element jest wyświetlany jako pogrubiony.
ColInlineLabel Jeśli jest ustawiony na wartość ciągu, jest używany do wyświetlania etykiety wewnątrz wartości komórki, która może być inna niż nazwa kolumny. na przykład
image-20220322144857658
ColHideWhenBlank Jeśli parametr ma wartość true, etykieta wewnątrz komórki oraz odstęp wewnętrzny zostaną ukryte, jeśli wartość komórki jest pusta.
ColSubTextRow W przypadku wyświetlania wielu komórek w podrzędnej komórce tekstowej ustaw wartość na indeks wiersza. Wartość zero wskazuje wiersz zawartości głównej komórki.
ColAriaTextColumn Kolumna zawierająca opis ARIA dla komórek (na przykład komórek z ikonami).
ColCellActionDisabledColumn Kolumna zawierająca flagę logiczną określającą, czy akcja komórki (na przykład komórki z ikonami) jest wyłączona.
ColImageWidth Rozmiar ikony/obrazu w pikselach.
ColImagePadding Ikonę/komórka obrazu.
ColRowHeader Definiuje kolumnę do renderowania większą niż pozostałe komórki (14 px zamiast 12 px). Zwykle dla każdego zestawu kolumn występuje tylko jeden nagłówek wiersza.

Właściwości stylu

Właściwości Opis
Theme Plik JSON motywu Fluent UI do użycia, który jest generowany i eksportowany z Fluent UI Theme Designer. Zobacz motywy, aby uzyskać wskazówki dotyczące konfiguracji.
Compact To prawda, kiedy należy używać stylu kompaktowego
AlternateRowColor Wartość szesnastkowa koloru wiersza do użycia w alternatywnych wierszach.
SelectionAlwaysVisible Czy przyciski radiowe wyboru powinny być zawsze widoczne, zamiast tylko po najechaniu kursorem na wiersz.
AccessibilityLabel Etykieta do dodania do opisu ARIA tabeli

Właściwości zdarzenia

Właściwości Opis
RaiseOnRowSelectionChangeEvent Zdarzenie OnChange jest wywoływane, gdy wiersz jest zaznaczony/odznaczony. (zobacz poniżej)
InputEvent Jedno lub więcej zdarzeń wejściowych (które można połączyć przy użyciu połączenia ciągów). Możliwe wartości: SetFocus, SetFocusOnRow, SetFocusOnHeader, ClearSelection, SetSelection. Po nim musi się znajdować losowy element ciągów, aby zdarzenie było wyzwalane. Zdarzenia mogą być połączone, np. SetFocusClearSelection wyczyści i jednocześnie ustawi fokus. SetFocusOnRowSetSelection ustawi fokus na wierszu i jednocześnie ustawi zaznaczenie.
EventName Zdarzenie wyjściowe po wyzwoleniu OnChange. Możliwe wartości - Sort, CellAction, OnRowSelectionChange
EventColumn Nazwa pola kolumny zdarzenia wyjściowego używana przy wywołaniu CellAction
EventRowKey Kolumna zdarzenia wyjściowego, która zawiera indeks wiersza, w którym wywołano zdarzenie, lub klucz wiersza, jeśli ustawiono właściwość RecordKey.
SortEventColumn Nazwa kolumny, która wywołała zdarzenie sortowania OnChange
SortEventDirection Kierunek sortowania, który wyzwolił zdarzenie Sort OnChange

Podstawowy sposób użycia

Aby określić, które kolumny są wyświetlane w DetailsList, skonfiguruj następujące właściwości DetailsList:

  1. Pola. Żądane pola można dodać, wybierając opcję Edytuj w wysuwce formantów po prawej stronie (używa tego samego interfejsu do modyfikowania wstępnie zdefiniowanych kart danych).

  2. Kolumny. Należy podać konkretne mapowanie między kolumnami i polami w właściwości Columns.

Przykład:

Mapowanie do tabeli systemowej Konta w Dataverse przy użyciu poniższej formuły:

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"
    }
)

Podrzędne kolumny tekstowe

Właściwość kolumny ColShowAsSubTextOf definiuje kolumnę jako pokazaną poniżej wartości w innej kolumnie. Może służyć do pokazywania informacji dodatkowych i zawartości z możliwością rozwinięcia (zobacz niżej).

Jeśli kolekcja była zdefiniowana jako:

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});

Kolumny można zdefiniować jako:

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
    }
)

W rezultacie powstanie tabela w następującej postaci:
image-20220323115627812

Typy komórek

Właściwość kolumny ColCellType zawiera następujące wartości: expand, tag, image, indicatortag, clickableimage, link

Rozwiń/Zwiń

Jeśli wiersze „Sub Text” mają mieć ikonę rozwijania/zwijania, można dodać dodatkową kolumnę do zestawu danych kolumn, a w definicji kolumny ColCellType również ustawić expand:

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

Zakładając, że właściwość RecordKey jest ustawiona na kolumnę index, zdarzenie OnChange może zawierać następujące elementy, aby rozwinąć/zwinąć wiersze:

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

Spowoduje to wyszukanie wiersza, w którym wywołano akcję komórki przy użyciu indeksu (jeśli nie ustawiono RecordKey, wówczas EventRowKey będzie zawierał numer wiersza), a następnie przełącza wartość rozwijania.

Spowoduje to następujące konsekwencje:
Rozwiń i zwiń przykład wyjaśniony za pomocą animacji

Znacznik i znacznik wskaźnika

Używając znacznika typu tag lub indicatortag, możesz tworzyć wbudowane kolorowe znaczniki, aby wyświetlić zawartość komórki.

  • tag – Spowoduje to wyświetlenie pola tagu z kolorowym tłem i ramką
  • tagindicator — Pokazuje pole tagu z kolorowym wskaźnikiem okręgu

Kolory mogą się różnić w zależności od wiersza, dlatego zestaw danych metadanych kolumny zawiera po prostu nazwy kolumn, które przechowują kolory znaczników.

Rozważ zbiór danych:

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)"
    }
);

Następnie można dodać metadane kolumny, aby dodać dwie kolumny, jedną wyświetlaną jako tag, a drugą jako wskaźnik tagu — każda z nich używa kolumn TagColor i TagBorderColor do określenia kolorów:

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

Spowoduje to następujące konsekwencje:
image-20220323150248449

Obrazek i klikalny obrazek

Używając komórki typu image lub clickableimage możesz skonfigurować wbudowane obrazy, które opcjonalnie można wybrać w celu wywołania akcji OnChange.

Zawartość obrazu można zdefiniować, dodając przed nią prefiks:

  • https: Link do zewnętrznego obrazu. na przykład: https://via.placeholder.com/100x70
  • icon: Na przykład użycie jednej z ikon Fluent UI, icon:SkypeCircleCheck
  • data: Korzystanie z osadzonych danych obrazu SVG: na przykład data:image/svg+xml;utf8, %3Csvg%20%20viewBox%3D%270%200%2020...

Jeśli obraz jest typu clickableimage, zdarzenie OnChange zostanie wywołane po wybraniu ikony, z parametrem EvenName o wartości CellAction, gdzie EventColumn zawiera nazwę kolumny obrazu, a EventRowKey jest RecordKey wiersza (jeśli nie ustawiono RecordKey, wówczas EventRowKey będzie zawierać numer wiersza).

na przykład rozważmy następującą sytuację:

{
        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"
    }

i metadane kolumny:

 {
        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"
}

Spowoduje to:
image-20220323161817524

W przypadku kolumny clickableimage zdarzenie OnChange może następnie obsłużyć sytuację, gdy użytkownik wybierze ikonę (myszą lub klawiaturą), o ile nie jest ona wyłączona, przy użyciu:

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

EventRowKeyzostanie wypełniona wartością kolumny określoną jako właściwość RecordKey.

Kolumny mogą być renderowane jako łącza, które wywołają zdarzenie OnChange, gdy łącze zostanie wybrane w podobny sposób, jak działają obrazy klikalne opisane powyżej.

Metadane kolumn łącza są skonfigurowane w następujący sposób:

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

Spowoduje to renderowanie zawartości komórki jako:
image-20220323162653369

Zdarzenie OnChange jest ponownie uruchamiane po kliknięciu łącza, przy czym EventColumn jest nazwą kolumny zawierającej łącze, a EventRowKey jest wypełniany wartością kolumny zdefiniowaną jako RecordKey własność.

Kolumny z wieloma wartościami

Jeśli wartość kolumny może przyjmować wiele wartości po ustawieniu jej jako Tabela/Kolekcja. Spowoduje to następnie wyświetlenie wartości jako wielu wartości komórek. na przykład:

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

Metadane kolumny mogą mieć wówczas stan:

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

To spowoduje, że w tabeli będą wyświetlane:
image-20220324160725874

Zachowanie

Sortuj wydarzenia

Kolumna jest uznawana za sortowalną po ustawieniu właściwości ColSortable na wartość true. Jeśli kolumna zawiera wartość tekstową inną niż wymagana kolejność sortowania (np. sformatowana data lub kolumna stanu), wówczas można określić inną kolumnę sortowania za pomocą właściwości ColSortBy.

Sortowanie jest następnie obsługiwane na dwa sposoby:

  1. Automatycznie po połączeniu z źródło danych Dataverse.
  2. Ręczne użycie zbiorów.

Automatyczne sortowanie

Gdy zestaw danych Items jest natywnym zestawem danych Dataverse, zostanie on automatycznie posortowany, jeśli kolumna zostanie oznaczona jako możliwa do sortowania. W przypadku jakichkolwiek zmian w kształcie kolekcji Dataverse przy użyciu AddColumn lub przechowywania danych w kolekcji automatyczne sortowanie nie będzie już działać i należy zaimplementować sortowanie ręczne.

Sortowanie ręczne

Sortowanie ręczne jest obsługiwane poza komponentem, aby umożliwić obsługę niestandardowych łączników i sortowanie kolekcji lokalnych, gdy nie ma połączenia z usługą Dataverse. Kolumny można zdefiniować jako sortowalne lub nie. Po wybraniu sortowania kolumny generowane jest zdarzenie OnChange, które przekazuje kolumnę i kierunek. Aplikacja powinna następnie użyć tych wartości, aby zmienić kolekcję powiązaną z tabelą, tak aby tabela została zaktualizowana i wyświetlała posortowane rekordy.

  1. W kolekcji Columns dodaj sortowalną kolumnę logiczną

  2. Dodawanie nazwy kolumny, która można sortować, do właściwości Columns.ColSortable

  3. Wewnątrz zdarzenia OnChange tabeli dodaj kod:

    If(Self.EventName="Sort", 
    UpdateContext({
                    ctxSortCol:Self.SortEventColumn,
                    ctxSortAsc:If(Self.SortEventDirection='PowerCAT.FluentDetailsList.SortEventDirection'.Ascending,true,false)
     })
    );
    
  4. Ustaw właściwość Sort Column na ctxSortCol

  5. Ustaw właściwość Sort Direction na:

    If(ctxSortAsc,
        'PowerCAT.FluentDetailsList.CurrentSortDirection'.Ascending,
        'PowerCAT.FluentDetailsList.CurrentSortDirection'.Descending) 
    
  6. Ustaw kolekcję elementów wejściowych do sortowania przy użyciu zmiennych kontekstowych ustawionych powyżej:

    SortByColumns(colData,ctxSortCol,If(ctxSortAsc,SortOrder.Ascending,SortOrder.Descending))
    

Gdy zdarzenie OnChange jest wyzwalane po kliknięciu przez użytkownika nagłówka kolumny w celu zmiany sortowania, zmienne kontekstowe sortowania są aktualizowane przy użyciu nowych dostarczonych informacji o sortowaniu, co powoduje ponowne posortowanie wejściowego zestawu danych i odpowiednią aktualizację tabeli.

Stronicowanie

Stronicowanie jest obsługiwane wewnętrznie przez składnik, jednak przyciski do przechodzenia do poprzedniej i następnej strony musi utworzyć aplikacja nadrzędna, która następnie wysyła zdarzenia do składnika.

Do kontroli stronicowania są używane następujące właściwości:

  • PageSize - Określa, ile rekordów ma być ładowanych na każdej stronie.
  • PageNumber — Wyprowadza aktualnie wyświetlaną stronę.
  • HasNextPage – Zwraca wartość true, jeśli istnieje następna strona.
  • HasPreviousPage – Zwraca wartość true, jeśli istnieje poprzednia strona.
  • TotalRecords - Wyprowadza całkowitą liczbę dostępnych rekordów.

Przyciski przywoławcze można następnie zdefiniować w następujący sposób:

  • Załaduj pierwszą stronę
    • OnSelect: UpdateContext({ctxGridEvent:"LoadFirstPage" & Text(Rand())})
    • DisplayMode: If(grid.HasPreviousPage,DisplayMode.Edit,DisplayMode.Disabled)
  • Załaduj poprzednią stronę
    • OnSelect: UpdateContext({ctxGridEvent:"LoadPreviousPage" & Text(Rand())})
    • DisplayMode: If(grid.HasPreviousPage,DisplayMode.Edit,DisplayMode.Disabled)
  • Załaduj następną stronę
    • OnSelect: UpdateContext({ctxGridEvent:"LoadNextPage" & Text(Rand())})
    • DisplayMode: If(grid.HasNextPage,DisplayMode.Edit,DisplayMode.Disabled)

Liczbę etykiet rekordów można ustawić jako wyrażenie podobne do:

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

Pokaż początek następnej strony

Jest to realizowane za pomocą zdarzenia SetFocusOnRow. Gdybyś miał właściwość InputEvent związaną z ctxGridEvent, na właściwości OnSelect przycisku następnej strony użyłbyś: UpdateContext({ctxGridEvent:"LoadNextPageSetFocusOnRow" & Text(Rand())});.

Zdarzenia wejściowe

Właściwość InputEvent można ustawić na co najmniej jedną z następujących wartości:

  • SetFocus — ustawia fokus pierwszego wiersza siatki
  • ClearSelection — umożliwia wyczyszczenie wszystkich opcji i powrót do domyślnego wyboru.
  • SetSelection — umożliwia ustawienie wyboru zdefiniowanego przez kolumnę RowSelected.
  • LoadNextPage – ładuje następną stronę, jeśli jest jeszcze jedna
  • LoadPreviousPage – Wczytuje poprzednią stronę, jeśli taka istnieje
  • LoadFirstPage - Ładuje pierwszą stronę

Aby mieć pewność, że zdarzenie wejściowe zostanie wychwycone, należy uzupełnić je losową wartością. na przykład: SetSelection" & Text(Rand())

Aby uzyskać więcej szczegółów zobacz poniższą sekcję.

Wybrane elementy i akcje wiersza

Składnik obsługuje tryby pojedynczego wyboru, wielokrotnego wyboru lub bez wyboru.

Podczas wybierania elementów aktualizowane są właściwości SelectedItems i Selected.

  • SelectedItems — jeśli tabela jest w trybie wyboru wielokrotnego, będzie zawierać jeden lub więcej rekordów z kolekcji Items.
  • Selected — jeśli tabela jest w trybie jednego wyboru, będzie zawierać wybrane rekordy.

Gdy użytkownik wywołuje akcję wiersza, przez dwukrotne kliknięcie lub naciśnięcie klawisza Enter lub wybranego wiersza, wyzwalane jest zdarzenie OnSelect. Właściwość Selected będzie zawierać odwołanie do wywoływanego rekordu. Tego zdarzenia można użyć do wyświetlenia szczegółowego rekordu lub przejścia do innego ekranu.

Jeśli właściwość RaiseOnRowSelectionChangeEvent jest włączona, gdy zmienią się wybrane wiersze, wywoływane jest zdarzenie OnChange z ustawieniem EventName na OnRowSelectionChange. Jeśli aplikacja musi reagować na zaznaczenie pojedynczego wiersza, a nie na dwukrotne kliknięcie wiersza, element OnChange może to wykryć za pomocą kodu podobnego do poniższego:

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

Usuwanie aktualnie wybranych pozycji

Aby wyczyścić wybrane rekordy, należy ustawić dla właściwości InputEvent ciąg, który rozpoczyna się od

na przykład

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

Zmienną kontekstową ctxTableEvent można następnie powiązać z właściwością InputEvent.

Ustaw wybór wierszy

Jeśli istnieje scenariusz, w którym należy programowo wybrać określony zestaw rekordów, właściwość InputEvent można ustawić na SetSelection lub SetFocusOnRowSetSelection w połączeniu z ustawieniem właściwości RecordSelected w rekordzie.

na przykład, gdybyś miał(a) zestaw danych wyglądający następująco:

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

Aby zaznaczyć pierwszy wiersz, możesz ustawić InputEvent na "SetFocusOnRowSetSelection"&Text(Rand()) lub "SetSelection"&Text(Rand())

Skonfiguruj zachowanie „przy zmianie”

Dodaj i zmodyfikuj poniższą formułę we właściwości OnChange komponentu, aby skonfigurować określone akcje na podstawie EventName dostarczonego przez komponent:

  • Wywołuj zdarzenia, gdy użytkownik zmienia wybrany wiersz: włącz właściwość Raise OnRowSelectionChange event dla komponentu.
  • Skonfiguruj zachowanie linku: dodaj kolumny z wartością ColCellType ustawioną na link.
/* 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 )
)

Ograniczenia

Tego składnika kodu można używać tylko w aplikacjach kanwy i na stronach niestandardowych.