配置

立即下载DevExtreme

定义Accordion UI组件配置属性的对象。

accessKey

指定将焦点设置在UI组件上的快捷键。

• Type：
• Default Value：undefined

该属性的值将传递给UI组件底层的HTML元素的accesskey属性。

activeStateEnabled

指定UI组件是否因用户交互而改变其可视化状态。

• Type：
• Default Value：false

当用户按下鼠标的主要按钮时，UI组件切换到活动状态。当此属性设置为true时，应用活动状态的CSS规则，您可以更改这些规则来定制组件。

当您在平台上显示组件时，如果该平台的指导方针包含UI组件的活动状态更改，则使用此属性。

animationDuration

一个数字，指定在面板展开或折叠的动画上花费的时间(以毫秒为单位)。

• Type：

• Default Value：300，200(材质)

collapsible

指定是否可以折叠所有项，或者是否必须始终展开至少一个项。

• Type：
• Default Value：false

dataSource

将UI组件绑定到数据。

• Type：String | < | dxAccordionItem | any> | Store | DataSource | DataSource Configuration | null
• Default Value：null

Accordion用于字符串值或对象的集合。

根据您的数据源，将Accordion绑定到数据，如下所示。如果数据源提供对象，也要指定itemTemplate，如果对象包含items部分中描述的字段，则可以跳过此部分。

• Data Array ——将数组分配给dataSource选项。
• Read-Only Data in JSON Format——将dataSource属性设置为返回JSON数据的JSON文件或服务的URL。
• OData——实现ODataStore。
• Web API, PHP, MongoDB——使用以下扩展之一，使服务器能够根据DevExtreme UI组件使用的协议处理数据：

然后，使用方法在客户机上配置对服务器的访问，如下所示，这个方法是DevExtreme.AspNet.Data的一部分。

$(function() {
let serviceUrl = "//url/to/my/service";
$("#accordionContainer").dxAccordion({
// ...
dataSource: DevExpress.data.AspNet.createStore({
key: "ID",
loadUrl: serviceUrl + "/GetAction",
insertUrl: serviceUrl + "/InsertAction",
updateUrl: serviceUrl + "/UpdateAction",
deleteUrl: serviceUrl + "/DeleteAction"
})
})
});

• Any other data source——实现一个CustomStore。

 不管输入上的数据源是什么，Accordion总是将其包装在DataSource对象中，此对象允许您对数据进行排序、筛选、分组和执行其他数据整形操作。要获取它的实例，请调用getDataSource()方法。

查看以下关于数据绑定的注意事项：

• 如果指定了数据源，则不要指定items属性，反之亦然。
• 数据字段名不能等于此值，且不能包含。、:、[、]等字符。
• 存储和数据源具有处理和更新数据的方法，但是，这些方法不允许执行特定的任务(例如，替换整个数据集，在运行时重新配置数据访问)。对于这样的任务，创建一个新的数组、存储或DataSource，并将其分配给DataSource属性，就像在jQuery、Angular、React和Vue中更改属性的文章中所示。

deferRendering

指定在显示面板时是否呈现面板的内容，如果为false，则立即呈现内容。

• Type：
• Default Value： true

disabled

指定UI组件是否响应用户交互。

• Type：
• Default Value：false

elementAttr

指定要附加到UI组件的容器元素的全局属性。

• Type：
• Default Value： {}

$(function(){
$("#accordionContainer").dxAccordion({
// ...
elementAttr: {
id: "elementId",
class: "class-name"
}
});
});

focusStateEnabled

指定UI组件是否可以集中使用键盘导航。

• Type：
• Default Valu： true (desktop)

height

指定UI组件的高度。

• Type： | |
• Default Valu： | String
• UI组件的高度。
• Default Value：undefined

此属性接受以下类型之一的值：

• Number——以像素为单位的高度。
• String——css接受的高度度量，例如：55px, 20vh, 80%， inherit。
• Function (deprecated since v21.2)——有关如何迁移到视口单元的信息，请参阅W0017警告描述。

hint

指定当用户在UI组件上暂停时出现的提示文本。

Type：
Default Value：undefined

hoverStateEnabled

指定当用户在UI组件上暂停时，UI组件是否改变其状态。

Type：

Default Valu： true (desktop)

itemComponent

在React中指定的itemTemplate属性的别名，接受自定义组件。

itemHoldTimeout

触发onItemHold事件之前的时间周期(以毫秒为单位)。

• Type：
• Default Value：750

itemRender

在React中指定的itemTemplate属性的别名，接受呈现函数。

items[]

UI组件显示的项数组。

• Type： < | dxAccordionItem | any>
• Raised Events： optionChanged

items数组可以包含：

• 字符串
• 具有本节中描述的字段的对象
• 对象与任何其他字段。在本例中，指定 itemTemplate。

如果您需要更新UI组件项，重新分配整个项数组，如下例所示：

accordionInstance.option('items', newItems);

作为项的替代方案，您可以使用dataSource属性，它接受DataSource对象，该对象的底层存储提供了一个API，允许更新单个项，而无需重新分配整个项集合。

提示：如果使用dataSource，则不要使用items属性，反之亦然。

itemTemplate

为项指定自定义模板。

• Type：
• Template Data：
• 当前项的数据。
• Default Name： 'item'

itemTitleComponent

在React中指定的itemTitleTemplate属性的别名，接受自定义组件。

itemTitleRender

在React中指定的itemTitleTemplate属性的别名，接受呈现函数。

itemTitleTemplate

指定项目标题的自定义模板。

• Type：
• Template Data：
• 当前项的数据。
• Default Name： 'item'

keyExpr

指定key属性，该属性提供用于访问数据项的键值，每个键值必须是唯一的。

Type |

Default Value：null

multiple

指定UI组件是一次可以展开多个项还是只能展开单个项。

• Type：
• Default Value：false

noDataText

指定在项集合为空时UI组件显示的文本或HTML标记。

• Type：
• Default Value：'No data to display'

Accordion组件计算noDataText属性的值，然而，这种评估使得Accordion可能容易受到XSS攻击。为了防止这些攻击，请在将HTML标记分配给noDataText属性之前对其进行编码。

onContentReady

一个在UI组件被渲染和每次重新绘制组件时执行的函数。

• Type：
• Function parameters：
• e： ContentReadyEvent
• 关于事件的信息。

目标结构：

• Default Value： null

onDisposing

在UI组件被处理之前执行的函数。

• Type：
• Function parameters：
• e： DisposingEvent
• 关于事件的信息。

目标结构：

• Default Value： null

onInitialized

JavaScript框架中用于保存UI组件实例的函数。

• Type：
• Function parameters：
• e：InitializedEvent
• 关于事件的信息。

目标结构：

• Default Value： null

onItemClick

当单击或轻击集合项时执行的函数。

• Type：
• Function parameters：
• e：ItemClickEvent
• 关于事件的信息。

目标结构：

• Default Value： null

onItemContextMenu

当右键单击或按下集合项时执行的函数。

• Type：
• Function parameters：
• e： ItemContextMenuEvent
• 关于事件的信息。

目标结构：

• Default Value： null

onItemHold

当一个集合项被持有一段指定时间后执行的函数。

• Type：
• Function parameters：
• e： ItemHoldEvent
• 关于事件的信息。

目标结构：

• Default Value： null

onItemRendered

呈现集合项后执行的函数。

• Type：
• Function parameters：
• e： ItemRenderedEvent
• 关于事件的信息。

目标结构：

• Default Value： null

onItemTitleClick

当单击或轻击accordion项目的标题时执行的函数。

• Type：
• Function parameters：
• e： ItemTitleClickEvent
• 关于事件的信息。

目标结构：

• Default Value： null

onOptionChanged

在UI组件属性被更改后执行的函数。

• Type：
• Function parameters：
• e：OptionChangedEvent
• 关于事件的信息。

目标结构：

• Default Value： null

下面的示例展示了如何订阅组件属性更改：

$(function() {
$("#accordionContainer").dxAccordion({
// ...
onOptionChanged: function(e) {
if(e.name === "changedProperty") {
// handle the property change here
}
}
});
});

onSelectionChanged

当选择或取消一个集合项时执行的函数。

• Type：
• Function parameters：
• e： SelectionChangedEvent
• 关于事件的信息。

目标结构：

• Default Value： null

repaintChangesOnly

指定是否仅重新绘制数据已更改的元素。

• Type：
• Default Value：false

rtlEnabled

将UI组件切换为从右向左表示。

• Type：
• Default Value：false

当此属性设置为true时，UI组件文本将从右向左流动，元素的布局将相反。要将整个应用程序/站点切换为从右到左的表示，请将传递给DevExpress.config(config)方法的对象的rtlEnabled字段赋值为true。

DevExpress.config({
rtlEnabled: true
});

selectedIndex

当前展开项的索引号。

• Type：

• Default Value：0
• Raised Events：selectionChanged
  selectedItem

selectedItem

展开的项对象。

• Type： any
• Default Value： null
• Raised Events： selectionChanged

selectedItemKeys

指定当前展开的项键的数组。

• Type：<any>
• Raised Events：selectionChanged

selectedItems

当前展开的项对象的数组。

• Type：<any>
• Raised Events：selectionChanged

tabIndex

指定使用Tab键进行导航时元素的编号。

• Type：

• Default Value：0

该属性的值将传递给UI组件底层的HTML元素的 tabindex属性。

visible

指定UI组件是否可见。

• Type：
• Default Value：true

width

指定UI组件的宽度。

• Type： | |
• Return Value： |
• UI组件的宽度。
• Default Value：undefined

此属性接受以下类型之一的值：

• Number——以像素为单位的宽度。
• String——CSS接受的宽度度量，例如“55 px”、“20大众”、“80%”、“汽车”、“继承”。
• Function (deprecated since v21.2)——有关如何迁移到视口单元的信息，请参阅W0017警告描述。