flex 里面,DataGrid控件是常用的一个控件,显示的列很多时,<DataGridColumns />就会写很多。为了缩小源文件大小,减少不必要的<DataGridColumns/>,封装了一下DataProvider的设置过程;
主要是把以下的设置过程统一处理了一下;
<DataGrid id="dg">
<columns>
<DataGridColumns .../>
<DataGridColumns .../>
....
<DataGridColumns .../>
</columns>
</DataGrid>
以上代码中,不同的地方 在于dataProvider的不同,所以我根据dataProvider来动态生成<DataGridColumns />;
为此封装了一下<DataGrid />,
public class DataGrid_1 extends DataGrid
{
/**
* 默认显示的DataGridColumns的列名数组
* 根据columnsFiledArray 动态生成 <DataGridColumn />
*/
public var columnsFieldArray:Array =null;
protected override function updateDisplayList(w:Number, h:Number):void
{
var b:Boolean = false;
if( rendererChanged ) b = true;
super.updateDisplayList(w, h);
if( b ) {
while( rowInfo.length > listItems.length ) rowInfo.pop();
}
if(counter<1){//只设置一次就可以了
DataGridUtils.sortByFields(this);
counter ++;
}
if(columns && columns.length<1){
DataGridUtils.initColumns(this,columnsFieldArray);
}
}
}
增加一个属性columnsFieldArray 代表DataGridColumns 的dataField数组,
以上mxml代码简化为
<DataGrid_1 id="dg" columnsFieldArray="{fields}" />
达到同样效果;
DataGridUtils
封装了对columns的处理,
包括dataField,labelField的设置,
按列的数据类型排序(字符排序,数值排序,日期排序)当然还可根据业务需要扩充完善,
设置列的显示与否,行上添加CheckBox的ItmeRender等;
主要用到了 datagrid的 columns数组,DataGridColumns等基本的类;
数据源 为 XMLListCollection或ArrayCollection等;
附件为 一个简单的例子,欢迎大家 给出修改意见.
- src.rar (7.3 KB)
- 描述: 动态填充DataGrid示例
- 下载次数: 30
分享到:
相关推荐
在获取数据后,你可以使用DataGrid的`dataProvider`属性来绑定数据集合,同时配置分页参数,例如每页显示的记录数。 Flex DataGrid支持自定义数据提供者,你可以创建一个类来实现IList接口,这个类应该包含分页逻辑...
2. **定义数据提供者**:在DataGrid组件中,使用`dataProvider`属性指定数据源。当数据源是支持分组的ArrayCollection或HierarchicalData时,DataGrid会自动识别并显示分组。 3. **配置`AdvancedDataGrid`组件**:...
dataGrid.dataProvider = dataProvider; ``` 5. **定义列**:`DataGrid`需要知道如何显示数据,所以我们需要为每个列定义`GridColumn`对象。这些列的`dataField`属性应与XML节点相对应: ```actionscript var name...
var row:Object = dataGrid.dataProvider.getItemAt(index); row.styleName = "myCustomRow"; dataGrid.dataProvider.refresh(); ``` 3. 事件监听 另一个方法是监听DataGrid的`itemRendered`事件,当某一行渲染完成...
for each (var item:Object in dataGrid.dataProvider) { var cellWidth:Number = measureCellWidth(col, item); if (cellWidth > maxWidth) { maxWidth = cellWidth; } } col.width = maxWidth; } } ...
它的 `dataProvider` 属性设置为 `users.children()`,这意味着 `DataGrid` 的每一行都将对应 `users` XML 中的一个 `user` 节点。 ```xml <mx:DataGrid id="datagrid" dataProvider="{users.children()}" ...> ```...
可以通过数据提供器(dataProvider)中的数据项属性来设置。例如,如果数据项有一个名为"isSelected"的字段,我们可以在初始化时将该字段设置为true或false,以控制CheckBox的默认选中或未选中状态。 三、设置...
<mx:DataGrid id="dg" dataProvider="{dataProvider}" cellFactory="{new ImageCellFactory()}"> <mx:GridColumn dataField="name"/> 图片" itemRenderer="{CustomItemRenderer}"/> </mx:DataGrid> ``` 在...
4. 数据源绑定:将数据源(如ArrayCollection)与DataGrid的dataProvider属性绑定。 5. 添加到舞台上:确保将DataGrid添加到父容器中,以便在应用中可见。 三、DataGrid的实例应用 在“FLEX datagrid应用实例”中,...
var dataProvider:ArrayCollection = dataGrid.dataProvider as ArrayCollection; if (column.dataField == "numericField") { dataProvider.sort = new Sort(); dataProvider.sort.fields = [new SortField...
var dataProvider:ICollectionView = grid.dataProvider as ICollectionView; for each (var item:Object in dataProvider) { item.selected = checkbox.selected; } } ``` - **SelectionModel**: Flex的...
在导入Excel数据后,开发者需要将数据集合设置为DataGrid的dataProvider,从而在界面上显示。 4. **数据绑定**:FlexDataGrid的强大之处在于其数据绑定能力,允许开发者将数据模型直接绑定到组件,这样当数据改变时...
2. 设置数据源:将ArrayCollection赋值给Datagrid的dataProvider属性。 3. 监听数据源变化:可以使用ArrayCollection的事件(如collectionChange)监听数据的添加、删除或修改。 4. 实现分页:根据需要设置Datagrid...
然后,添加`PagingControl`到界面,并设置其`dataProvider`为`PageableCollection`: ```xml <mx:PagingControl id="pagingCtrl" dataProvider="{pageableCollection}" /> ``` 最后,我们需要监听`PagingControl`...
我们可以通过设置它的dataProvider来填充下拉选项,这些选项通常是从数据服务获取的数组集合。在用户点击下拉按钮时,ComboBox会显示数据Grid,展示所有可用的选择。 接下来,我们需要集成DataGrid。DataGrid控件...
为了实现“不论怎么拖动列的位置都不会变”的效果,我们需要深入了解一下DataGrid的列定义(GridColumn)和数据提供者(DataProvider)。 首先,我们要创建一个自定义的DataGrid类,继承自原始的mx.controls....
你可以通过设置`dataProvider`属性来指定数据提供者。 ```actionscript var dataProvider:PagedCollectionView = new PagedCollectionView(); dataProvider.source = myLargeDataSet; grid.dataProvider = data...
通过设置dataProvider属性,我们可以将XML、Object、甚至其他复杂数据结构绑定到DataGrid。 3. **排序功能** DataGrid提供了内置的排序功能。通过设置columns数组中的sortCompareFunction属性,我们可以实现自定义...
你可以通过监听`dataGrid.dataProvider`的`collectionChange`事件,获取当前项的索引,然后将索引传递给`itemRenderer`。这样,`itemRenderer`就能显示正确的序列号。 ```actionscript myDataGrid.dataProvider....