Adobe Flex — технологія швидкої розробки RIA

Елемент керування DataGrid

Додати до моєї бази знань

Flex  RIA  Flash

DataGrid

Елемент керування DataGrid — це список, який може відображати більше однієї колонки даних. Це відформатована таблиця даних, яка дозволяє задати комірки таблиці, які можна редагувати, а також це основа для багатьох керованих даними застосунків.

Для отримання інформації про наступні теми, які часто є важливими для створення вдосконалених елементів контролю сітки даних, див.:

• Як відформатувати інформацію в кожній комірці DataGrid і проконтролювати ввід даних користувачем в комірки, див. Using Item Renderers and Item Editors.
• Як перетягувати об'єкти до і із структури даних, див. Using Drag and Drop.

Для посилання на повну інформацію, див. Adobe Flex Language Reference.

Про елемент керування DataGrid

Елемент керування DataGrid забезпечує наступні властивості:

• Розміщення колонок з можливістю зміни розміру, сортування та налаштування, включаючи можливість колонок бути прихованими.
• Додаткові колонки, які можна налаштувати, та заголовки рядка, включаючи додатково прихований заголовок тексту.
• Колонки, розмір і порядок яких може бути змінений користувачем під час виконання.
• Вибір подій.
• Можливість використовувати елемент візуалізації користувача для будь-якої колонки.
• Підтримка посторінкового виведення даних.
• Блокування рядків і стовпчиків, яких не проглядають.

На наступному малюнку показаний елемент управління DataGrid:

Рядки відповідають за візуалізацію елементів. Кожен рядок розміщений нижче попереднього по вертикалі. Стовпчики відповідають за підтримку стану кожної візуальної колонки; вони контролюють ширину, колір і розмір.

Створення елементу керування DataGrid

Можна використовувати тег для визначення елементу керування DataGrid в MXML. Потрібно вказати значення ідентифікатора (id value), якщо є намір звернутися до компоненту деінде в MXML, чи в іншому тезі або блоці ActionScript.

Елемент керування DataGrid використовує джерело даних на основі списку. Для отримання додаткової інформації див. Using Data Providers and Collections.

Дані для елементу керування DataGrid вказуються за допомогою властивості dataProvider. Дані можна визначити кількома різними шляхами. У найпростішому випадку для створення елементу керування DataGrid, використовується субтег властивості з тегами і для визначення записів як сукупність масивів (ArrayCollection) об'єктів. Кожен об'єкт визначає рядок елементу керування DataGrid, а властивості об'єкта визначають стовпчик записів для рядка, як показано в наступному прикладі:

<?xml version="1.0"?>
<!--dpcontrols/DataGridSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
   <mx:DataGrid> 
      <mx:ArrayCollection>
         <mx:Object>
            <mx:Artist>Pavement</mx:Artist>
            <mx:Price>11.99</mx:Price>
            <mx:Album>Slanted and Enchanted</mx:Album>
         </mx:Object>
         <mx:Object>
            <mx:Artist>Pavement</mx:Artist>
            <mx:Album>Brighten the Corners</mx:Album>
            <mx:Price>11.99</mx:Price>
         </mx:Object>
      </mx:ArrayCollection>
   </mx:DataGrid>
</mx:Application>

Нижче приводиться SWF-файл для попереднього прикладу:

Цей приклад показує, як можна скористатися перевагами MXML за замовчуванням. Необов’язково використовувати тег , тому що dataProvider є властивістю елементу керування DataGrid за замовчуванням. Так само необов’язково використовувати тег всередині тегу , оскільки джерело є властивістю класу ArrayCollection за замовчуванням. І наостанок, необов’язково вказувати тег для масиву джерела.

Можна також визначити об'єкти шляхом використання властивостей безпосередньо в тегах об'єктів, як показано в наступному прикладі:

<?xml version="1.0"?>
<!--dpcontrols/DataGridSimpleAttributes.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
   <mx:DataGrid> 
      <mx:ArrayCollection>
         <mx:Object Artist="Pavement" 
            Album="Slanted and Enchanted" Price="11.99" />
         <mx:Object Artist="Pavement" 
            Album="Brighten the Corners" Price="11.99" />
      </mx:ArrayCollection>
   </mx:DataGrid>
</mx:Application>

Нижче приводиться SWF-файл для попереднього прикладу:

Назви стовпчиків, що відображаються в елементі керування DataGrid, є назвами властивостей об'єктів масиву (Array Objects). За замовчуванням стовпчики знаходяться в алфавітному порядку по назвах властивостей. Різні об'єкти можуть визначати їхні властивості у різних порядках. Якщо об'єкт масиву не включає властивість, елемент керування DataGrid відображає порожню комірку в тому рядку.

Задання [визначення] стовпчиків

Кожен стовпчик в елементі керування DataGrid представлений об'єктом DataGridColumn. Для вибору стовпчиків DataGrid, визначення порядку для їх відображення, а також встановлення додаткових властивостей використовується властивість стовпчиків елементу керування DataGrid і тег . Також можна використовувати видиму властивість класу DataGridColumn, щоб приховати і знову відобразити стовпчики, як описано в розділі Hiding and displaying columns.

Для отримання повної інформації для тегу , див. DataGridColumn в Adobe Flex Language Reference.

Задання елементу масиву дочірньому тегу тегу показано в наступному прикладі:

<?xml version="1.0"?>
<!--dpcontrols/DataGridSpecifyColumns.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
   <mx:DataGrid> 
      <mx:ArrayCollection>
         <mx:Object Artist="Pavement" Price="11.99" 
            Album="Slanted and Enchanted" />
         <mx:Object Artist="Pavement" 
            Album="Brighten the Corners" Price="11.99" />
      </mx:ArrayCollection>
      <mx:columns>
         <mx:DataGridColumn dataField="Album" />
         <mx:DataGridColumn dataField="Price" />
      </mx:columns>
   </mx:DataGrid>
</mx:Application>

Нижче приводиться SWF-файл для попереднього прикладу:

У цьому прикладі в елементі керування DataGrid відображаються колонки Альбом (Album) та Ціна (Price). Можна змінювати порядок стовпчиків таким же чином, як показано в наступному прикладі:

<mx:columns>
    <mx:DataGridColumn dataField="Price" />
    <mx:DataGridColumn dataField="Album" />
</mx:columns>

У цьому прикладі вказано, що стовпчик Price — це перший стовпчик в DataGrid, а стовпчик Album — другий.

Можна також використовувати тег , щоб встановити інші параметри [опції]. Наступний приклад використовує властивість заголовку тексту (headerText property) для встановлення назви стовпчика у значення, відмінне від значення назви Album по замовчуванню, назва альбому, і використовує властивість ширини (width), щоб встановити колонку назви альбому досить широкою для відображення повної назви альбомів:

<mx:columns>
    <mx:DataGridColumn dataField="Album" width="200" />
    <mx:DataGridColumn dataField="Price" headerText="List Price" />
</mx:columns>

Приховування і відображення колонок

Якщо є можливість відображати колонку в певний час, можна визначити видиму властивість класу DataGridColumn, щоб приховати або відобразити колонку. Наступний приклад дозволяє приховати або показати ціну альбому, натиснувши на кнопку:

<?xml version="1.0"?>
<!--dpcontrols/DataGridVisibleColumn.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
   <mx:DataGrid id="myDG" width="350"> 
      <mx:dataProvider>
         <mx:ArrayCollection>
            <mx:source>
               <mx:Object Artist="Pavement" Price="11.99" 
                  Album="Slanted and Enchanted" />
               <mx:Object Artist="Pavement" 
                  Album="Brighten the Corners" Price="11.99" />
            </mx:source>
         </mx:ArrayCollection>
      </mx:dataProvider>
      <mx:columns>
         <mx:DataGridColumn dataField="Artist" />
         <mx:DataGridColumn dataField="Album" />
         <mx:DataGridColumn id="price" dataField="Price" visible="false"/>
      </mx:columns>
   </mx:DataGrid>
   <!--The column id property specifies the column to show.-->
   <mx:Button label="Toggle Price Column" 
      click="price.visible = !price.visible;" />
</mx:Application> 

Нижче приводиться SWF-файли для попереднього прикладу:

Передача даних до елементу керування DataGrid

Flex дозволяє заповнити елемент керування DataGrid з опису змінної ActionScript або з моделі даних Flex. Наступний приклад заповнює елемент керування DataGrid шляхом використання змінної:

<?xml version="1.0"?>
<!--dpcontrols/DataGridPassData.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
   initialize="initData()">
   <mx:Script>
   <![CDATA[
      import mx.collections.*;
      private var DGArray:Array = [
         {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
         {Artist:'Pavement', Album:'Brighten the Corners', Price:11.99}];
         
      [Bindable]
      public var initDG:ArrayCollection;
      //Initialize initDG ArrayCollection variable from the Array.
      //You can use this technique to convert an HTTPService, 
      //WebService, or RemoteObject result to ArrayCollection.
      public function initData():void {
         initDG=new ArrayCollection(DGArray);
      }
   ]]>
   </mx:Script>

   <mx:DataGrid id="myGrid" width="350" height="200" 
      dataProvider="{initDG}" >
      <mx:columns>
         <mx:DataGridColumn dataField="Album" />
         <mx:DataGridColumn dataField="Price" />
      </mx:columns> 
   </mx:DataGrid>
</mx:Application>

Нижче приводиться SWF-файл для попереднього прикладу:

У цьому прикладі змінна initDG прив’язується до властивості . Можна вказати подію опису стовпчика при використанні прив'язки даних. Для опису використання моделі, як постачальника даних, див. Populating a ComboBox control by using variables and models.

Зверніть увагу на додаткові посилання

Якщо вас цікавить...

Flex

RIA

Flash

Головний розділ

Adobe Flex — технологія швидкої розробки RIA