`
- 浏览:
214099 次
- 性别:
- 来自:
北京
-
<?xml version="1.0" encoding="utf-8"?>
<!-- This example uses the dataProvider to build the dataGrid columns dynamically -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
creationComplete="initApp()">
<mx:Script><![CDATA[
import mx.controls.dataGridClasses.DataGridColumn;
import mx.controls.DataGrid;
import mx.collections.XMLListCollection;
import mx.controls.Alert;
[Bindable]
private var _xlcCatalog:XMLListCollection; //the dataProvider for the DG
//run by creationComplete
public function initApp():void
{
_xlcCatalog = new XMLListCollection(xmlCatalog.product); //wrap the XML product nodes in an XMLListCollection
buildDG(); //creates the dataGrid
}//initApp
private function buildDG():void
{
var aColumnDef:Array = getColumnDefArray(); //returns a noraml array of objects that specify DtaGridColumn properties
var oColumnDef:Object;
var dg:DataGrid = new DataGrid; //instantiate a new DataGrid
var dgc:DataGridColumn;
var aColumnsNew:Array = dg.columns
var iTotalDGWidth:int = 0;
for (var i:int=0;i<aColumnDef.length;i++) { //loop over the column definition array
oColumnDef = aColumnDef[i];
dgc = new DataGridColumn(); //instantiate a new DataGridColumn
dgc.dataField = oColumnDef.dataField; //start setting the properties from the column def array
dgc.width = oColumnDef.width;
iTotalDGWidth += dgc.width; //add up the column widths
dgc.editable = oColumnDef.editable;
dgc.sortable = oColumnDef.sortable
dgc.visible = oColumnDef.visible;
dgc.wordWrap = oColumnDef.wordWrap;
aColumnsNew.push(dgc) //push the new dataGridColumn onto the array
}
dg.columns = aColumnsNew; //assign the array back to the dtaGrid
dg.editable = true;
dg.width = iTotalDGWidth;
dg.dataProvider = _xlcCatalog; //set the dataProvider
this.addChild(dg); //add the dataGrid to the application
}//buildDG
//uses the first product node to define the columns
private function getColumnDefArray():Array
{
//Alert.show("colcount:" + xmlCatalog.toXMLString());
var aColumns:Array = new Array();
var node0:XML = xmlCatalog.product[0]; //get the first "product" node
var xlColumns:XMLList = node0.children(); //get its child nodes (columns) as an XMLList
var xmlColumn:XML
var oColumnDef:Object;
for (var i:int=0;i<xlColumns.length();i++) { //loop over the xmlList
xmlColumn = xlColumns[i];
oColumnDef = new Object();
oColumnDef.dataField = xmlColumn.localName(); //make the dataField be the node name
switch (oColumnDef.dataField) { //conditional column property logic
case "name":
oColumnDef.width = 80;
oColumnDef.sortable = false;
oColumnDef.visible = true;
oColumnDef.editable = false;
oColumnDef.wordWrap = false;
break;
case "description":
oColumnDef.width = 200;
oColumnDef.sortable = false;
oColumnDef.visible = true;
oColumnDef.editable = false;
oColumnDef.wordWrap = true;
break;
case "price":
oColumnDef.width = 40;
oColumnDef.sortable = true;
oColumnDef.visible = true;
oColumnDef.editable = true;
oColumnDef.wordWrap = false;
break;
case "image":
oColumnDef.width = 100;
oColumnDef.sortable = false;
oColumnDef.visible = false;
oColumnDef.editable = false;
oColumnDef.wordWrap = false;
break;
default:
oColumnDef.width = 50;
oColumnDef.sortable = true;
oColumnDef.visible = true;
oColumnDef.editable = false;
oColumnDef.wordWrap = false;
break;
}
aColumns.push(oColumnDef);
}
return aColumns; //return the array
}//getColumnDefArray
]]></mx:Script>
<mx:XML id="xmlCatalog">
<catalog>
<product productId="1">
<name>Nokia 6010</name>
<description>Easy to use without sacrificing style, the Nokia 6010 phone offers functional voice communication supported by text messaging, multimedia messaging, mobile internet, games and more</description>
<price>99.99</price>
<image>assets/pic/Nokia_6010.gif</image>
<series>6000</series>
<triband>false</triband>
<camera>false</camera>
<video>false</video>
<highlight1>MMS</highlight1>
<highlight2>Large color display</highlight2>
</product>
<product productId="2">
<name>Nokia 3100 Blue</name>
<description>Light up the night with a glow-in-the-dark cover - when it's charged with light you can easily find your phone in the dark. When you get a call, the Nokia 3100 phone flashes in tune with your ringing tone. And when you snap on a Nokia Xpress-on™ gaming cover*, you'll get luminescent light effects in time to the gaming action.</description>
<price>139</price>
<image>assets/pic/Nokia_3100_blue.gif</image>
<series>3000</series>
<triband>true</triband>
<camera>false</camera>
<video>false</video>
<highlight1>Glow-in-the-dark</highlight1>
<highlight2>Flashing lights</highlight2>
</product>
<product productId="3">
<name>Nokia 3100 Pink</name>
<description>Light up the night with a glow-in-the-dark cover - when it's charged with light you can easily find your phone in the dark. When you get a call, the Nokia 3100 phone flashes in tune with your ringing tone. And when you snap on a Nokia Xpress-on™ gaming cover*, you'll get luminescent light effects in time to the gaming action.</description>
<price>139</price>
<image>assets/pic/Nokia_3100_pink.gif</image>
<series>3000</series>
<triband>true</triband>
<camera>false</camera>
<video>false</video>
<highlight1>Glow-in-the-dark</highlight1>
<highlight2>Flashing lights</highlight2>
</product>
<product productId="4">
<name>Nokia 3120</name>
<description>Designed for both business and pleasure, the elegant Nokia 3120 phone offers a pleasing mix of features. Enclosed within its chic, compact body, you will discover the benefits of tri-band compatibility, a color screen, MMS, XHTML browsing, cheerful screensavers, and much more.</description>
<price>159.99</price>
<image>assets/pic/Nokia_3120.gif</image>
<series>3000</series>
<triband>true</triband>
<camera>false</camera>
<video>false</video>
<highlight1>Multimedia messaging</highlight1>
<highlight2>Animated screensavers</highlight2>
</product>
<product productId="5">
<name>Nokia 3220</name>
<description>The Nokia 3220 phone is a fresh new cut on some familiar ideas - animate your MMS messages with cute characters, see the music with lights that flash in time with your ringing tone, download wallpapers and screensavers with matching color schemes for the interface.</description>
<price>159.99</price>
<image>assets/pic/Nokia_3220.gif</image>
<series>3000</series>
<triband>false</triband>
<camera>true</camera>
<video>false</video>
<highlight1>MIDI tones</highlight1>
<highlight2>Cut-out covers</highlight2>
</product>
</catalog>
</mx:XML>
</mx:Application>
分享到:
Global site tag (gtag.js) - Google Analytics
相关推荐
然后,我们可以遍历这些XML元素,并根据它们的属性动态创建DataGrid列。DataGrid的Columns集合允许我们添加DataGridTextColumn、DataGridCheckBoxColumn等不同类型的列。下面的代码片段展示了如何根据XML配置创建...
在这个特定的例子中,"基于Silverlight实现动态生成DataGrid模板列源码例子"是一个教程或项目,旨在教授如何在Silverlight应用中动态创建DataGrid的模板列。DataGrid是WPF和Silverlight中常用的数据展示控件,它允许...
在传统的使用方式中,DataGrid的列是预先硬编码定义的,但在某些场景下,我们需要根据数据源的属性动态创建这些列,以达到更灵活的界面设计。 首先,理解数据绑定在WPF中的核心地位至关重要。数据绑定使得UI(用户...
动态DataGrid是编程领域中一...通过解析XML并动态创建DataGrid列,我们可以创建适应性强、响应迅速的用户界面,满足各种数据展示需求。理解这个过程并熟练掌握相关技术,对于提升Web应用的用户体验和开发效率至关重要。
在C#中动态创建列: ```csharp var dataGrid = new DataGrid(); foreach (var property in typeof(Item).GetProperties()) { var column = new DataGridTextColumn(); column.Header = property.Name; column....
默认情况下,DataGrid会根据绑定的数据源自动创建列。若要自定义列标题,可以在AutoGeneratingColumn事件中处理: ```csharp private void DataGrid_AutoGeneratingColumn(object sender, ...
1. **创建ViewModel**:首先,你需要创建一个ViewModel类,该类将包含DataGrid的数据源和动态列的定义。这些列的定义通常以ObservableCollection类型存储,例如`ObservableCollection<DataGridColumn>`。 2. **定义...
本教程主要聚焦于如何在Flex中动态创建DataGrid,并向其中添加图片,这在创建交互式、富媒体应用时非常有用。通过以下两种方法,你可以实现这个功能。 ### 方法一:使用ItemRenderer 1. **定义ItemRenderer**: ...
为了演示动态管理DataGrid列,我们可以创建一个名为DynamicDataGrid的ASP.NET项目。项目中包含一个DataGrid控件、一个DropDownList控件(用于选择要显示的列)和两个Button控件(一个用于隐藏列,另一个用于显示列)...
// 动态创建DataGrid列 foreach (var property in properties) { DataGridTextColumn column = new DataGridTextColumn(); column.Header = property.Name; // 设置列头为属性名 column.Binding = new Binding...
2. **jQuery监听事件**:可以使用jQuery的resize事件监听窗口大小的变化,然后动态调整datagrid的列宽。 3. **EasyUI内置方法**:EasyUI提供了`resize`方法,可以用于调整datagrid的大小。当窗口大小变化时,调用这...
本话题将探讨如何在MVVM架构下,将ComBox控件集成到DataGrid列中,并实现其与数据模型的双向绑定,以实现在选择ComBox项后,数据能够即时更新到绑定的实体中。 首先,我们需要理解DataGrid的基本用法。DataGrid是...
1. **创建DataGrid** 在XAML中,我们可以简单地创建一个空的DataGrid: ```xml <DataGrid x:Name="dynamicGrid" AutoGenerateColumns="False"/> ``` 2. **动态添加列** 要动态添加列,我们需要使用...
掌握这些技术,你就能在WPF应用程序中创建出既美观又功能丰富的数据展示界面,根据业务逻辑动态调整DataGrid的单元格颜色,提升用户体验。在实际项目中,可以根据具体需求进行扩展,例如添加更多的DataTriggers,...
本文将深入探讨如何在运行时(即动态)为`DataGrid`添加模板列,以及如何利用`ITemplate`接口绑定字段名称。 模板列在`DataGrid`中扮演着至关重要的角色,因为它们提供了自定义列布局和内容的能力。模板列可以包含...
要实现动态合并,我们需要扩展DataGrid的默认列类型。创建一个新的类,如`MergeableDataGridColumn`,继承自`DataGridBoundColumn`或`DataGridTemplateColumn`。在这个自定义列中,我们将处理表头的合并逻辑,通过...
在这个特定的情况下,"可删除列"功能意味着用户在界面上可以动态地选择移除数据网格中的某一列,这为用户提供了更高的自定义性和灵活性。 在IT行业中,实现这样的功能可能涉及到以下知识点: 1. **前端技术**:在...
在Flex4中,`DataGrid`的列可以通过动态创建来适应变化的数据结构,这在处理不确定列数或列类型的应用场景中非常有用。 在描述中提到,数据可能是数组类型,列名和列个数都是动态的。这意味着在运行时,我们需要...
当我们需要根据数据的某些条件动态改变`DataGrid`中单元格的背景颜色时,就需要对控件进行一些定制化操作。以下将详细讲解如何实现这个功能。 首先,我们需要理解`DataGrid`的基本结构。`DataGrid`的每一行由多个`...
3. **设置列数据**:通过遍历数据源,动态创建并添加DataGridColumn到DataGrid: ```actionscript for each (var column:Object in columns) { var dataGridColumn:DataGridColumn = new DataGridColumn(); ...