Notatka
Dostęp do tej strony wymaga autoryzacji. Może spróbować zalogować się lub zmienić katalogi.
Dostęp do tej strony wymaga autoryzacji. Możesz spróbować zmienić katalogi.
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.
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
|
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:
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).
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:
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:
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:
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ładdata: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:
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.
Linki
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:
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:
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:
- Automatycznie po połączeniu z źródło danych Dataverse.
- 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.
W kolekcji Columns dodaj sortowalną kolumnę logiczną
Dodawanie nazwy kolumny, która można sortować, do właściwości
Columns.ColSortableWewnątrz zdarzenia
OnChangetabeli dodaj kod:If(Self.EventName="Sort", UpdateContext({ ctxSortCol:Self.SortEventColumn, ctxSortAsc:If(Self.SortEventDirection='PowerCAT.FluentDetailsList.SortEventDirection'.Ascending,true,false) }) );Ustaw właściwość
Sort ColumnnactxSortColUstaw właściwość
Sort Directionna:If(ctxSortAsc, 'PowerCAT.FluentDetailsList.CurrentSortDirection'.Ascending, 'PowerCAT.FluentDetailsList.CurrentSortDirection'.Descending)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.