比如我们有个如下的VO
[Bindable]
public class Product
{
public function Product(name:String,price:Number)
{
this.name=name;
this.price=price;
}
public var name:String;
public var price:Number;
}
在下面的文件中,分别用一个mx的datagrid和一个spark的datagrid来显示这个vo的集合
<?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"
minWidth="955" minHeight="600" >
<s:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Script>
<![CDATA[
import com.crap.vo.Product;
import mx.collections.ArrayCollection;
[Bindable]
public var productAC:ArrayCollection=new ArrayCollection(
[new Product("product1",43),
new Product("product2",35),
new Product("product3",108)]);
private function change():void{
var p:Product =productAC.getItemAt(1) as Product;
p.price=855;
}
]]>
</fx:Script>
<s:Button label="button" click="change();"/>
<mx:DataGrid dataProvider="{productAC}" id="mxDG">
</mx:DataGrid>
<s:DataGrid dataProvider="{productAC}" id="sparkDG">
</s:DataGrid>
</s:Application>
发现点击了button以后,两个组件都更新了,这是因为两个组件的dataprovider是ArrayCollection,
而且每个item还是[Bindable],这样属性的改变会通知view,让view刷新
改成下面这样,就发现无论如何都不能更新了,因为普通object不是Bindable的
[Bindable]
public var productAC:ArrayCollection=new ArrayCollection(
[{name:"product1",price:43},
{name:"product2",price:35},
{name:"product3",price:108}
]);
private function change():void{
var p:Object =productAC.getItemAt(1) as Object;
p.price=855;
}
为了通知datagrid更新view,mx的datagrid的常用方法是invalidateList方法.
到了spark的datagrid,发现没有invalidateList方法了,这时可以在dataprovider上调用refresh方法
private function change():void{
var p:Object =productAC.getItemAt(1) as Object;
p.price=855;
mxDG.invalidateList();
productAC.refresh();
}
分享到:
相关推荐
本示例"flex-datagrid-advancedDataGrid-demo"显然是为了演示如何在Flex应用中有效地使用这两种数据网格控件。 首先,DataGrid是最基础的数据展示组件,它允许开发者以表格的形式展示数据,支持排序、选择和编辑等...
`Datagrid-filter`插件正是针对这种需求设计的,它是一个高效且实用的Grid插件,旨在提升数据网格的可操作性和用户交互性。这个插件的核心功能是为每一列提供过滤条件,使得用户能够快速筛选出所需的信息,极大地...
在本例中,我们关注的是一个名为"datagrid-dnd"的特性,这是一项允许用户通过拖放操作来重新排列数据网格行的功能。这个特性增强了用户交互性和数据管理的便利性,尤其适用于那些需要频繁调整数据顺序的场景。 首先...
jeasyui-datagrid-datagrid2.zip jeasyui-datagrid-datagrid2.zip jeasyui-datagrid-datagrid2.zip jeasyui-datagrid-datagrid2.zip jeasyui-datagrid-datagrid2.zip
《JeasyUI DataGrid深度解析与开发指南》 在Web应用开发中,数据展示和交互是核心部分之一,而DataGrid作为数据展示的利器,深受开发者喜爱。JeasyUI DataGrid是一款基于jQuery的轻量级组件,它为开发者提供了丰富...
datagrid-cellediting.js
该文件是用来将easyui-datagrid按照格式导出到excel中,可以将合并的单元格,复杂的表头,背景色及字色等按照显示的样式导出到excel,即所见即所得
在给定的标题"datagrid-groupview.js"中,我们可以看出这是一个针对jQuery EasyUI Datagrid组件的扩展,用于实现表格数据的分组显示功能。现在,我们将深入探讨这个知识点。 首先,jQuery EasyUI的Datagrid组件是一...
datagrid-filter 是一个与数据展示相关的前端组件,常用于表格数据的筛选和过滤。在这个特定的场景中,用户遇到了一个问题:当尝试向datagrid-filter插入数据时,组件会错误地显示两个相同的条目。这个问题可能是...
"easyui-datagrid2-demo.zip" 文件包含了使用 EasyUI Datagrid 的一个示例,帮助开发者了解如何实现数据的加载、分页、排序等基本操作。 在这个 demo 中,我们可以从以下几个方面学习 EasyUI Datagrid 的使用: 1....
这个“datagrid-export.zip”文件提供了一种解决方案,使得开发者能够将EasyUI-datagrid中的数据按照其在界面上的样式,包括合并的单元格、复杂的表头、背景色和文字颜色等,方便地导出到Excel中,实现“所见即所得...
Flex DataGrid是一款在Adobe Flex开发环境中广泛使用的组件,主要用于展示和操作大量结构化的数据。它是一种灵活的表格视图,可以轻松地实现数据的排序、筛选、分页等功能。在这个"Flex-DataGrid源码及资料"的压缩包...
### FLEX教程知识点详解 #### 1. FLEX概述 - **FLEX介绍**:FLEX是一种用于构建跨平台富互联网应用程序(RIA)的技术。它使用了一种名为MXML的标记语言来创建用户界面,并利用ActionScript进行逻辑处理。FLEX能够...
支持datagrid扩展,在一条记录下面可以嵌套一个子datagrid,切记要在页面中引入该js
Flex DataGrid是一款强大的数据展示组件,常用于Adobe Flex或Flash Builder等开发环境中。它能够高效地展示大量数据,并提供丰富的用户交互功能。在本场景中,我们关注的是“前台分页”这一技术。 前台分页是指在...
`datagrid-detailview.js`文件包含了实现这一功能的代码。使用DetailView,可以提高用户体验,让用户无需离开当前页面就能查看和操作详细信息。 2. **BufferView**: BufferView是一种优化大量数据加载的技术。在...
在Flex开发中,Datagrid组件是用于展示数据集的一个强大工具,它允许用户以表格的形式查看和操作数据。本文将深入探讨如何在Flex的Datagrid中实现数据的合计与平均值计算,帮助开发者更好地理解和应用这些功能。 ...