配置

立即下載DevExtreme

定義Accordion UI組件配置屬性的對(duì)象。

accessKey

指定將焦點(diǎn)設(shè)置在UI組件上的快捷鍵。

• Type：
• Default Value：undefined

該屬性的值將傳遞給UI組件底層的HTML元素的accesskey屬性。

activeStateEnabled

指定UI組件是否因用戶交互而改變其可視化狀態(tài)。

• Type：
• Default Value：false

 當(dāng)用戶按下鼠標(biāo)的主要按鈕時(shí)，UI組件切換到活動(dòng)狀態(tài)。當(dāng)此屬性設(shè)置為true時(shí)，應(yīng)用活動(dòng)狀態(tài)的CSS規(guī)則，您可以更改這些規(guī)則來(lái)定制組件。

當(dāng)您在平臺(tái)上顯示組件時(shí)，如果該平臺(tái)的指導(dǎo)方針包含UI組件的活動(dòng)狀態(tài)更改，則使用此屬性。

animationDuration

一個(gè)數(shù)字，指定在面板展開(kāi)或折疊的動(dòng)畫上花費(fèi)的時(shí)間(以毫秒為單位)。

• Type：

• Default Value：300，200(材質(zhì))

collapsible

指定是否可以折疊所有項(xiàng)，或者是否必須始終展開(kāi)至少一個(gè)項(xiàng)。

• Type：
• Default Value：false

dataSource

將UI組件綁定到數(shù)據(jù)。

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

Accordion用于字符串值或?qū)ο蟮募稀?

 根據(jù)您的數(shù)據(jù)源，將Accordion綁定到數(shù)據(jù)，如下所示。如果數(shù)據(jù)源提供對(duì)象，也要指定itemTemplate，如果對(duì)象包含items部分中描述的字段，則可以跳過(guò)此部分。

• Data Array ——將數(shù)組分配給dataSource選項(xiàng)。
• Read-Only Data in JSON Format——將dataSource屬性設(shè)置為返回JSON數(shù)據(jù)的JSON文件或服務(wù)的URL。
• OData——實(shí)現(xiàn)ODataStore。
• Web API, PHP, MongoDB——使用以下擴(kuò)展之一，使服務(wù)器能夠根據(jù)DevExtreme UI組件使用的協(xié)議處理數(shù)據(jù)：

 然后，使用方法在客戶機(jī)上配置對(duì)服務(wù)器的訪問(wèn)，如下所示，這個(gè)方法是DevExtreme.AspNet.Data的一部分。

$(function() {
let serviceUrl = "http://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——實(shí)現(xiàn)一個(gè)CustomStore。

 不管輸入上的數(shù)據(jù)源是什么，Accordion總是將其包裝在DataSource對(duì)象中，此對(duì)象允許您對(duì)數(shù)據(jù)進(jìn)行排序、篩選、分組和執(zhí)行其他數(shù)據(jù)整形操作。要獲取它的實(shí)例，請(qǐng)調(diào)用getDataSource()方法。

查看以下關(guān)于數(shù)據(jù)綁定的注意事項(xiàng)：

• 如果指定了數(shù)據(jù)源，則不要指定items屬性，反之亦然。
• 數(shù)據(jù)字段名不能等于此值，且不能包含。、:、[、]等字符。
• 存儲(chǔ)和數(shù)據(jù)源具有處理和更新數(shù)據(jù)的方法，但是，這些方法不允許執(zhí)行特定的任務(wù)(例如，替換整個(gè)數(shù)據(jù)集，在運(yùn)行時(shí)重新配置數(shù)據(jù)訪問(wèn))。對(duì)于這樣的任務(wù)，創(chuàng)建一個(gè)新的數(shù)組、存儲(chǔ)或DataSource，并將其分配給DataSource屬性，就像在jQuery、Angular、React和Vue中更改屬性的文章中所示。

deferRendering

指定在顯示面板時(shí)是否呈現(xiàn)面板的內(nèi)容，如果為false，則立即呈現(xiàn)內(nèi)容。

• Type：
• Default Value： true

disabled

指定UI組件是否響應(yīng)用戶交互。

• Type：
• Default Value：false

elementAttr

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

• Type：
• Default Value： {}

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

focusStateEnabled

指定UI組件是否可以集中使用鍵盤導(dǎo)航。

• 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)——有關(guān)如何遷移到視口單元的信息，請(qǐng)參閱W0017警告描述。

hint

指定當(dāng)用戶在UI組件上暫停時(shí)出現(xiàn)的提示文本。

Type：
Default Value：undefined

hoverStateEnabled

指定當(dāng)用戶在UI組件上暫停時(shí)，UI組件是否改變其狀態(tài)。

Type：

Default Valu： true (desktop)

itemComponent

在React中指定的itemTemplate屬性的別名，接受自定義組件。

itemHoldTimeout

觸發(fā)onItemHold事件之前的時(shí)間周期(以毫秒為單位)。

• Type：
• Default Value：750

itemRender

在React中指定的itemTemplate屬性的別名，接受呈現(xiàn)函數(shù)。

items[]

UI組件顯示的項(xiàng)數(shù)組。

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

items數(shù)組可以包含：

• 字符串
• 具有本節(jié)中描述的字段的對(duì)象
• 對(duì)象與任何其他字段。在本例中，指定 itemTemplate。

如果您需要更新UI組件項(xiàng)，重新分配整個(gè)項(xiàng)數(shù)組，如下例所示：

accordionInstance.option('items', newItems);

 作為項(xiàng)的替代方案，您可以使用dataSource屬性，它接受DataSource對(duì)象，該對(duì)象的底層存儲(chǔ)提供了一個(gè)API，允許更新單個(gè)項(xiàng)，而無(wú)需重新分配整個(gè)項(xiàng)集合。

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

itemTemplate

為項(xiàng)指定自定義模板。

• Type：
• Template Data：
• 當(dāng)前項(xiàng)的數(shù)據(jù)。
• Default Name： 'item'

itemTitleComponent

在React中指定的itemTitleTemplate屬性的別名，接受自定義組件。

itemTitleRender

在React中指定的itemTitleTemplate屬性的別名，接受呈現(xiàn)函數(shù)。

itemTitleTemplate

指定項(xiàng)目標(biāo)題的自定義模板。

• Type：
• Template Data：
• 當(dāng)前項(xiàng)的數(shù)據(jù)。
• Default Name： 'item'

keyExpr

指定key屬性，該屬性提供用于訪問(wèn)數(shù)據(jù)項(xiàng)的鍵值，每個(gè)鍵值必須是唯一的。

Type |

Default Value：null

multiple

指定UI組件是一次可以展開(kāi)多個(gè)項(xiàng)還是只能展開(kāi)單個(gè)項(xiàng)。

• Type：
• Default Value：false

noDataText

指定在項(xiàng)集合為空時(shí)UI組件顯示的文本或HTML標(biāo)記。

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

 Accordion組件計(jì)算noDataText屬性的值，然而，這種評(píng)估使得Accordion可能容易受到XSS攻擊。為了防止這些攻擊，請(qǐng)?jiān)趯TML標(biāo)記分配給noDataText屬性之前對(duì)其進(jìn)行編碼。

onContentReady

一個(gè)在UI組件被渲染和每次重新繪制組件時(shí)執(zhí)行的函數(shù)。

• Type：
• Function parameters：
• e： ContentReadyEvent
• 關(guān)于事件的信息。

目標(biāo)結(jié)構(gòu)：

• Default Value： null

onDisposing

在UI組件被處理之前執(zhí)行的函數(shù)。

• Type：
• Function parameters：
• e： DisposingEvent
• 關(guān)于事件的信息。

目標(biāo)結(jié)構(gòu)：

• Default Value： null

onInitialized

JavaScript框架中用于保存UI組件實(shí)例的函數(shù)。

• Type：
• Function parameters：
• e：InitializedEvent
• 關(guān)于事件的信息。

目標(biāo)結(jié)構(gòu)：

• Default Value： null

onItemClick

當(dāng)單擊或輕擊集合項(xiàng)時(shí)執(zhí)行的函數(shù)。

• Type：
• Function parameters：
• e：ItemClickEvent
• 關(guān)于事件的信息。

目標(biāo)結(jié)構(gòu)：

• Default Value： null

onItemContextMenu

當(dāng)右鍵單擊或按下集合項(xiàng)時(shí)執(zhí)行的函數(shù)。

• Type：
• Function parameters：
• e： ItemContextMenuEvent
• 關(guān)于事件的信息。

目標(biāo)結(jié)構(gòu)：

• Default Value： null

onItemHold

當(dāng)一個(gè)集合項(xiàng)被持有一段指定時(shí)間后執(zhí)行的函數(shù)。

• Type：
• Function parameters：
• e： ItemHoldEvent
• 關(guān)于事件的信息。

目標(biāo)結(jié)構(gòu)：

• Default Value： null

onItemRendered

呈現(xiàn)集合項(xiàng)后執(zhí)行的函數(shù)。

• Type：
• Function parameters：
• e： ItemRenderedEvent
• 關(guān)于事件的信息。

目標(biāo)結(jié)構(gòu)：

• Default Value： null

onItemTitleClick

當(dāng)單擊或輕擊accordion項(xiàng)目的標(biāo)題時(shí)執(zhí)行的函數(shù)。

• Type：
• Function parameters：
• e： ItemTitleClickEvent
• 關(guān)于事件的信息。

目標(biāo)結(jié)構(gòu)：

• Default Value： null

onOptionChanged

在UI組件屬性被更改后執(zhí)行的函數(shù)。

• Type：
• Function parameters：
• e：OptionChangedEvent
• 關(guān)于事件的信息。

目標(biāo)結(jié)構(gòu)：

• Default Value： null

下面的示例展示了如何訂閱組件屬性更改：

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

onSelectionChanged

當(dāng)選擇或取消一個(gè)集合項(xiàng)時(shí)執(zhí)行的函數(shù)。

• Type：
• Function parameters：
• e： SelectionChangedEvent
• 關(guān)于事件的信息。

目標(biāo)結(jié)構(gòu)：

• Default Value： null

repaintChangesOnly

指定是否僅重新繪制數(shù)據(jù)已更改的元素。

• Type：
• Default Value：false

rtlEnabled

將UI組件切換為從右向左表示。

• Type：
• Default Value：false

 當(dāng)此屬性設(shè)置為true時(shí)，UI組件文本將從右向左流動(dòng)，元素的布局將相反。要將整個(gè)應(yīng)用程序/站點(diǎn)切換為從右到左的表示，請(qǐng)將傳遞給DevExpress.config(config)方法的對(duì)象的rtlEnabled字段賦值為true。

DevExpress.config({
rtlEnabled: true
});

selectedIndex

當(dāng)前展開(kāi)項(xiàng)的索引號(hào)。

• Type：

• Default Value：0
• Raised Events：selectionChanged
  selectedItem

selectedItem

展開(kāi)的項(xiàng)對(duì)象。

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

selectedItemKeys

指定當(dāng)前展開(kāi)的項(xiàng)鍵的數(shù)組。

• Type：<any>
• Raised Events：selectionChanged

selectedItems

當(dāng)前展開(kāi)的項(xiàng)對(duì)象的數(shù)組。

• Type：<any>
• Raised Events：selectionChanged

tabIndex

指定使用Tab鍵進(jìn)行導(dǎo)航時(shí)元素的編號(hào)。

• Type：

• Default Value：0

該屬性的值將傳遞給UI組件底層的HTML元素的 tabindex屬性。

visible

指定UI組件是否可見(jiàn)。

• 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)——有關(guān)如何遷移到視口單元的信息，請(qǐng)參閱W0017警告描述。