排序列表

排序列表用于对集合进行排序。

导入#


import { OrderList } from 'primereact/orderlist';

基础#

排序列表用作具有 value 和 onChange 属性的受控输入。列表项的内容需要使用 itemTemplate 属性定义，该属性接收列表中作为参数的对象。

产品


<OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products"></OrderList>

过滤#

通过启用 filter 属性，可以使用输入字段过滤项目。使用 filterBy 属性配置的对象的属性检查过滤器值，并使用 filterMatchMode (例如，contains) 匹配模式进行过滤。

产品


<OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products" filter filterBy="name"></OrderList>

拖放#

通过启用 dragdrop 属性，可以使用拖放重新排序项目。

产品


<OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} 
    header="Products" dragdrop></OrderList>

无障碍#

屏幕阅读器

可以通过传递 aria-labelledby 或 aria-label 属性，使用 listProps 提供描述列表框的值。列表元素具有 listbox 角色和 aria-multiselectable 属性。每个列表项都有一个 option 角色，并带有 aria-selected 和 aria-disabled 属性。

控件按钮是 button 元素，带有 aria-label，默认情况下，该 aria-label 引用 locale API 的 aria.moveTop、aria.moveUp、aria.moveDown 和 aria.moveBottom 属性，或者您可以使用 moveTopButtonProps、moveUpButtonProps、moveDownButtonProps 和 moveBottomButtonProps 来自定义按钮，例如覆盖默认的 aria-label 属性。


<span id="lb">Options</span>
<OrderList aria-labelledby="lb" />

<OrderList aria-label="City" />

列表框键盘支持

按键	功能
tab	将焦点移动到第一个选定的选项，如果没有，则第一个选项接收焦点。
向上箭头	将焦点移动到上一个选项。
向下箭头	将焦点移动到下一个选项。
回车	切换焦点选项的选定状态。
空格	切换焦点选项的选定状态。
home	将焦点移动到第一个选项。
end	将焦点移动到最后一个选项。
shift + 向下箭头	将焦点移动到下一个选项，并切换选择状态。
shift + 向上箭头	将焦点移动到上一个选项，并切换选择状态。
shift + 空格	选择最近选定的选项和焦点选项之间的项目。
control + shift + home	选择焦点选项和直到第一个选项的所有选项。
control + shift + end	选择焦点选项和直到第一个选项的所有选项。
control + a	选择所有选项。

按钮键盘支持

按键	功能
回车	执行按钮操作。
空格	执行按钮操作。