`
feiyingwang
  • 浏览: 3858 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
社区版块
存档分类
最新评论

flex DataGrid设置dataProvider

    博客分类:
  • flex
阅读更多
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
分享到:
评论

相关推荐

    flex datagrid 前台 分页

    在获取数据后,你可以使用DataGrid的`dataProvider`属性来绑定数据集合,同时配置分页参数,例如每页显示的记录数。 Flex DataGrid支持自定义数据提供者,你可以创建一个类来实现IList接口,这个类应该包含分页逻辑...

    flex DataGrid 表头分组

    2. **定义数据提供者**:在DataGrid组件中,使用`dataProvider`属性指定数据源。当数据源是支持分组的ArrayCollection或HierarchicalData时,DataGrid会自动识别并显示分组。 3. **配置`AdvancedDataGrid`组件**:...

    flex DataGrid xml 动态数据列表实例

    dataGrid.dataProvider = dataProvider; ``` 5. **定义列**:`DataGrid`需要知道如何显示数据,所以我们需要为每个列定义`GridColumn`对象。这些列的`dataField`属性应与XML节点相对应: ```actionscript var name...

    Flex DataGrid 改变某一行的背景颜色

    var row:Object = dataGrid.dataProvider.getItemAt(index); row.styleName = "myCustomRow"; dataGrid.dataProvider.refresh(); ``` 3. 事件监听 另一个方法是监听DataGrid的`itemRendered`事件,当某一行渲染完成...

    Flex datagrid 自动设置列宽

    for each (var item:Object in dataGrid.dataProvider) { var cellWidth:Number = measureCellWidth(col, item); if (cellWidth &gt; maxWidth) { maxWidth = cellWidth; } } col.width = maxWidth; } } ...

    Flex DataGrid从XML文件中加载数据

    它的 `dataProvider` 属性设置为 `users.children()`,这意味着 `DataGrid` 的每一行都将对应 `users` XML 中的一个 `user` 节点。 ```xml &lt;mx:DataGrid id="datagrid" dataProvider="{users.children()}" ...&gt; ```...

    Flex DataGrid CheckBox 一个简单的全选

    可以通过数据提供器(dataProvider)中的数据项属性来设置。例如,如果数据项有一个名为"isSelected"的字段,我们可以在初始化时将该字段设置为true或false,以控制CheckBox的默认选中或未选中状态。 三、设置...

    Flex动态创建DataGrid设置图片

    &lt;mx:DataGrid id="dg" dataProvider="{dataProvider}" cellFactory="{new ImageCellFactory()}"&gt; &lt;mx:GridColumn dataField="name"/&gt; 图片" itemRenderer="{CustomItemRenderer}"/&gt; &lt;/mx:DataGrid&gt; ``` 在...

    FLEX datagrid应用实例

    4. 数据源绑定:将数据源(如ArrayCollection)与DataGrid的dataProvider属性绑定。 5. 添加到舞台上:确保将DataGrid添加到父容器中,以便在应用中可见。 三、DataGrid的实例应用 在“FLEX datagrid应用实例”中,...

    flex datagrid按数字顺序,字母顺序排序

    var dataProvider:ArrayCollection = dataGrid.dataProvider as ArrayCollection; if (column.dataField == "numericField") { dataProvider.sort = new Sort(); dataProvider.sort.fields = [new SortField...

    Flex Datagrid全选功能

    var dataProvider:ICollectionView = grid.dataProvider as ICollectionView; for each (var item:Object in dataProvider) { item.selected = checkbox.selected; } } ``` - **SelectionModel**: Flex的...

    flexDataGrid导入Excle案例

    在导入Excel数据后,开发者需要将数据集合设置为DataGrid的dataProvider,从而在界面上显示。 4. **数据绑定**:FlexDataGrid的强大之处在于其数据绑定能力,允许开发者将数据模型直接绑定到组件,这样当数据改变时...

    flex datagrid分页 动态绑定数据源

    2. 设置数据源:将ArrayCollection赋值给Datagrid的dataProvider属性。 3. 监听数据源变化:可以使用ArrayCollection的事件(如collectionChange)监听数据的添加、删除或修改。 4. 实现分页:根据需要设置Datagrid...

    Flex创建可编辑以及分页的DataGrid

    然后,添加`PagingControl`到界面,并设置其`dataProvider`为`PageableCollection`: ```xml &lt;mx:PagingControl id="pagingCtrl" dataProvider="{pageableCollection}" /&gt; ``` 最后,我们需要监听`PagingControl`...

    flex下拉dataGrid

    我们可以通过设置它的dataProvider来填充下拉选项,这些选项通常是从数据服务获取的数组集合。在用户点击下拉按钮时,ComboBox会显示数据Grid,展示所有可用的选择。 接下来,我们需要集成DataGrid。DataGrid控件...

    flex DataGrid 固定列的位置

    为了实现“不论怎么拖动列的位置都不会变”的效果,我们需要深入了解一下DataGrid的列定义(GridColumn)和数据提供者(DataProvider)。 首先,我们要创建一个自定义的DataGrid类,继承自原始的mx.controls....

    flex DataGrid翻页

    你可以通过设置`dataProvider`属性来指定数据提供者。 ```actionscript var dataProvider:PagedCollectionView = new PagedCollectionView(); dataProvider.source = myLargeDataSet; grid.dataProvider = data...

    flex组件之DataGrid高级用法实例源码

    通过设置dataProvider属性,我们可以将XML、Object、甚至其他复杂数据结构绑定到DataGrid。 3. **排序功能** DataGrid提供了内置的排序功能。通过设置columns数组中的sortCompareFunction属性,我们可以实现自定义...

    flex datagrid中实现显示序列号

    你可以通过监听`dataGrid.dataProvider`的`collectionChange`事件,获取当前项的索引,然后将索引传递给`itemRenderer`。这样,`itemRenderer`就能显示正确的序列号。 ```actionscript myDataGrid.dataProvider....

Global site tag (gtag.js) - Google Analytics