閱讀(5.4k) 書(shū)簽贊(0) 我要糾錯(cuò)

Flex DataGrid控件

2018-01-01 18:51 更新

介紹

DataGrid控件在可滾動(dòng)網(wǎng)格上方顯示一行列標(biāo)題。

類聲明

以下是 spark.components.DataGrid 類的聲明:

public class DataGrid   
   extends SkinnableContainerBase 
      implements IFocusManagerComponent, IIMESupport

公共財(cái)產(chǎn)

S.N.	屬性和描述
1	columnsLength:int [只讀]如果指定了列IList，則返回columns.length的值，否則返回0。
2	dataProvider:IList 與網(wǎng)格中的行對(duì)應(yīng)的數(shù)據(jù)項(xiàng)列表。
3	dataProviderLength:int [只讀]如果指定了dataProvider IList，則返回dataProvider.length的值，否則返回0。
4	dataTipField:String 數(shù)據(jù)提供程序中要顯示為數(shù)據(jù)提示的字段的名稱。
5	dataTipFunction:Function 指定要在數(shù)據(jù)提供程序的每個(gè)項(xiàng)目上運(yùn)行以確定其數(shù)據(jù)提示的回調(diào)函數(shù)。
6	editable : Boolean GridColumn editable屬性的默認(rèn)值，表示是否可以編輯相應(yīng)單元格的數(shù)據(jù)提供者項(xiàng)目。
7	editorColumnIndex:int [只讀]正在編輯的單元格的基于零的列索引。
8	editorRowIndex:int [只讀]正在編輯的單元格的基于零的行索引。
9	enableIME:Boolean [只讀]指示在組件接收焦點(diǎn)時(shí)是否應(yīng)啟用IME的標(biāo)志。
10	imeMode:String GridColumn imeMode屬性的默認(rèn)值，它指定IME(輸入法編輯器)模式。
11	itemEditor:IFactory GridColumn itemEditor屬性的默認(rèn)值，它指定用于創(chuàng)建項(xiàng)目編輯器實(shí)例的IGridItemEditor類。
12	itemEditorInstance:IGridItemEditor [只讀]對(duì)項(xiàng)目編輯器的當(dāng)前活動(dòng)實(shí)例的引用(如果存在)。
13	itemRenderer:IFactory 用于不指定列的項(xiàng)呈示器。
14	preserveSelection:Boolean 如果為true，則在數(shù)據(jù)提供者刷新其收集時(shí)保留選擇。
15	requestedColumnCount:int 此網(wǎng)格的測(cè)量寬度足夠大，以顯示第一個(gè)requestedColumnCount列。
16	requestedMaxRowCount:int 測(cè)量的網(wǎng)格的高度足夠大，以顯示不超過(guò)requestedMaxRowCount行。
17	requestedMinColumnCount:int 此網(wǎng)格的測(cè)量寬度足夠大，以至少顯示requestedMinColumnCount列。
18	requestedMinRowCount:int 此網(wǎng)格的測(cè)量高度足夠大，以至少顯示requestedMinRowCount行。
19	requestedRowCount:int 此網(wǎng)格的測(cè)量高度足夠大，以顯示第一個(gè)requestedRowCount行。
20	requireSelection:Boolean 如果為true，并且selectionMode屬性不是GridSelectionMode.NONE，則必須始終在網(wǎng)格中選擇項(xiàng)目。
21	resizableColumns:Boolean 指示用戶是否可以更改列的大小。
22	rowHeight:Number 如果variableRowHeight為false，則此屬性指定每行的實(shí)際高度，以像素為單位。
23	selectedCell:CellPosition 如果selectionMode為GridSelectionMode.SINGLE_CELL或GridSelectionMode.MULTIPLE_CELLS，則返回從第0列第0列開(kāi)始的第一個(gè)選定單元格，并在移動(dòng)到下一行之前逐行通過(guò)每一列。
24	selectedCells:Vector。< CellPosition> 如果selectionMode為GridSelectionMode.SINGLE_CELL或GridSelectionMode.MULTIPLE_CELLS，則返回表示網(wǎng)格中所選單元格位置的CellPosition對(duì)象的向量。
25	selectedIndex:int 如果selectionMode為GridSelectionMode.SINGLE_ROW或GridSelectionMode.MULTIPLE_ROWS，則返回第一個(gè)選定行的rowIndex。
26	selectedIndices:Vector。< int> 如果selectionMode為GridSelectionMode.SINGLE_ROW或GridSelectionMode.MULTIPLE_ROWS，則返回所選行索引的Vector。
27	selectedItem:Object 如果selectionMode為GridSelectionMode.SINGLE_ROW或GridSelectionMode.MULTIPLE_ROWS，則返回當(dāng)前選定或未定義的數(shù)據(jù)提供程序中未選擇行的項(xiàng)目。
28	selectedItems:Vector。< Object> 如果selectionMode為GridSelectionMode.SINGLE_ROW或GridSelectionMode.MULTIPLE_ROWS，則返回當(dāng)前選定的dataProvider項(xiàng)的Vector。
29	selectionLength:int [只讀]如果selectionMode是Grid SelectionMode.SINGLE ROW或Grid SelectionMode.MULTIPLE ROWS，則返回所選行的數(shù)目。
30	selectionMode:String 控制的選擇模式。
31	showDataTips:Boolean 如果為true，則為所有可見(jiàn)單元格顯示dataTip。
32	sortableColumns:Boolean 指定用戶是否可以對(duì)列進(jìn)行交互式排序。
33	typicalItem:Object 網(wǎng)格布局確保未指定寬度的列足夠?qū)?，以顯示此默認(rèn)數(shù)據(jù)提供者項(xiàng)目的項(xiàng)呈示器。
34	variableRowHeight:Boolean 如果為true，則每行的高度是到目前為止顯示的單元格的首選高度的最大值。
35	columns : IList 此網(wǎng)格顯示的GridColumn對(duì)象的列表。

公共方法

S.N.	方法和描述
1	DataGrid() 構(gòu)造函數(shù)。
2	addSelectedCell(rowIndex:int，columnIndex:int):Boolean 如果selectionMode為GridSelectionMode.SINGLE_CELL或GridSelectionMode.MULTIPLE_CELLS，則將單元格添加到選擇中，并將插入符位置設(shè)置為單元格。
3	addSelectedIndex(rowIndex:int):Boolean 如果selectionMode為GridSelectionMode.MULTIPLE_ROWS，則將此行添加到選擇，并將插入符位置設(shè)置為此行。
4	clearSelection():Boolean 如果selectionMode不是GridSelectionMode.NONE，則刪除所有選定的行和單元格。
5	endItemEditorSession(cancel:Boolean = false):Boolean 關(guān)閉當(dāng)前活動(dòng)的編輯器，并通過(guò)調(diào)用項(xiàng)目編輯器的save()方法保存編輯器的值。
6	ensureCellIsVisible(rowIndex:int，columnIndex:int = -1):void 如有必要，請(qǐng)?jiān)O(shè)置verticalScrollPosition和horizontalScrollPosition屬性，以使指定的單元格完全可見(jiàn)。
7	invalidateCell(rowIndex:int，columnIndex:int):void 如果指定的單元格可見(jiàn)，將重新顯示。
8	invalidateTypicalItem():void
9	removeSelectedCell(rowIndex:int，columnIndex:int):Boolean 如果selectionMode為GridSelectionMode.SINGLE_CELL或GridSelectionMode.MULTIPLE_CELLS，則從選擇中刪除單元格，并將插入符位置設(shè)置為單元格。
10	removeSelectedIndex(rowIndex:int):Boolean 如果selectionMode為GridSelectionMode.SINGLE_ROW或GridSelectionMode.MULTIPLE_ROWS，則從選擇中刪除此行并將插入符位置設(shè)置為此行。
11	selectAll():Boolean 如果selectionMode是GridSelectionMode.MULTIPLE_ROWS，則選擇所有行并刪除插入符號(hào)，或如果selectionMode為GridSelectionMode.MULTIPLE_CELLS選擇所有單元格并刪除插入符號(hào)。
12	selectCellRegion(rowIndex:int，columnIndex:int，rowCount:uint，columnCount:uint):Boolean 如果selectionMode為GridSelectionMode.MULTIPLE_CELLS，則將選擇設(shè)置為單元格區(qū)域中的所有單元格，并將插入符號(hào)位置設(shè)置為單元格區(qū)域中的最后一個(gè)單元格。
13	selectIndices(rowIndex:int，rowCount:int):Boolean 如果selectionMode是GridSelectionMode.MULTIPLE_ROWS，則將選擇設(shè)置為指定的行，并將光標(biāo)位置設(shè)置為endRowIndex。
14	selectionContainsCell(rowIndex:int，columnIndex:int):Boolean 如果selectionMode為GridSelectionMode.SINGLE_CELL或GridSelectionMode.MULTIPLE_CELLS，則如果單元格在當(dāng)前選擇中則返回true。
15	selectionContainsCellRegion(rowIndex:int，columnIndex:int，rowCount:int，columnCount:int):Boolean 如果selectionMode為GridSelectionMode.MULTIPLE_CELLS，則如果單元格區(qū)域中的單元格在當(dāng)前選擇中，則返回true。
16	selectionContainsIndex(rowIndex:int):Boolean 如果selectionMode是Grid SelectionMode.SINGLE ROW或Grin SelectionMode.MULTIPLE ROWS，則如果索引處的行在當(dāng)前選擇中，則返回true。
17	selectionContainsIndices(rowIndices:Vector。< int>):Boolean 如果selectionMode為GridSelectionMode.MULTIPLE_ROWS，則如果索引中的行在當(dāng)前選擇中，則返回true。
18	setSelectedCell(rowIndex:int，columnIndex:int):Boolean 如果selectionMode是GridSelectionMode.SINGLE_CELL或GridSelectionMode.MULTIPLE_CELLS，則將選擇和插入符號(hào)位置設(shè)置到此單元格。
19	setSelectedIndex(rowIndex:int):Boolean 如果selectionMode是Grid SelectionMode.SINGLE ROW或Grid SelectionMode.MULTIPLE ROWS，則將選擇和插入符號(hào)位置設(shè)置為此行。
20	sortByColumns(columnIndices:Vector。< int>，isInteractive:Boolean = false):Boolean 按一個(gè)或多個(gè)列對(duì)DataGrid進(jìn)行排序，并刷新顯示。
21	startItemEditorSession(rowIndex:int，columnIndex:int):Boolean 在網(wǎng)格中選定單元格上啟動(dòng)編輯器會(huì)話。

保護(hù)方法

S.N.	方法和描述
1	commitCaretPosition(newCaretRowIndex:int，newCaretColumnIndex:int):void 更新網(wǎng)格的插入符位置。
2	commitInteractiveSelection(selectionEventKind:String，rowIndex:int，columnIndex:int，rowCount:int = 1，columnCount:int = 1):Boolean 響應(yīng)改變選擇的用戶輸入(鼠標(biāo)或鍵盤)，此方法調(diào)度selectionChanging事件。

S.N.

方法和描述

commitCaretPosition(newCaretRowIndex:int，newCaretColumnIndex:int):void

更新網(wǎng)格的插入符位置。

commitInteractiveSelection(selectionEventKind:String，rowIndex:int，columnIndex:int，rowCount:int = 1，columnCount:int = 1):Boolean

響應(yīng)改變選擇的用戶輸入(鼠標(biāo)或鍵盤)，此方法調(diào)度selectionChanging事件。

事件

S.N.	事件和描述
1	caretChange 由于用戶交互或以編程方式設(shè)置插入符位置，大小或可見(jiàn)性已更改，由網(wǎng)格蒙皮部分調(diào)度。
2	gridClick 當(dāng)鼠標(biāo)單擊單元格時(shí)由網(wǎng)格蒙皮部分分派。
3	gridDoubleClick 當(dāng)鼠標(biāo)雙擊單元格時(shí)由網(wǎng)格蒙皮部分分派。
4	gridItemEditorSessionCancel 在項(xiàng)目編輯器關(guān)閉且未保存其數(shù)據(jù)之后分派。
5	gridItemEditorSessionSave 在項(xiàng)目編輯器中的數(shù)據(jù)已保存到數(shù)據(jù)提供者并且編輯器已關(guān)閉之后分派。
6	gridItemEditorSessionStart 在打開(kāi)項(xiàng)目編輯器后立即分派。
7	gridItemEditorSessionStarting 在請(qǐng)求新的項(xiàng)目編輯器會(huì)話時(shí)分派。
8	gridMouseDown 當(dāng)鼠標(biāo)按鈕在網(wǎng)格單元上按下時(shí)由網(wǎng)格蒙皮部分分派。
9	gridMouseDrag 如果鼠標(biāo)在按鈕釋放之前移動(dòng)，則在gridMouseDown事件之后由網(wǎng)格蒙皮部分調(diào)度。
10	gridMouseUp 在gridMouseDown事件之后，當(dāng)鼠標(biāo)按鈕被釋放時(shí)，由網(wǎng)格皮膚部分分派，即使鼠標(biāo)不再在網(wǎng)格內(nèi)。
11	gridRollOut 當(dāng)鼠標(biāo)離開(kāi)網(wǎng)格單元時(shí)由網(wǎng)格蒙皮部分分派。
12	gridRollOver 當(dāng)鼠標(biāo)進(jìn)入網(wǎng)格單元格時(shí)由網(wǎng)格蒙皮部分分派。
13	selectionChange 選擇已更改時(shí)分派。
14	selectionChanging 當(dāng)選擇將要更改時(shí)分派。
15	sortChange 在排序應(yīng)用于數(shù)據(jù)提供者的集合之后調(diào)度。
16	sortChanging 在排序應(yīng)用于數(shù)據(jù)提供者的集合之前分派。

繼承的方法

此類繼承以下類中的方法:

spark.components.supportClasses.SkinnableContainerBase
spark.components.supportClasses.SkinnableComponent
mx.core.UIComponent
mx.core.FlexSprite
flash.display.Sprite
flash.display.DisplayObjectContainer
flash.display.InteractiveObject
flash.display.DisplayObject
flash.events.EventDispatcher
Object

Flex DataGrid控件示例

讓我們按照以下步驟通過(guò)創(chuàng)建測(cè)試應(yīng)用程序來(lái)檢查Flex應(yīng)用程序中DataGrid控件的使用:

步驟	描述
1	在 Flex - 創(chuàng)建應(yīng)用程序章節(jié)中所述，在包 com.tutorialspoint.client 下創(chuàng)建名為 HelloWorld 的項(xiàng)目。
2	修改 HelloWorld.mxml ，如下所述。保持文件的其余部分不變。
3	編譯并運(yùn)行應(yīng)用程序，以確保業(yè)務(wù)邏輯按照要求工作。

以下是修改后的mxml文件 src / com.tutorialspoint / HelloWorld.mxml 的內(nèi)容。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
   xmlns:s="library://ns.adobe.com/flex/spark"
   xmlns:mx="library://ns.adobe.com/flex/mx"
   width="100%" height="100%" minWidth="500" minHeight="500"
   >
   <fx:Style source="/com/tutorialspoint/client/Style.css"/>	
   <fx:Script>
      <![CDATA[
         import mx.collections.ArrayCollection;
         [Bindable]
         public var data:ArrayCollection = new ArrayCollection(
         [   
            {value:"France", code:"FR"},
            {value:"Japan", code:"JP"},
            {value:"India", code:"IN"},
            {value:"Russia", code:"RS"},
            {value:"United States", code:"US"}		
         ]                
         );
      ]]>
   </fx:Script>
   <s:BorderContainer width="630" height="480" id="mainContainer" 
      styleName="container">
      <s:VGroup width="100%" height="100%" gap="50" 
         horizontalAlign="center" verticalAlign="middle">
         <s:Label id="lblHeader" text="Complex Controls Demonstration" 
            fontSize="40" color="0x777777" styleName="heading"/>
         <s:Panel id="dataGridPanel" title="Using DataGrid" 
            width="500" height="300">
            <s:layout>
               <s:VerticalLayout  gap="10" verticalAlign="middle" 
                  horizontalAlign="center"/>							
            </s:layout>					
            <s:DataGrid dataProvider="{data}" id="dataGrid">
               <s:columns>
                  <s:ArrayList>
                     <s:GridColumn dataField="code" width="100" 
                        headerText="Code" />
                     <s:GridColumn dataField="value" width="200" 
                        headerText="Value" />
                  </s:ArrayList>
               </s:columns>
            </s:DataGrid>
            <s:HGroup width="60%">
               <s:Label text="Code :"/> 
               <s:Label text="{dataGrid.selectedItem.code}"
                  fontWeight="bold"/>
               <s:Label text="Value :"/> 
               <s:Label text="{dataGrid.selectedItem.value}"
                  fontWeight="bold"/>						
            </s:HGroup>
         </s:Panel>
      </s:VGroup>	 
   </s:BorderContainer>	
</s:Application>

準(zhǔn)備好所有更改后，讓我們以正常模式編譯和運(yùn)行應(yīng)用程序，就像在 Flex - 創(chuàng)建應(yīng)用程序中一樣章節(jié)。如果一切順利，您的應(yīng)用程序，這將產(chǎn)生以下結(jié)果:[在線試用]

以上內(nèi)容是否對(duì)您有幫助：

寫筆記

我要補(bǔ)充

Flex DataGrid控件

介紹

類聲明

公共財(cái)產(chǎn)

公共方法

保護(hù)方法

事件

繼承的方法

Flex DataGrid控件示例

推薦文章

推薦教程

推薦課程