DetailsList điều khiển

Bài viết
05/08/2023

Một thành phần kiểm soát được dùng để hiển thị một tập hợp dữ liệu.

Lưu ý

Toàn bộ tài liệu và mã nguồn có trong kho lưu trữ thành phần mã GitHub.

Kiểm soát danh sách chi tiết.

Description

Danh sách chi tiết (DetailsList) là một cách hiệu quả để hiển thị tập hợp các mục giàu thông tin cũng như cho phép mọi người sắp xếp, nhóm và lọc nội dung. Hãy sử dụng DetailsList khi mật độ thông tin quan trọng.

Thành phần mã DetailsList cho phép sử dụng thành phần DetailsList của Fluent UI từ bên trong ứng dụng canvas và trang tùy chỉnh.

Có thể được liên kết với tập dữ liệu Dataverse hoặc tập hợp cục bộ.
Hỗ trợ những cột thể đặt cấu hình riêng biệt với siêu dữ liệu cột do tập dữ liệu nguồn cung cấp để đảm bảo tính linh hoạt.
Có các loại ô cho đường liên kết, biểu tượng, bung rộng/thu gọn và ô văn bản phụ.
Hỗ trợ phân trang.
Hỗ trợ sắp xếp bằng cách sử dụng tính năng sắp xếp của Dataverse hoặc thuộc tính SortBy có thể đặt cấu hình.

Thuộc tính

Thuộc tính chính

Thuộc tính	Description
`Items`	Tập dữ liệu chứa các hàng cần kết xuất. Cũng hiển thị dưới dạng `Records`. Hãy xem bảng thuộc tính Items ở bên dưới.
`Columns`	Tập dữ liệu chứa siêu dữ liệu tùy chọn cho các cột. Nếu được cung cấp, tập dữ liệu này sẽ thay thế hoàn toàn các cột được cung cấp trong tập dữ liệu Bản ghi. Hãy xem bảng thuộc tính Columns ở bên dưới.
`SelectionType`	Loại lựa chọn (Không có, Một, Nhiều)
`PageSize`	Xác định số lượng bản ghi sẽ tải trên mỗi trang.
`PageNumber`	Xuất trang đang hiển thị.
`HasNextPage`	Trả về giá trị đúng nếu có trang tiếp theo.
`HasPreviousPage`	Trả về giá trị đúng nếu có trang trước.
`TotalRecords`	Xuất tổng số bản ghi hiện có.
`CurrentSortColumn`	Tên của cột đang được sử dụng để sắp xếp
`CurrentSortDirection`	Hướng của cột sắp xếp hiện tại đang được sử dụng

`Items` của cải

Nguồn dữ liệu phải có các thuộc tính sau đây để bật chức năng liên quan. Có thể sử dụng công thức Power Fx AddColumns() để gắn thêm những giá trị này vào nguồn dữ liệu ban đầu.

Thuộc tính	Description
`RecordKey`	(không bắt buộc) – Tên cột khóa duy nhất. Cung cấp mục này nếu bạn muốn phần lựa chọn được giữ nguyên khi Bản ghi được cập nhật và khi bạn muốn `EventRowKey` chứa ID thay vì chỉ mục hàng sau khi `OnChange` sự kiện được kích hoạt.
`RecordCanSelect`	(không bắt buộc) – Tên cột chứa giá trị `boolean` xác định xem có thể chọn một hàng hay không.
`RecordSelected`	(không bắt buộc) – Tên cột chứa giá trị `boolean` xác định xem một hàng có được chọn theo mặc định hay không và khi đặt giá trị `InputEvent` để chứa `SetSelection`. Hãy xem phần về `Set Selection` ở bên dưới.

`Columns` của cải

Thuộc tính	Description
`ColDisplayName`	(Bắt buộc) – Cung cấp tên của cột cần hiển thị trong tiêu đề.
`ColName`	(Bắt buộc) – Cung cấp tên trường thực tế của cột trong tập hợp Items.
`ColWidth`	(Bắt buộc) – Cung cấp chiều rộng cố định tuyệt đối của cột tính bằng pixel.
`ColCellType`	Loại ô cần kết xuất. Giá trị có thể dùng: `expand`, `tag`, `indicatortag`, `image`, `clickableimage`, `link`. Để biết thêm thông tin, hãy xem các phần tiếp theo.
`ColHorizontalAlign`	Điều chỉnh nội dung ô nếu `ColCellType` thuộc loại `image` hoặc `clickableimage`.
`ColVerticalAlign`	Điều chỉnh nội dung ô nếu `ColCellType` thuộc loại `image` hoặc `clickableimage`.
`ColMultiLine`	Giá trị là true khi văn bản trong ô văn bản cần ngắt dòng nếu quá dài để vừa với chiều rộng có sẵn.
`ColResizable`	Giá trị là true khi chiều rộng tiêu đề cột cần có thể thay đổi kích thước.
`ColSortable`	Đúng khi cột có thể sắp xếp được. Nếu tập dữ liệu hỗ trợ sắp xếp tự động thông qua kết nối Dataverse trực tiếp, dữ liệu sẽ tự động được sắp xếp. Nếu không, thông tin đầu ra của `SortEventColumn` và `SortEventDirection` sẽ được đặt và phải được sử dụng trong biểu thức Power FX liên kết bản ghi.
`ColSortBy`	Tên của cột cần cung cấp cho sự kiện `OnChange` khi cột được sắp xếp. Ví dụ, nếu bạn đang sắp xếp các cột ngày, bạn muốn sắp xếp theo giá trị ngày thực tế thay vì văn bản được định dạng hiển thị trong cột.
`ColIsBold`	Giá trị là true khi dữ liệu ô dữ liệu cần in đậm
`ColTagColorColumn`	Nếu loại ô là thẻ, hãy đặt thành màu nền hex của thẻ văn bản. Có thể đặt thành `transparent`. Nếu loại ô không phải là thẻ, hãy đặt thành màu thập lục phân để sử dụng làm ô thẻ hình tròn chỉ báo. Nếu giá trị văn bản trống, thẻ sẽ không được hiển thị.
`ColTagBorderColorColumn`	Đặt thành màu hex để sử dụng làm màu đường viền của thẻ văn bản. Có thể đặt thành `transparent`.
`ColHeaderPaddingLeft`	Thêm phần đệm vào văn bản tiêu đề cột (pixel)
`ColShowAsSubTextOf`	Đặt thuộc tính này thành tên của một cột khác sẽ chuyển cột thành cột con của cột đó. Hãy xem phần cột Văn bản phụ ở bên dưới.
`ColPaddingLeft`	Thêm phần đệm vào bên trái của ô con (pixel)
`ColPaddingTop`	Thêm phần đệm vào đầu ô con (pixel)
`ColLabelAbove`	Di chuyển nhãn lên trên giá trị ô con nếu nhãn được hiển thị dưới dạng cột Văn bản phụ.
`ColMultiValueDelimiter`	Liên kết các giá trị thuộc mảng đa giá trị với nhau bằng dấu tách này. Hãy xem phần về cột đa giá trị ở bên dưới.
`ColFirstMultiValueBold`	Khi hiển thị một giá trị thuộc mảng đa giá trị, mục đầu tiên sẽ hiển thị ở dạng in đậm.
`ColInlineLabel`	Nếu được đặt thành giá trị chuỗi, giá trị này sẽ được sử dụng để hiển thị nhãn bên trong giá trị ô có thể khác với tên cột. Ví dụ
`ColHideWhenBlank`	Khi đúng, bất kỳ nhãn và phần đệm nội tuyến nào của ô sẽ bị ẩn nếu giá trị ô trống.
`ColSubTextRow`	Đặt thành chỉ mục hàng khi hiển thị nhiều ô trên một ô văn bản phụ. Số 0 biểu thị hàng nội dung ô chính.
`ColAriaTextColumn`	Cột chứa mô tả aria cho các ô (ví dụ: ô biểu tượng).
`ColCellActionDisabledColumn`	Cột chứa cờ Boolean để kiểm soát xem hành động của ô (ví dụ: ô biểu tượng) có bị vô hiệu hóa hay không.
`ColImageWidth`	Kích thước biểu tượng/hình ảnh tính bằng pixel.
`ColImagePadding`	Phần đệm xung quanh một ô biểu tượng/hình ảnh.
`ColRowHeader`	Xác định một cột để hiển thị lớn hơn các ô khác (14 px thay vì 12 px). Thông thường sẽ chỉ có một Tiêu đề hàng cho mỗi nhóm cột.

Thuộc tính kiểu

Thuộc tính	Description
`Theme`	JSON chủ đề Fluent UI cần sử dụng, được tạo và xuất từ Fluent UI Theme Designer. Xem chủ đề để biết hướng dẫn về cách đặt cấu hình.
`Compact`	Giá trị là true khi kiểu nhỏ gọn cần được sử dụng
`AlternateRowColor`	Giá trị hex của màu hàng cần sử dụng trên các hàng thay thế.
`SelectionAlwaysVisible`	Các nút chọn có cần luôn hiển thị thay vì chỉ hiển thị khi di chuột qua hàng không.
`AccessibilityLabel`	Nhãn cần thêm vào nội dung mô tả aria cho bảng

Thuộc tính sự kiện

Thuộc tính	Description
`RaiseOnRowSelectionChangeEvent`	Sự kiện `OnChange` được kích hoạt khi một hàng được chọn/không được chọn. (xem bên dưới)
`InputEvent`	Một hoặc nhiều sự kiện đầu vào (có thể được kết hợp với nhau bằng cách nối chuỗi). Giá trị có thể dùng: `SetFocus`, `SetFocusOnRow`, `SetFocusOnHeader`, `ClearSelection`, `SetSelection`. Phải theo sau phần tử chuỗi ngẫu nhiên để đảm bảo sự kiện được kích hoạt. Các sự kiện có thể được kết hợp, ví dụ, `SetFocusClearSelection` sẽ xóa và đặt tiêu điểm cùng một lúc. `SetFocusOnRowSetSelection` sẽ tập trung vào một hàng và thiết lập lựa chọn cùng một lúc.
`EventName`	Xuất Sự kiện khi `OnChange` được kích hoạt. Giá trị có thể dùng: `Sort`, `CellAction`, `OnRowSelectionChange`
`EventColumn`	Xuất tên trường cột Sự kiện được sử dụng khi gọi `CellAction`
`EventRowKey`	Xuất cột Sự kiện chứa chỉ mục của hàng mà sự kiện đó được gọi hoặc Khóa hàng nếu thuộc tính `RecordKey` được đặt.
`SortEventColumn`	Tên của cột đã kích hoạt sự kiện Sắp xếp `OnChange`
`SortEventDirection`	Hướng sắp xếp đã kích hoạt sự kiện Sắp xếp `OnChange`

Cách sử dụng cơ bản

Để xác định những cột sẽ hiển thị trong DetailsList, hãy đặt cấu hình các thuộc tính sau đây của DetailsList:

Các cánh đồng. Thêm các trường bạn muốn bằng cách chọn tùy chọn Chỉnh sửa trong menu thả xuống chế độ kiểm soát ở bên phải (tùy chọn này sử dụng cùng một giao diện để sửa đổi thẻ dữ liệu định sẵn).
Cột. Cung cấp ánh xạ cụ thể giữa các cột và trường trong thuộc tính Columns.

Ví dụ:

Ánh xạ tới bảng hệ thống Tài khoản Dataverse, theo công thức sau:

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

Cột Văn bản phụ

Thuộc tính cột ColShowAsSubTextOf xác định một cột hiển thị bên dưới giá trị trong một cột khác. Bạn có thể sử dụng thuộc tính này để hiển thị thông tin phụ và nội dung có thể mở rộng (xem bên dưới).

Nếu bạn có một tập hợp được định nghĩa là:

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

Bạn có thể định nghĩa các cột là:

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

Kết quả sẽ là một bảng có dạng như sau:
Hình ảnh-20220323115627812

Loại ô

Thuộc tính cột ColCellType chấp nhận các giá trị sau: expand, tag, image, indicatortag, clickableimage, link

Mở rộng/Thu gọn

Nếu hàng 'Văn bản phụ' cần có biểu tượng mở rộng/thu gọn, có thể thêm một cột bổ sung vào tập dữ liệu cột và định nghĩa cột ColCellType set expand cũng:

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

Giả sử rằng thuộc tính RecordKey được đặt thành cột index, sự kiện OnChange khi đó có thể chứa nội dung sau để bung rộng/thu gọn các hàng:

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

Nội dung này sẽ tìm kiếm hàng đã có Hành động ô được gọi khi sử dụng chỉ mục (nếu không đặt RecordKey thì EventRowKey sẽ chứa số hàng), sau đó chuyển đổi giá trị mở rộng.

Kết quả sẽ như sau:

Thẻ & Thẻ chỉ báo

Sử dụng loại ô tag hoặc indicatortag , bạn có thể tạo thẻ màu nội tuyến để hiển thị nội dung ô.

tag - Điều này sẽ hiển thị hộp thẻ có nền và đường viền màu
tagindicator - Hiển thị hộp thẻ có chỉ báo hình tròn màu

Màu sắc có thể thay đổi theo từng hàng, do đó tập dữ liệu siêu dữ liệu cột chỉ cung cấp tên của các cột chứa màu sắc cho các thẻ.

Hãy xem xét tập dữ liệu sau đây:

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

Sau đó, bạn có thể thêm siêu dữ liệu cột để thêm 2 cột, một cột hiển thị là tag và cột còn lại hiển thị là tagindicator. Mỗi cột sử dụng cột TagColor và TagBorderColor để xác định màu:

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

Kết quả sẽ như sau:
Hình ảnh-20220323150248449

Hình ảnh & Hình ảnh có thể nhấp

Khi sử dụng loại ô là image hoặc clickableimage, bạn có thể đặt cấu hình hình ảnh nội tuyến có thể được chọn tùy ý để kích hoạt hành động OnChange.

Nội dung hình ảnh có thể được xác định bằng tiền tố sau đây:

https: liên kết vào một hình ảnh bên ngoài. Ví dụ, https://via.placeholder.com/100x70
icon: Sử dụng một trong các biểu tượng Fluent UI ví dụ, icon:SkypeCircleCheck
data: Sử dụng dữ liệu hình ảnh svg nội tuyến: ví dụ, data:image/svg+xml;utf8, %3Csvg%20%20viewBox%3D%270%200%2020...

Nếu hình ảnh thuộc loại clickableimage, sự kiện OnChange sẽ kích hoạt khi biểu tượng được chọn, với EvenName của CellAction, EventColumn cung cấp tên của cột hình ảnh và EventRowKey là RecordKey của hàng (nếu không đặt RecordKey thì EventRowKey sẽ chứa số hàng).

Ví dụ, hãy xem xét dữ liệu hàng:

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

và siêu dữ liệu cột sau đây:

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

Kết quả sẽ như sau:
Hình ảnh-20220323161817524

Đối với cột clickableimage , sự kiện OnChange có thể xử lý khi người dùng chọn (chuột hoặc bàn phím) và biểu tượng (giả sử biểu tượng đó không bị vô hiệu hóa) bằng cách sử dụng:

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

EventRowKey sẽ được điền bằng giá trị cột xác định theo thuộc tính RecordKey.

Liên kết

Các cột có thể được kết xuất dưới dạng đường liên kết. Như vậy, sự kiện OnChange sẽ được kích hoạt khi đường liên kết được chọn theo cách tương tự như cách hoạt động của hình ảnh có thể nhấp được mô tả ở trên.

Siêu dữ liệu cột cho một đường liên kết được đặt cấu hình như sau:

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

Nội dung ô sẽ được kết xuất như sau:
Hình ảnh-20220323162653369

Sự kiện OnChange được kích hoạt một lần nữa khi đường liên kết được nhấp vào, với EventColumn là tên của cột chứa đường liên kết và EventRowKey được điền bằng giá trị cột xác định theo thuộc tính RecordKey.

Cột đa giá trị

Một giá trị cột có thể có nhiều giá trị khi đặt giá trị đó thành Bảng/Tập hợp. Sau đó, giá trị sẽ được kết xuất dưới dạng giá trị nhiều ô. Ví dụ:

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

Siêu dữ liệu cột sau đó có thể là:

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

Kết quả sẽ là bảng hiển thị nội dung như sau:
Hình ảnh-20220324160725874

Hành vi

Sắp xếp sự kiện

Một cột được xác định là có thể sắp xếp khi đặt thuộc tính ColSortable thành true. Nếu cột hiển thị giá trị văn bản khác với thứ tự sắp xếp bắt buộc (ví dụ: cột ngày tháng hoặc trạng thái được định dạng), thì có thể chỉ định một cột sắp xếp khác bằng cách sử dụng thuộc tính ColSortBy .

Sau đó, quá trình sắp xếp được xử lý theo 2 cách:

Tự động khi được kết nối với nguồn dữ liệu Dataverse.
Thủ công khi sử dụng tập hợp.

Sắp xếp tự động

Khi tập dữ liệu Items là tập dữ liệu Dataverse gốc, tập dữ liệu này sẽ tự động được sắp xếp nếu một cột được đánh dấu là có thể sắp xếp. Nếu có bất kỳ thay đổi nào đối với hình dạng của tập hợp Dataverse khi sử dụng AddColumn hoặc khi lưu trữ dữ liệu trong một tập hợp, tính năng sắp xếp tự động sẽ không hoạt động nữa và bạn phải triển khai tính năng sắp xếp thủ công.

Sắp xếp thủ công

Sắp xếp thủ công được hỗ trợ bên ngoài thành phần để cho phép hỗ trợ trình kết nối tùy chỉnh và sắp xếp tập hợp cục bộ khi không được kết nối với một kết nối Dataverse. Các cột có thể được xác định là có thể sắp xếp hoặc không. Khi loại cột được chọn, sự kiện OnChange sẽ được kích hoạt để cung cấp cột và hướng. Sau đó, ứng dụng sẽ sử dụng những giá trị này để thay đổi tập hợp đã liên kết thành bảng để cập nhật các bản ghi đã sắp xếp.

Trong tập hợp Cột, hãy thêm một cột Boolean có thể sắp xếp
Thêm tên của cột có thể sắp xếp vào thuộc tính Columns.ColSortable

Bên trong sự kiện OnChange của Bảng, hãy thêm mã sau đây:

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

Đặt thuộc tính Sort Column thành ctxSortCol.

Đặt thuộc tính Sort Direction thành:

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

Đặt tập hợp các mục đầu vào cần sắp xếp bằng cách sử dụng các biến ngữ cảnh được đặt ở trên:
```
SortByColumns(colData,ctxSortCol,If(ctxSortAsc,SortOrder.Ascending,SortOrder.Descending))
```

Khi sự kiện OnChange được kích hoạt sau khi người dùng chọn tiêu đề cột để thay đổi cách sắp xếp, các biến ngữ cảnh sắp xếp sẽ được cập nhật bằng cách sử dụng thông tin sắp xếp mới được cung cấp, khiến tập dữ liệu đầu vào được sắp xếp lại và bảng được cập nhật cho phù hợp.

Phân trang

Quá trinh phân trang được thành phần xử lý nội bộ, tuy nhiên, các nút để lùi/tiến phải được tạo bởi ứng dụng lưu trữ và những sự kiện được gửi đến thành phần.

Dưới đây là những thuộc tính được sử dụng để kiểm soát quá trình phân trang:

PageSize - Xác định số lượng bản ghi được tải trên mỗi trang.
PageNumber - Hiển thị trang hiện tại.
HasNextPage - Trả về giá trị đúng nếu có trang tiếp theo.
HasPreviousPage - Trả về giá trị true nếu có trang trước.
TotalRecords - Xuất ra tổng số bản ghi có sẵn.

Sau đó, bạn có thể định nghĩa các nút phân trang như sau:

Tải trang đầu tiên
- OnSelect: UpdateContext({ctxGridEvent:"LoadFirstPage" & Text(Rand())})
- DisplayMode: If(grid.HasPreviousPage,DisplayMode.Edit,DisplayMode.Disabled)
Tải trang trước
- OnSelect: UpdateContext({ctxGridEvent:"LoadPreviousPage" & Text(Rand())})
- DisplayMode: If(grid.HasPreviousPage,DisplayMode.Edit,DisplayMode.Disabled)
Tải trang tiếp theo
- OnSelect: UpdateContext({ctxGridEvent:"LoadNextPage" & Text(Rand())})
- DisplayMode: If(grid.HasNextPage,DisplayMode.Edit,DisplayMode.Disabled)

Bạn có thể đặt số lượng nhãn bản ghi thành một biểu thức tương tự như sau:

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

Hiển thị đầu trang tiếp theo

Tính năng này được triển khai bằng cách sử dụng sự kiện 'SetFocusOnRow'. Nếu bạn đã liên kết thuộc tính InputEvent với ctxGridEvent, trên thuộc tính OnSelect của nút trang tiếp theo, bạn sẽ sử dụng: UpdateContext({ctxGridEvent:"LoadNextPageSetFocusOnRow" & Text(Rand())});

Sự kiện đầu vào

Thuộc tính InputEvent có thể được đặt là một hoặc nhiều giá trị sau:

SetFocus - Đặt tiêu điểm vào hàng đầu tiên của lưới
ClearSelection - Xóa mọi lựa chọn và trở về lựa chọn mặc định.
SetSelection - Thiết lập lựa chọn theo định nghĩa của cột RowSelected .
LoadNextPage - Tải trang tiếp theo nếu có
LoadPreviousPage - Tải trang trước nếu có
LoadFirstPage - Tải trang đầu tiên

Để đảm bảo rằng sự kiện đầu vào được chọn, sự kiện này phải có đủ giá trị ngẫu nhiên. Ví dụ, SetSelection" & Text(Rand())

Xem bên dưới để biết thêm chi tiết.

Mục đã chọn và hành động hàng

Thành phần này hỗ trợ các chế độ chọn Một, Nhiều hoặc Không có.

Khi chọn mục, các thuộc tính SelectedItems và Selected sẽ được cập nhật.

SelectedItems - Nếu bảng ở chế độ Lựa chọn nhiều, bảng này sẽ chứa một hoặc nhiều bản ghi từ bộ sưu tập Mục.
Selected - Nếu bảng ở chế độ Lựa chọn đơn, bảng này sẽ chứa các bản ghi được chọn.

Khi người dùng gọi hành động hàng, bằng cách nhấp đúp chuột hoặc nhấn phím enter vào một hàng đã chọn, sự kiện OnSelect sẽ được kích hoạt. Thuộc tính Selected sẽ chứa tham chiếu đến bản ghi đã được gọi. Sự kiện này có thể được sử dụng để hiển thị một bản ghi chi tiết hoặc điều hướng đến một màn hình khác.

Nếu thuộc tính RaiseOnRowSelectionChangeEvent được bật, khi các hàng được chọn thay đổi, sự kiện OnChange sẽ được kích hoạt với EventName được đặt thành OnRowSelectionChange. Nếu ứng dụng cần phản hồi lệnh chọn một hàng duy nhất thay vì lệnh nhấp đúp vào một hàng, thì OnChange có thể phát hiện điều này bằng mã tương tự như:

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

Xóa các mục hiện được chọn

Để xóa các bản ghi đã chọn, bạn phải đặt thuộc tính InputEvent thành một chuỗi bắt đầu bằng

Ví dụ

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

Sau đó, bạn có thể liên kết biến ngữ cảnh ctxTableEvent với thuộc tính InputEvent.

Đặt lựa chọn hàng

Nếu có một kịch bản mà một tập hợp bản ghi cụ thể cần được chọn theo chương trình, thì thuộc tính InputEvent có thể được đặt thành SetSelection hoặc SetFocusOnRowSetSelection kết hợp với việc đặt thuộc tính RecordSelected trên bản ghi.

Ví dụ nếu bạn có tập dữ liệu như sau:

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

Để chọn và chọn hàng đầu tiên, bạn có thể đặt InputEvent là "SetFocusOnRowSetSelection"&Text(Rand()) hoặc "SetSelection"&Text(Rand())

Đặt cấu hình hành vi "On Change"

Thêm và sửa đổi công thức sau đây trong thuộc tính OnChange của thành phần này để đặt cấu hình các hành động cụ thể dựa trên EventName do thành phần cung cấp:

Kích hoạt sự kiện khi người dùng thay đổi hàng đã chọn: Bật thuộc tính sự kiện Raise OnRowSelectionChange trong thành phần.
Đặt cấu hình hành vi liên kết: Thêm các cột có giá trị ColCellType được đặt thành 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 )
)

Giới hạn

Chỉ có thể sử dụng thành phần mã này trong ứng dụng canvas và trang tùy chỉnh.

Chia sẻ qua

DetailsList điều khiển

Description

Thuộc tính

Thuộc tính chính

`Items` của cải

`Columns` của cải

Thuộc tính kiểu

Thuộc tính sự kiện

Cách sử dụng cơ bản

Cột Văn bản phụ

Loại ô

Mở rộng/Thu gọn

Thẻ & Thẻ chỉ báo

Hình ảnh & Hình ảnh có thể nhấp

Liên kết

Cột đa giá trị

Hành vi

Sắp xếp sự kiện

Sắp xếp tự động

Sắp xếp thủ công

Phân trang

Hiển thị đầu trang tiếp theo

Sự kiện đầu vào

Mục đã chọn và hành động hàng

Xóa các mục hiện được chọn

Đặt lựa chọn hàng

Đặt cấu hình hành vi "On Change"

Giới hạn

Phản hồi

Tài nguyên bổ sung

Chia sẻ qua

DetailsList điều khiển

Description

Thuộc tính

Thuộc tính chính

Items của cải

Columns của cải

Thuộc tính kiểu

Thuộc tính sự kiện

Cách sử dụng cơ bản

Cột Văn bản phụ

Loại ô

Mở rộng/Thu gọn

Thẻ & Thẻ chỉ báo

Hình ảnh & Hình ảnh có thể nhấp

Liên kết

Cột đa giá trị

Hành vi

Sắp xếp sự kiện

Sắp xếp tự động

Sắp xếp thủ công

Phân trang

Hiển thị đầu trang tiếp theo

Sự kiện đầu vào

Mục đã chọn và hành động hàng

Xóa các mục hiện được chọn

Đặt lựa chọn hàng

Đặt cấu hình hành vi "On Change"

Giới hạn

Phản hồi

Tài nguyên bổ sung

`Items` của cải

`Columns` của cải