配置

立即下載DevExtreme

定義Accordion UI組件配置屬性的對象。

accessKey

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

• Type： String
• Default Value：undefined

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

activeStateEnabled

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

• Type：Boolean
• Default Value：false

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

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

animationDuration

一個數(shù)字，指定在面板展開或折疊的動畫上花費的時間(以毫秒為單位)。

• Type：Number

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

collapsible

指定是否可以折疊所有項，或者是否必須始終展開至少一個項。

• Type：Boolean
• Default Value：false

View Dmeo

dataSource

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

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

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

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

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

• DevExtreme.AspNet.Data
• DevExtreme-PHP-Data
• devextreme-query-mongodb

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

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

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

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

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

deferRendering

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

• Type：Boolean
• Default Value： true

disabled

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

• Type：Boolean
• Default Value：false

elementAttr

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

• Type： Object
• Default Value： {}

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

focusStateEnabled

指定UI組件是否可以集中使用鍵盤導航。

• Type：Boolean
• Default Valu： true (desktop)

height

指定UI組件的高度。

• Type： Number | String | Function
• Default Valu： Number | String
• UI組件的高度。
• Default Value：undefined

此屬性接受以下類型之一的值：

• Number——以像素為單位的高度。
• String——css接受的高度度量，例如：55px, 20vh, 80%， inherit。
• Function (deprecated since v21.2)——有關(guān)如何遷移到視口單元的信息，請參閱W0017警告描述。

hint

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

Type： String
Default Value：undefined

hoverStateEnabled

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

Type：Boolean

Default Valu： true (desktop)

itemComponent

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

itemHoldTimeout

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

• Type：Number
• Default Value：750

itemRender

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

items[]

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

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

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

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

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

accordionInstance.option('items', newItems);

作為項的替代方案，您可以使用dataSource屬性，它接受DataSource對象，該對象的底層存儲提供了一個API，允許更新單個項，而無需重新分配整個項集合。

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

itemTemplate

為項指定自定義模板。

• Type： template
• Template Data：Object
• 當前項的數(shù)據(jù)。
• Default Name： 'item'

itemTitleComponent

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

itemTitleRender

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

itemTitleTemplate

指定項目標題的自定義模板。

• Type： template
• Template Data：Object
• 當前項的數(shù)據(jù)。
• Default Name： 'item'

keyExpr

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

Type：String | Function

Default Value：null

multiple

指定UI組件是一次可以展開多個項還是只能展開單個項。

• Type：Boolean
• Default Value：false

View Dmeo

noDataText

指定在項集合為空時UI組件顯示的文本或HTML標記。

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

Accordion組件計算noDataText屬性的值，然而，這種評估使得Accordion可能容易受到XSS攻擊。為了防止這些攻擊，請在將HTML標記分配給noDataText屬性之前對其進行編碼。

onContentReady

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

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

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

• Default Value： null

onDisposing

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

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

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

• Default Value： null

onInitialized

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

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

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

• Default Value： null

onItemClick

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

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

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

• Default Value： null

onItemContextMenu

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

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

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

• Default Value： null

onItemHold

當一個集合項被持有一段指定時間后執(zhí)行的函數(shù)。

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

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

• Default Value： null

onItemRendered

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

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

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

• Default Value： null

onItemTitleClick

當單擊或輕擊accordion項目的標題時執(zhí)行的函數(shù)。

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

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

• Default Value： null

onOptionChanged

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

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

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

• Default Value： null

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

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

onSelectionChanged

當選擇或取消一個集合項時執(zhí)行的函數(shù)。

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

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

• Default Value： null

repaintChangesOnly

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

• Type：Boolean
• Default Value：false

rtlEnabled

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

• Type：Boolean
• Default Value：false

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

DevExpress.config({
rtlEnabled: true
});

DATAGRID DEMO

NAVIGATION UI DEMO

EDITORS DEMO

selectedIndex

當前展開項的索引號。

• Type：Number

• Default Value：0
• Raised Events：selectionChanged
  selectedItem

selectedItem

展開的項對象。

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

selectedItemKeys

指定當前展開的項鍵的數(shù)組。

• Type： Array<any>
• Raised Events：selectionChanged

selectedItems

當前展開的項對象的數(shù)組。

• Type： Array<any>
• Raised Events：selectionChanged

tabIndex

指定使用Tab鍵進行導航時元素的編號。

• Type：Number

• Default Value：0

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

visible

指定UI組件是否可見。

• Type：Boolean
• Default Value：true

width

指定UI組件的寬度。

• Type： Number | String | Function
• Return Value：Number | String
• UI組件的寬度。
• Default Value：undefined

此屬性接受以下類型之一的值：

• Number——以像素為單位的寬度。
• String——CSS接受的寬度度量，例如“55 px”、“20大眾”、“80%”、“汽車”、“繼承”。
• Function (deprecated since v21.2)——有關(guān)如何遷移到視口單元的信息，請參閱W0017警告描述。