配置
定義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"
})
})
});
	點(diǎn)擊復(fù)制
- 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"
}
});
});
	點(diǎn)擊復(fù)制
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):
| 名稱 | 類型 | 描述 | 
|---|---|---|
| model | any | 模型數(shù)據(jù),僅在使用Knockout時(shí)可用。 | 
| element | | | UI組件的容器,當(dāng)使用jQuery時(shí),它是一個(gè)HTML元素或jQuery元素。 | 
| component | Accordion | UI組件的實(shí)例。 | 
- Default Value: null
onDisposing
在UI組件被處理之前執(zhí)行的函數(shù)。
- Type:
- Function parameters:
- e: DisposingEvent
- 關(guān)于事件的信息。
目標(biāo)結(jié)構(gòu):
| 名稱 | 類型 | 描述 | 
|---|---|---|
| model | any | 模型數(shù)據(jù),僅在使用Knockout時(shí)可用。 | 
| element | | | UI組件的容器,當(dāng)使用jQuery時(shí),它是一個(gè)HTML元素或jQuery元素。 | 
| component | Accordion | UI組件的實(shí)例。 | 
- Default Value: null
onInitialized
JavaScript框架中用于保存UI組件實(shí)例的函數(shù)。
- Type:
- Function parameters:
- e:InitializedEvent
- 關(guān)于事件的信息。
目標(biāo)結(jié)構(gòu):
| 名稱 | 類型 | 描述 | 
|---|---|---|
| element | | | UI組件的容器,當(dāng)使用jQuery時(shí),它是一個(gè)HTML元素或jQuery元素。 | 
| component | Accordion | UI組件的實(shí)例。 | 
- Default Value: null
onItemClick
當(dāng)單擊或輕擊集合項(xiàng)時(shí)執(zhí)行的函數(shù)。
- Type:
- Function parameters:
- e:ItemClickEvent
- 關(guān)于事件的信息。
目標(biāo)結(jié)構(gòu):
| 名稱 | 類型 | 描述 | 
|---|---|---|
| model | any | 模型數(shù)據(jù),僅在使用Knockout時(shí)可用。 | 
| itemIndex | 單擊項(xiàng)的索引。 | |
| itemElement | | | 項(xiàng)目的容器,當(dāng)使用jQuery時(shí),它是一個(gè)HTML元素或jQuery元素。 | 
| itemData | 單擊項(xiàng)的數(shù)據(jù)。 | |
| event | Event ( or ) | 導(dǎo)致函數(shù)執(zhí)行的事件,它是一個(gè)EventObject或 jQuery.Event。 | 
| element | | | UI組件的容器。 | 
| component | Accordion | UI組件的實(shí)例。 | 
- Default Value: null
onItemContextMenu
當(dāng)右鍵單擊或按下集合項(xiàng)時(shí)執(zhí)行的函數(shù)。
- Type:
- Function parameters:
- e: ItemContextMenuEvent
- 關(guān)于事件的信息。
目標(biāo)結(jié)構(gòu):
| 名稱 | 類型 | 描述 | 
|---|---|---|
| model | any | 模型數(shù)據(jù),僅在使用Knockout時(shí)可用。 | 
| itemIndex | 項(xiàng)目的索引 | |
| itemElement | | | 項(xiàng)目的容器,當(dāng)使用jQuery時(shí),它是一個(gè)HTML元素或jQuery元素。 | 
| itemData | 項(xiàng)目的數(shù)據(jù)。 | |
| event | Event ( or ) | 導(dǎo)致函數(shù)執(zhí)行的事件,它是一個(gè)EventObject或 jQuery.Event。 | 
| element | | | UI組件的容器,當(dāng)使用jQuery時(shí),它是一個(gè)HTML元素或jQuery元素。 | 
| component | Accordion | UI組件的實(shí)例。 | 
- Default Value: null
onItemHold
當(dāng)一個(gè)集合項(xiàng)被持有一段指定時(shí)間后執(zhí)行的函數(shù)。
- Type:
- Function parameters:
- e: ItemHoldEvent
- 關(guān)于事件的信息。
目標(biāo)結(jié)構(gòu):
| 名稱 | 類型 | 描述 | 
|---|---|---|
| model | any | 模型數(shù)據(jù),僅在使用Knockout時(shí)可用。 | 
| itemIndex | 項(xiàng)目的索引。 | |
| itemElement | | | 項(xiàng)目的容器,當(dāng)使用jQuery時(shí),它是一個(gè)HTML元素或jQuery元素。 | 
| itemData | 被保存項(xiàng)的數(shù)據(jù)。 | |
| event | Event ( or ) | 導(dǎo)致函數(shù)執(zhí)行的事件,它是一個(gè)EventObject或 jQuery.Event。 | 
| element | | | UI組件的容器,當(dāng)使用jQuery時(shí),它是一個(gè)HTML元素或jQuery元素。 | 
| component | Accordion | UI組件的實(shí)例。 | 
- Default Value: null
onItemRendered
呈現(xiàn)集合項(xiàng)后執(zhí)行的函數(shù)。
- Type:
- Function parameters:
- e: ItemRenderedEvent
- 關(guān)于事件的信息。
目標(biāo)結(jié)構(gòu):
| 名稱 | 類型 | 描述 | 
|---|---|---|
| model | any | 模型數(shù)據(jù),僅在使用Knockout時(shí)可用。 | 
| itemIndex | 當(dāng)前項(xiàng)的索引。 | |
| itemElement | | | 項(xiàng)目的容器,當(dāng)使用jQuery時(shí),它是一個(gè)HTML元素或jQuery元素。 | 
| itemData | 當(dāng)前項(xiàng)的數(shù)據(jù)。 | |
| element | | | UI組件的容器,當(dāng)使用jQuery時(shí),它是一個(gè)HTML元素或jQuery元素。 | 
| component | Accordion | UI組件的實(shí)例。 | 
- 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):
| 名稱 | 類型 | 描述 | 
|---|---|---|
| component | Accordion | UI組件的實(shí)例。 | 
| element | | | 項(xiàng)目的索引。 | 
| event | Event ( or ) | 導(dǎo)致函數(shù)執(zhí)行的事件,它是一個(gè)EventObject或 jQuery.Event。 | 
| itemData | 被保存項(xiàng)的數(shù)據(jù)。 | |
| itemElement | | | 項(xiàng)目的容器,當(dāng)使用jQuery時(shí),它是一個(gè)HTML元素或jQuery元素。 | 
| itemIndex | 單擊項(xiàng)的索引。 | |
| model | any | 模型數(shù)據(jù),僅在使用Knockout時(shí)可用。 | 
- Default Value: null
onOptionChanged
在UI組件屬性被更改后執(zhí)行的函數(shù)。
- Type:
- Function parameters:
- e:OptionChangedEvent
- 關(guān)于事件的信息。
目標(biāo)結(jié)構(gòu):
| 名稱 | 類型 | 描述 | 
|---|---|---|
| value | any | 修改后的屬性的新值。 | 
| previousValue | any | UI組件的前一個(gè)值。 | 
| name | 如果它屬于第一級(jí),則修改后的屬性。否則,它被嵌套到的第一級(jí)屬性。 | |
| model | any | 模型數(shù)據(jù),僅在使用Knockout時(shí)可用。 | 
| fullName | 包含所有父屬性的修改屬性的路徑。 | |
| element | | | UI組件的容器,當(dāng)使用jQuery時(shí),它是一個(gè)HTML元素或jQuery元素。 | 
| component | UI組件的實(shí)例。 | 
- Default Value: null
下面的示例展示了如何訂閱組件屬性更改:
	
$(function() {
$("#accordionContainer").dxAccordion({
// ...
onOptionChanged: function(e) {
if(e.name === "changedProperty") {
// handle the property change here
}
}
});
});
	點(diǎn)擊復(fù)制
	
onSelectionChanged
當(dāng)選擇或取消一個(gè)集合項(xiàng)時(shí)執(zhí)行的函數(shù)。
- Type:
- Function parameters:
- e: SelectionChangedEvent
- 關(guān)于事件的信息。
目標(biāo)結(jié)構(gòu):
| 名稱 | 類型 | 描述 | 
|---|---|---|
| removedItems | <any> | 已取消選擇的項(xiàng)目的數(shù)據(jù)。 | 
| model | any | 模型數(shù)據(jù),僅在使用Knockout時(shí)可用。 | 
| element | | | UI組件的容器,當(dāng)使用jQuery時(shí),它是一個(gè)HTML元素或jQuery元素。 | 
| component | UI組件的實(shí)例。 | |
| addedItems | <any> | 已選擇項(xiàng)的數(shù)據(jù)。 | 
- 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
});
	點(diǎn)擊復(fù)制
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警告描述。

 QQ交談
QQ交談 在線咨詢
在線咨詢 
                 
                
 渝公網(wǎng)安備
            50010702500608號(hào)
渝公網(wǎng)安備
            50010702500608號(hào)
             
            
 客服熱線
客服熱線