- 浏览: 542198 次
- 性别:
文章分类
- 全部博客 (337)
- WEB前端@HTML (4)
- WEB前端@CSS (5)
- WEB前端@javascript (31)
- WEB前端@DHTML (8)
- WEB前端@jQuery (3)
- WEB前端@Flex4 (19)
- WEB前端@BootStrap3 (21)
- 数据交换@JSON (1)
- 模板标签@JSTL (1)
- 模板标签@Thymeleaf (1)
- 模板标签@XSL-FO (3)
- WEB后台@JavaSE (75)
- WEB后台@JAX-WS (27)
- WEB后台@HttpClient (0)
- WEB后台@SSO (2)
- 框架@Spring3 (3)
- 框架@spring_MVC (8)
- 框架@Hibernate (26)
- 框架@play framework (18)
- 框架@sl4j (4)
- 数据库@ (2)
- 数据库@JDBC (0)
- 服务器@Linux (14)
- 服务器@Tomcat (2)
- 第三方jar@dom4j (1)
- 第三方jar@POI (2)
- 第三方jar@CXF (5)
- 项目管理@Maven (22)
- 项目管理@SVN (1)
- 缓存管理@ehcache (1)
- 系统设计@设计模式 (10)
- 单元测试@JunitTest (1)
- 开发工具 (3)
- BUG收录 (1)
- 学习之路 (6)
- 面试之道 (1)
- 我的项目 (2)
最新评论
-
superich2008:
logback配置文件的改动会导致应用重新加载,多改动几次后就 ...
Chapter 3: Logback configuration -
chenzhihui:
不是可以在log4j中配置以控制台或者文件方式保存日志的?
play记录日志 -
smilease:
很棒,正缺这个,非常感谢
bootstrap3-typeahead 自动补全 -
guangling13345:
[size=x-small][/size]
二级联动菜单 -
jacksondesign:
有,和YAML的格式有关,不知道有没有什么好的YAML格式的验 ...
(四)play之yabe项目【页面】
1.使用DataGrid组件展现数据(表格),以交互方式操作其中的行和列
2.自定义项目呈现器,在DataGrid的某列重载默认行为(默认显示文本,修改为显示图片)
3.在列中以自定义方式进行排序
4.AdvancedDataGrid的功能:排序、修改样式、分组和摘要数据
Flex4中,组合使用Spark和MX空间能够实现任何想要的功能
例如Form、DataGrid和AdvancedDataGrid在Spark中没有提供,那么就使用MX版
MX与Spark能够很好的集成,共同为开发提供组件支持
DataGrid 数据网格,按行和列呈现一个表格
DataGridColumn 定义某一列
dataField 将数据集中的列定位到DataGrid中的特定列
为DataGridColumn添加内联的编辑控件
当焦点位于单元格时,只要将editable属性设为true即可
默认的编辑控件是文本域
通过itemEditor和editorDataField属性,可以指定编辑数据时所使用的编辑器
下面是可以指定的内置控件:
Button、CheckBox、ComboBox、DateField、Image、Label、NumericStepper、Text(默认)、TextArea、TextInput
创建MXML的项目呈现器以显示商品的图片和名称
通过<s:MXItemRenderer>为DataGrid创建项目呈现器
创建内联的MXML项目呈现器用于显示Remove按钮
创建项目呈现器的另一方式是使用<mx:itemRenderer>标签
该标签允许在DataGridColumn中以内联的方式声明并创建项目呈现器
在<mx:cellRenderer>标签中,放置一个<fx:Component>标签,这样标签内部将拥有自己的区域
可以在其中进行导入,函数定义等。
注意:内联项目呈现器仅特定用一个DataGrid,无法在其它DataGrid中重用!
--------------------------------------------------------------------
1.使用DataGrid列出购物车中所有的商品
ShoppingView.mxml
2.DataGrid中的列单元格使用项目呈现器,单元格内显示图片和商品名称
自定义项目呈现器ProductName.mxml
3.单元格中加入remove的button
DataGrid中通过内联引入项目呈现器,将一个button放到单元格中
实现购物车中商品的移除
移除商品的时候使用到了自定义的ProductEvent事件
在ShoppingView中对事件进行监听并处理
CartGrid.mxml
2.自定义项目呈现器,在DataGrid的某列重载默认行为(默认显示文本,修改为显示图片)
3.在列中以自定义方式进行排序
4.AdvancedDataGrid的功能:排序、修改样式、分组和摘要数据
Flex4中,组合使用Spark和MX空间能够实现任何想要的功能
例如Form、DataGrid和AdvancedDataGrid在Spark中没有提供,那么就使用MX版
MX与Spark能够很好的集成,共同为开发提供组件支持
DataGrid 数据网格,按行和列呈现一个表格
DataGridColumn 定义某一列
dataField 将数据集中的列定位到DataGrid中的特定列
为DataGridColumn添加内联的编辑控件
当焦点位于单元格时,只要将editable属性设为true即可
默认的编辑控件是文本域
通过itemEditor和editorDataField属性,可以指定编辑数据时所使用的编辑器
下面是可以指定的内置控件:
Button、CheckBox、ComboBox、DateField、Image、Label、NumericStepper、Text(默认)、TextArea、TextInput
创建MXML的项目呈现器以显示商品的图片和名称
通过<s:MXItemRenderer>为DataGrid创建项目呈现器
创建内联的MXML项目呈现器用于显示Remove按钮
创建项目呈现器的另一方式是使用<mx:itemRenderer>标签
该标签允许在DataGridColumn中以内联的方式声明并创建项目呈现器
在<mx:cellRenderer>标签中,放置一个<fx:Component>标签,这样标签内部将拥有自己的区域
可以在其中进行导入,函数定义等。
注意:内联项目呈现器仅特定用一个DataGrid,无法在其它DataGrid中重用!
--------------------------------------------------------------------
1.使用DataGrid列出购物车中所有的商品
ShoppingView.mxml
<?xml version="1.0" encoding="utf-8"?> <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="0" height="0" xmlns:components="components.*"> <s:layout> <s:HorizontalLayout/> </s:layout> <s:states> <s:State name="State1"/> <s:State name="cartView"/> </s:states> <fx:Script> <![CDATA[ import cart.ShoppingCart; import cart.ShoppingCartItem; import components.ProductItem; import events.ProductEvent; import mx.collections.ArrayCollection; import valueObjects.Product; [Bindable] public var shoppingCart:ShoppingCart = new ShoppingCart();//创建一个购物车,每种商品都使用同一个购物车! [Bindable] public var groceryInventory:ArrayCollection;//用于存放HTTPService返回的各种商品信息 //查看当前购物车中的商品 private function handleViewCartClick( event:MouseEvent ):void { this.currentState="cartView"; } //该方法返回一个字符串,用来作为数据集的呈现方式,由labelFunction函数指定 //当List中使用labelFunction时,会自动以正确的方式从dataProvider中获取数据并传递到该方法中 //返回的字符串将作为被呈现的内容 private function renderProductName(item:ShoppingCartItem):String { var product:Product = item.product; return "("+item.quantity+")" + product.prodName + " $" + item.subtotal; } //对ProductItem派发的addProduct事件进行监听并处理 public function addProductHandler(event:ProductEvent):void { var sci:ShoppingCartItem = new ShoppingCartItem(event.product);//从自定义事件中获取属性 shoppingCart.addItem(sci); } //对ProductItem派发的removeProduct事件进行监听并处理 public function removeProductHandler(event:ProductEvent):void { var sci:ShoppingCartItem = new ShoppingCartItem(event.product);//从自定义事件中获取属性 shoppingCart.removeItem(sci); } ]]> </fx:Script> <fx:Declarations> <!-- 将非可视元素(例如服务、值对象)放在此处 --> </fx:Declarations> <!-- 该DataGroup被下面的ProductList取代 通过事件冒泡实现商品的添加与删除 因为原来在ProductItem中直接对购物车添加或删除商品的操作无法进行 原因是无法对每个ProductItem都传入同一个购物车 [虽然this.parent.parent.shoppingCart可以访问到购物车,但是依赖性太强,不推荐] <s:DataGroup width="100%" height="100%" width.cartView="0" height.cartView="0" visible.cartView="false" dataProvider="{groceryInventory}" itemRenderer="components.ProductItem"> <s:layout> <s:VerticalLayout/> </s:layout> </s:DataGroup> --> <!-- 使用具有事件监听出派发功能的组件替代原来的DataGroup--> <!-- 实现添加/删除商品的步骤: ProductList作为一个组件,通过dataProvider获取到数据 在ProductList中又指名了itemRenderer为ProductItem 这样,ProductItem中的product属性就可以被赋予值 当添加商品的时候,会触发addProduct事件,而且事件可以冒泡 在ProductList中对该事件进行了声明,则可以对该事件继续向上冒泡 这样,在ShoppingView中就可以对这个事件进行捕获并处理!!! 然后,在ProductList组件中就可以指定事件发生后的处理函数了!!! --> <components:ProductList width="100%" height="100%" width.cartView="0" height.cartView="0" visible.cartView="false" dataProvider="{groceryInventory}" addProduct="addProductHandler(event)" removeProduct="removeProductHandler(event)"/> <!-- 购物车组件 --> <s:VGroup id="cartGroup" height="100%" width.cartView="100%"> <s:List id="cartList" dataProvider="{shoppingCart.items}" includeIn="State1" labelFunction="renderProductName"/> <s:Label text="Your Cart Total: ${shoppingCart.total}"/> <s:Button label="View Cart" click="handleViewCartClick( event )" includeIn="State1"/> <!-- 使用自定义的DataGrid呈现购物车的详细信息--> <components:CartGrid id="dgCart" includeIn="cartView" width="100%" height="100%" dataProvider="{shoppingCart.items}" removeProduct="removeProductHandler(event)"/> <s:Button includeIn="cartView" label="Continue Shopping" click="this.currentState=''"/> </s:VGroup> </s:Group>
2.DataGrid中的列单元格使用项目呈现器,单元格内显示图片和商品名称
自定义项目呈现器ProductName.mxml
<?xml version="1.0" encoding="utf-8"?> <!--定义DataGrid中特定单元格的布局 这里将在单元格中显示商品的图片和名称,而不只是字符串--> <s:MXItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" clipAndEnableScrolling="true"> <!-- 防止项目呈现器中的内容不超过其边界--> <s:layout> <s:HorizontalLayout/> </s:layout> <fx:Script> <![CDATA[ import valueObjects.Product; ]]> </fx:Script> <!-- data代表该行本身的数据, 所以可以通过data获取到product--> <s:Image source="assets/{(data.product as Product).imageName}" width="100%"/> <s:Label text="{(data.product as Product).prodName}" width="100%" height="100%"/> </s:MXItemRenderer>
3.单元格中加入remove的button
DataGrid中通过内联引入项目呈现器,将一个button放到单元格中
实现购物车中商品的移除
移除商品的时候使用到了自定义的ProductEvent事件
在ShoppingView中对事件进行监听并处理
CartGrid.mxml
<?xml version="1.0" encoding="utf-8"?> <mx:DataGrid xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" editable="true" variableRowHeight="true"> <!-- 全局设置为可编辑,flex会根据缩略图自动调整DataGrid的行高--> <fx:Declarations> <!-- 将非可视元素(例如服务、值对象)放在此处 --> </fx:Declarations> <fx:Metadata> [Event(name="removeProduct", type="events.ProductEvent")] </fx:Metadata> <fx:Script> <![CDATA[ import cart.ShoppingCartItem; private function renderPriceLabel(item:ShoppingCartItem,column:DataGridColumn):String { var subtotal:Number = item[column.dataField];//通过列名从item中获取数据 return "$"+String(subtotal); } ]]> </fx:Script> <mx:columns> <mx:DataGridColumn headerText="Product" dataField="product" editable="false" itemRenderer="components.ProductName"/> <!-- 不可编辑,并且使用自定义项目呈现器来进行数据呈现--> <!--itemEditor指定编辑数据时使用的编辑器 editorDataField指定了对应的属性--> <mx:DataGridColumn headerText="Quantity" dataField="quantity" itemEditor="mx.controls.NumericStepper" editorDataField="value"/> <mx:DataGridColumn headerText="Amount" dataField="subtotal" editable="false" labelFunction="renderPriceLabel"/> <!-- 不可编辑,通过labelFunction指定了一个函数来对呈现的数据进行操作--> <mx:DataGridColumn editable="false"> <!-- 创建内联项目呈现器--> <mx:itemRenderer> <fx:Component> <s:MXItemRenderer> <s:layout> <s:VerticalLayout horizontalAlign="center"/> </s:layout> <fx:Script> <![CDATA[ import cart.ShoppingCartItem; import events.ProductEvent; private function removeItem(item:ShoppingCartItem):void { var prodEvent:ProductEvent = new ProductEvent("removeProduct",item.product); dispatchEvent(prodEvent); } ]]> </fx:Script> <s:Button label="Remove" click="removeItem(data as ShoppingCartItem)"/> </s:MXItemRenderer> </fx:Component> </mx:itemRenderer> </mx:DataGridColumn> <!-- 不可编辑--> </mx:columns> </mx:DataGrid>
发表评论
-
(十七)为Flex定制皮肤
2013-01-03 16:46 1230皮肤与组件的关系 使用状态和皮肤 创建Button皮肤 为应用 ... -
(十六)使用样式定制Flex应用
2013-01-03 11:47 1535为Flex应用程序添加样式: 通过标签属性设置样式 可 ... -
(十二)AdvancedDataGrid
2013-01-02 14:37 1533AdvancedDataGrid扩展了普通的DataGrid, ... -
(十)自定义事件并利用事件对象传递数据以及集合元素变化能派发的事件
2013-01-02 00:14 1241创建和分派事件 1.使用事件可以降低程序的耦合度 2.子类自定 ... -
(九)对List和DataGroup使用itemRenderer
2013-01-01 21:47 5288数据集 包含一组数据元素的对象就叫做数据集Data ... -
(八)自定义组件
2012-12-30 23:35 10091.组件的作用及其对开发的好处 2.Flex类的层次 3.可见 ... -
(七)数据绑定和集合
2012-12-30 17:53 892数据绑定和集合 1.数据绑定的原理 2.ArrayCollec ... -
(六)创建ActionScript类---值对象
2012-12-30 15:31 924创建ActionScript类--值对象DTO/VO--数据模 ... -
(五)Flex4_使用远程数据
2012-12-30 11:44 1024使用远程XML数据 1.数据 ... -
(四)Flex4_事件
2012-12-29 23:57 852事件编程模型,构建松散耦合的应用程序 设置事件,向事件 ... -
(三)Flex4_Image控件,数据绑定
2012-12-29 23:03 1071数据绑定 1.给需要数据绑定的对象设置id,以便在程序中 ... -
(十八)Flex4_自定义ActionScript组件
2012-12-28 17:11 1034Spark组件是按复合(composi ... -
(十五)Flex4_格式化与校验器
2012-12-28 14:56 1313Flex提供了数据格式化功能,可以对数据进行格式化。通过内置的 ... -
(十四)Flex4_导航
2012-12-28 09:46 971Flex中实现导航有两种方式可以实现 1.使用状态,在不同事件 ... -
(二)Flex4 容器与布局
2012-12-27 23:03 1519MXML文件 1.文件头 2.命名空间 3.历史版本的恢复 4 ... -
(一)Flex4 第一篇 RIA到底是什么
2012-12-27 22:57 946待续... -
(十三)Flex4_实现拖放功能
2012-12-27 20:30 2149增强型拖放组件: List ... -
本地Host文件的修改
2012-12-23 09:40 998Flash builder 4.6 序列号: 1424-49 ...
相关推荐
在DataGrid控件中设置单元格的数据显示格式.
wpf datagrid 单元格颜色 根据条件改变颜色换 根据表datatable动态显示datagrid内容
WPF中的DataGrid合并单元格,模板列内嵌套DataGrid,非真正合并
WPF Datagrid 合并单元格 复杂表头 支持位置拖动、 列宽度拖动,组内列会按比例自动调整 ;
wpf 动态合并datagrid表头单元格
使DataGrid的指定行或指定列或指定值为不同条件时以指定的颜色显示突出。 文件名称:DateGridColorSet.dll 制作日期:2005/11/05 开发人员:王波 参考资料:Syncfusion & CSDN 所属项目:JDS ERP 功能介绍:使...
wpf datagrid 单元格颜色 根据条件改变颜色
该代码示例实现了在wpf中,单击DataGrid单元格进入编辑状态(DataGridCheckBoxColumn 单击切换选中状态)的功能。
wpf中datagrid动态设置单元格背景颜色。
主要介绍了C#实现改变DataGrid某一行和单元格颜色的方法,主要涉及DataGrid控件的添加与使用、数据源的绑定、单元格与行的获取等操作。需要的朋友可以参考下
只需重新实现DataGrid头模板和单元格模板 并非真正合并
easyui datagrid editor回车切换单元格示例,适合熟悉easyui但又不懂如何做的人员,可能参考一下源码JS。
DataGrid表头合并和单元格内容合并-升级版
datagrid指定"列数"进行合并,当创建报表表格的时候,有合并需求并使用datagrid进行合并列的时候总是无从下手,此资源可以让你按照特定列,想让那列合并就可以让那列进行合并。也可以只根据某列进行合并,非常好用
datagrid合并单元格
vb 用datagrid和adodc 关联显示数据库内容
在WPF的 DataGrid控件中显示图片的小例子
Jquery datagrid实现单元格编辑
datagrid代码改变单元格宽度 datagrid代码改变单元格宽度 datagrid代码改变单元格宽度
DataGrid的单元格背景和文字颜色 DataGrid的单元格背景和文字颜色 DataGrid的单元格背景和文字颜色