- 浏览: 3011946 次
- 性别:
- 来自: 河南
文章分类
- 全部博客 (340)
- Java综合 (26)
- 程序人生 (53)
- RIA-ExtJS专栏 (18)
- RIA-mxGraph专栏 (4)
- RIA-Flex4专栏 (43)
- 框架-Spring专栏 (16)
- 框架-持久化专栏 (22)
- 框架-Struts2专栏 (11)
- 框架-Struts专栏 (12)
- SQL/NOSQL (12)
- 报表/图表 (2)
- 工作流 (5)
- XML专栏 (4)
- 日常报错解决方案 (5)
- Web前端-综合 (12)
- Web/JSP (14)
- Web前端-ajax专栏 (14)
- Web前端-JQuery专栏 (9)
- IDE技巧 (6)
- FILE/IO (14)
- 远程服务调用 (2)
- SSO单点登录 (2)
- 资源分享 (22)
- 云计算 (1)
- 项目管理 (3)
- php专栏 (1)
- Python专栏 (2)
- Linux (1)
- 缓存系统 (1)
- 队列服务器 (1)
- 网络编程 (0)
- Node.js (1)
最新评论
-
hui1989106a:
我的也不能解压,360和好压都试了,都不行
《Spring in Action》完整中文版分享下载 -
temotemo:
这些example有些过时了,官方建议使用HBase-1.0 ...
Java操作Hbase进行建表、删表以及对数据进行增删改查,条件查询 -
zy8102:
非常感谢~
HeadFirst系列之七:《深入浅出SQL》原版高清PDF电子书分享下载 -
zy8102:
重命名了一下搞定了
HeadFirst系列之七:《深入浅出SQL》原版高清PDF电子书分享下载 -
zy8102:
为什么下载以后老解压不了呢?
HeadFirst系列之七:《深入浅出SQL》原版高清PDF电子书分享下载
有关Flex的DataGrid文章的确不少,都是零零碎碎的,目前还没有发现有个完整的例子供网友参考,这次我花了两天时间做了下Flex关于DataGrid一个指标数据管理系统,当然设计到的mxml会很多,大都是与DataGrid相关,我就抽取最常用的DataGrid的增删改同步数据库及页面数据来讲解
首先整理下思路,首先无论是删除还是修改,必须得获取当前行所在的记录,那么可以设置个全局变量,当DataGrid的itemClick事件出发时将选中的行赋给全局变量
[Bindable]public var acItemsSelected:Object;;
//事件方法
protected function myGrid_itemClickHandler(event:ListEvent):void
{
acItemsSelected = myGrid.selectedItem;
}
这样的话就可以获得了当前选中的对象了
如果删除和修改的话,通常传到后台的肯定含有对象的ID项,那么这个ID是怎么获取的呢,通过acItemsSelected.xxxId能获取,那么这个xxxId必须是在DataGrid中有,设置为不显示就好了,例如我就是这么做的
<mx:DataGridColumn visible="false" dataField="targetCalId" />
这样的话,要更改的数据等都能通过ID传到后台查询相应对象更改删除了,接下来的事是比较重要的,如果光删除数据库是不行的,页面数据也要保持同步,关于dataGrid也没有好的刷新方法,所以你上网一搜,可能有的人会告诉你对于删除这样做:dataArray.removeItemAt(myGrid.selectedIndex);
增加这样做:dataArray.addItemAt(obj,0);
修改这样做:dataArray.setItemAt(obj,myGrid.selectedIndex);
这里说的dataArray是指的是DataGrid的DataProvider的值集合【当然肯定得声明称全局变量】
这样的写法呢可能你觉得,哎,是对的,其实不然,这并没有真正起到作用,对于FLEX来说缓存是相当大的,不行的话你通过这个修改行记录的属性后,再点这行记录的属性编辑页面发现值根本没改,所以所没有进行二次查询数据库了,利用的是缓存。即便是你调用了初始化查询数据库的那个方法,也是不行的,还是有缓存,最好的做法就是,抛弃上面的三种写法,只需要两步就可以实现刷新,第一初始化DataGrid的那个方法请求必须是URLRequest的,添加一个参数类似于
var u:URLVariables=new URLVariables("temp="+Math.random());
当然不一定非要是temp什么名字都行,然后在返回操作成功提示后调用这个初始化方法,你会发现真的起作用了。
其实建议关于URLRequest传参数的最好带上这个参数,也不费事,可以在很多场合下解决缓存不更新问题
说了这么多其实就是先做好个思想准备,理清思路,下面我就贴上我的一段代码
mxml文件
<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow 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="668" height="326"
creationComplete="initComponent()"
title="指标计量单位"
fontSize="15"
close="closeWindow()">
<s:layout>
<s:VerticalLayout />
</s:layout>
<fx:Declarations>
<mx:StringValidator id="sval_1" source="{targetTypeName}" property="text"
tooShortError="字符串太短了,请输入最少4个字符. "
tooLongError="字符串太长了,请输入最长20个字符. "
minLength="4" maxLength="20"
trigger="{myButton}" triggerEvent="click"
/>
<mx:StringValidator id="sval_2" source="{targetCal}" property="text"
tooShortError="字符串太短了,请输入最少4个字符. "
tooLongError="字符串太长了,请输入最长20个字符. "
minLength="4" maxLength="20"
trigger="{myButton}" triggerEvent="click"
/>
</fx:Declarations>
<fx:Script>
<![CDATA[
import com.adobe.serialization.json.JSON;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.events.CloseEvent;
import mx.events.ListEvent;
import mx.managers.PopUpManager;
import mx.rpc.events.ResultEvent;
import mx.utils.URLUtil;
import mx.validators.Validator;
import org.osmf.utils.URL;
[Bindable]public static var mainApp:DataCenterTargetPreserve = null;
[Bindable]public var gsMyString:String;
[Bindable]public var gnMyNumber:Number;
[Bindable]public var acItemsSelected:Object;
[Bindable]
public var dataArray:ArrayCollection;
private function initComponent():void
{
var u:URLVariables=new URLVariables("temp="+Math.random());
var r:URLRequest=new URLRequest();
r.data=u;
r.method=URLRequestMethod.POST;
r.url=mainApp.urls+"/findTargetCal.do";
var l:URLLoader=new URLLoader();
l.load(r);
l.addEventListener(Event.COMPLETE, comp2);
}
function comp2(e:Event):void
{
var l:URLLoader=URLLoader(e.target);
var array:Array=JSON.decode(String(l.data)) as Array;
dataArray=new ArrayCollection(array);
myGrid.dataProvider=dataArray;
}
private function closeWindow():void
{
PopUpManager.removePopUp(this);
}//closeWindow
private function showFinalSelection(oEvent:Event):void
{
//mainApp.tiFinalSelection.text = oEvent.target.selectedItem.album;
}//showFinalSelection
protected function button1_clickHandler(event:MouseEvent):void
{
PopUpManager.removePopUp(this);
}
protected function button2_clickHandler(event:MouseEvent):void
{
var all:Array=Validator.validateAll([sval_1,sval_2]);
if(all.length==0){
var v:URLVariables=new URLVariables("targetTypeName="+targetTypeName.text+"&targetCal="+targetCal.text+"&temp="+Math.random());
var r:URLRequest=new URLRequest();
r.url=mainApp.urls+"/addTargetCal.do";
r.method=URLRequestMethod.POST;
r.data=v;
var l:URLLoader=new URLLoader();
l.load(r);
l.addEventListener(Event.COMPLETE,comp);
}else{
Alert.show("新增失败");
}
}
private function comp(e:Event):void{
var l:URLLoader = URLLoader(e.target);
var o:Object=URLUtil.stringToObject(l.data,";",true);
if(o.result=="add"){
Alert.show("新增成功");
var obj:Object=(JSON.decode(o.datas) as Object);
//dataArray.addItemAt(obj,0);
Alert.show(obj.targetCalId);
}
initComponent();
}
private function myClick(evt:CloseEvent):void{
//Alert.show("本次要删除的为"+mainDataGrid.selectedIndex);
if(evt.detail==Alert.YES){
//Alert.show(acItemsSelected.getItemAt(0).targetId);
var v:URLVariables = new URLVariables("id="+acItemsSelected.targetCalId+"&temp="+Math.random());
var r:URLRequest = new URLRequest();
r.url =mainApp.urls+"/deleteTargetCal.do" ;
r.method = URLRequestMethod.POST;
r.data=v;
var l:URLLoader = new URLLoader();
l.load(r);
//dataArray.removeItemAt(myGrid.selectedIndex);
l.addEventListener(Event.COMPLETE,comp1); //注册请求完成后 响应获取数据事件方法
}
}
private function comp1(e:Event):void
{
var l:URLLoader = URLLoader(e.target);
var o:Object = URLUtil.stringToObject(l.data, ";", true);
if(o.result=="delete"){
Alert.show("删除成功!","友情提示");
}
initComponent();
}
protected function button3_clickHandler(event:MouseEvent):void
{
if(myGrid.selectedItem==null){
Alert.show("请选择一项进行删除","友情提示");
}else{
var dlg_obj:Object=Alert.show("确认删除吗?", "友情提示!", Alert.YES|Alert.NO,null,myClick);
}
}
protected function button4_clickHandler(event:MouseEvent):void
{
if(myGrid.selectedItem==null){
Alert.show("请选择一项进行修订!","友情提示");
}else{
var v:URLVariables = new URLVariables("targetTypeName="+targetTypeName.text+"&targetCal="+targetCal.text+"&id="+acItemsSelected.targetCalId);
var r:URLRequest = new URLRequest();
r.url =mainApp.urls+"/updateTargetCal.do";
r.method = URLRequestMethod.POST;
r.data = v;
var l:URLLoader = new URLLoader();
l.load(r);
l.addEventListener(Event.COMPLETE,comp3); //注册请求完成后 响应获取数据事件方法
}
}
private function comp3(e:Event):void
{
var l:URLLoader = URLLoader(e.target);
var o:Object = URLUtil.stringToObject(l.data, ";", true);
if(o.result=="update"){
Alert.show("更新成功!","友情提示");
var obj:Object=(JSON.decode(o.datas) as Object);
//dataArray.setItemAt(obj,myGrid.selectedIndex);
}else{
Alert.show("操作失败!","友情提示");
}
initComponent();
}
protected function myGrid_itemClickHandler(event:ListEvent):void
{
acItemsSelected =myGrid.selectedItem;
}
]]>
</fx:Script>
<mx:Form width="651" height="282">
<mx:DataGrid width="616" height="160" id="myGrid" itemClick="myGrid_itemClickHandler(event)">
<mx:columns>
<mx:DataGridColumn headerText="计量名称" dataField="targetTypeName"/>
<mx:DataGridColumn headerText="计量符号" dataField="targetCal"/>
<mx:DataGridColumn visible="false" dataField="targetCalId" />
</mx:columns>
</mx:DataGrid>
<mx:HBox>
<s:Label width="33"/>
<mx:FormItem label="计量名称" >
<s:TextInput id="targetTypeName"/>
</mx:FormItem>
<mx:FormItem label="计量符号" >
<s:TextInput id="targetCal"/>
</mx:FormItem>
<mx:FormItem >
<s:Button label="新增" id="myButton" click="button2_clickHandler(event)" />
</mx:FormItem>
</mx:HBox>
<mx:FormItem >
</mx:FormItem>
<mx:HBox>
<s:Label width="250"/>
<mx:FormItem >
<s:Button label="删除" click="button3_clickHandler(event)"/>
</mx:FormItem>
<mx:FormItem >
<s:Button label="修改" click="button4_clickHandler(event)"/>
</mx:FormItem>
<mx:FormItem >
<s:Button label="刷新"/>
</mx:FormItem>
<mx:FormItem >
<s:Button label="关闭" click="button1_clickHandler(event)"/>
</mx:FormItem>
</mx:HBox>
</mx:Form>
</s:TitleWindow>
关于上面这个程序的mainApp就不用管它,它只是主应用程序而已,细心的可以发现这个是个弹出窗口程序
关于这个程序的三个Servletet处理类【只贴上关键代码】
FindTargetCalServlet
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
TTargetCalDAO dao=new TTargetCalDAO();
List<TTargetCal> cals=dao.findAll();
JSONArray json = JSONArray.fromObject(cals);
String datas = json.toString();
System.out.println(datas);
System.out.println(datas);
response.setCharacterEncoding("UTF-8");
response.getWriter().write(datas);
}
DeleteTargetCalServlet
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
TTargetCalDAO dao = new TTargetCalDAO();
String id = request.getParameter("id");
if (DataOptUtils.isNotNull(id)) {
TTargetCal rr = dao.findById(Integer.valueOf(id));
dao.delete(rr);
}
response.setCharacterEncoding("UTF-8");
response.getWriter().write("result=delete");
}
AddTargetCalServlet
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
TTargetCalDAO dao=new TTargetCalDAO();
String targetCal=request.getParameter("targetCal");
String targetTypeName=request.getParameter("targetTypeName");
TTargetCal cal=new TTargetCal();
cal.setTargetCal(targetCal);
cal.setTargetTypeName(targetTypeName);
dao.save(cal);
TTargetCal re =dao.findById(dao.findLastId());
JSONObject json = JSONObject.fromObject(re);
String datas = json.toString();
response.getWriter().write("result=add;datas=" + datas);
}
UpdateTargetCalServlet
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
TTargetCalDAO dao = new TTargetCalDAO();
String targetTypeName = request.getParameter("targetTypeName");
String targetCal = request.getParameter("targetCal");
String id = request.getParameter("id");
if (DataOptUtils.isNotNull(id)) {
TTargetCal rr = dao.findById(Integer.valueOf(id));
if(DataOptUtils.isNotNull(targetCal)){
rr.setTargetCal(targetCal);
}
if(DataOptUtils.isNotNull(targetTypeName)){
rr.setTargetTypeName(targetTypeName);
}
dao.merge(rr);
TTargetCal tc = dao.findById(rr.getTargetCalId());
JSONObject json = JSONObject.fromObject(tc);
String datas = json.toString();
response.getWriter().write("result=update;datas=" + datas);
}
}
这里的DataOptUtils是我写的一个数据处理类,判断是否为空什么的
还有就是TTargetCal
@Entity
@Table(name = "t_target_cal", catalog = "sxtele")
public class TTargetCal implements java.io.Serializable {
// Fields
private Integer targetCalId;
private String targetCal;
private String targetTypeName;
// Constructors
/** default constructor */
public TTargetCal() {
}
/** minimal constructor */
public TTargetCal(String targetCal) {
this.targetCal = targetCal;
}
/** full constructor */
public TTargetCal(String targetCal, String targetTypeName) {
this.targetCal = targetCal;
this.targetTypeName = targetTypeName;
}
// Property accessors
@Id
@GeneratedValue
@Column(name = "Target_cal_id", unique = true, nullable = false)
public Integer getTargetCalId() {
return this.targetCalId;
}
public void setTargetCalId(Integer targetCalId) {
this.targetCalId = targetCalId;
}
@Column(name = "Target_cal", nullable = false, length = 50)
public String getTargetCal() {
return this.targetCal;
}
public void setTargetCal(String targetCal) {
this.targetCal = targetCal;
}
@Column(name = "Target_type_name", length = 50)
public String getTargetTypeName() {
return this.targetTypeName;
}
public void setTargetTypeName(String targetTypeName) {
this.targetTypeName = targetTypeName;
}
}
评论
发表评论
-
10条寒冷的冷笑话【心情不好的人,进来看看吧】
2010-08-27 12:24 25911、小明:我说话从来不说第2遍小华:什么?小明:我说话从来不说 ... -
Flex4之事件详解
2010-08-26 15:39 9815第一、Flex事件简介事 ... -
全面认识Flex六大要素
2010-08-19 15:25 2156在学习Flex应用程序的 ... -
Flex4之将Sprite控件添加到FLEX UI中
2010-08-13 09:24 6016在Flex的帮助文档 ... -
Flex4之元数据标签使用
2010-08-09 16:04 4704Flex 元数据标签 1、[ArrayElementTy ... -
Flex4之关于Embed外部资源的使用方法总结
2010-08-09 14:20 8358Flex软件中经常需要使用一些外部的资源,如图片、声音、S ... -
Flex4之使用ActionScript构建组件
2010-08-09 13:37 4280因为是专门针对ActionScript来写的 ... -
Flex4之获取各种颜色RGB值的例子
2010-08-09 10:03 4448接下来的例子演示了Flex中如何将颜色的值转化为字符串,根据R ... -
Flex4之简单菜单制作
2010-08-04 11:45 3659首先呢说明一下,我写的这个菜单呢,为了符合我的项目需要没有用到 ... -
Flex4之关于循环注册事件问题
2010-08-03 15:02 2077首先呢,标题说的有些 ... -
关于FLEX特效的几个网址
2010-07-27 13:01 8192在Tourde FLEX的Data Visualization ... -
FLEX4之内存释放优化原则
2010-07-27 10:17 23181. 被删除对象在外部的所有引用一定要被删除干净才能被系统当成 ... -
Flex4之Filters的用法【模糊,炽热,阴影、齿条】
2010-07-23 14:51 5581先上效果图 具体代码 <?xml versio ... -
Flex4之四种事件处理方式
2010-07-23 14:36 2582首先我这个示例是针对按钮来说的,其实其他的组件大致也都一样 ... -
Flex4之皮肤定制【Skin类和Skin类】
2010-07-23 10:01 22340第一、关于spark.skin.SparkSkin类的 ... -
Flex4之为ToolTip设置旋转特效及字体
2010-07-22 16:21 5200没想到ToolTip一个提示标签也可以加上动画,看来Flex真 ... -
Flex4之在Aert提示框中加入超链接
2010-07-22 16:02 2305闲话不说,贴上代码 <?xml version=&qu ... -
Flex4之在button上显示HTML内容
2010-07-22 15:28 2767HTMLButton.as package myas { ... -
Flex4之添加插件实现代码格式化
2010-07-22 15:13 4388首先到http://sourceforge.net/proje ... -
Flex4之通过iframe嵌入html网页
2010-07-22 14:36 8495想起之前在ExtJS中就涉及到嵌入网页问题,这次改用Flex肯 ...
相关推荐
在本文中,我们将深入探讨如何在WPF(Windows Presentation Foundation)环境中使用DataGrid控件来操作数据库,实现数据的添加、删除和修改功能。DataGrid是WPF中的一个强大控件,它允许用户以表格的形式展示和编辑...
总结起来,"Flex4之DataGrid四个的示例【客户端和服务器端】"这一主题涵盖了使用Flex4的DataGrid组件展示和处理数据的基本技巧,包括客户端数据绑定、服务器端交互以及JSON数据的使用。通过具体的示例,开发者可以...
本例子是wpf中datagrid的增加修改,对于datagrid中的canuseraddrows=true,对当前空白行进行的添加数据,修改时,鼠标离开焦点可自动更新数据库,删除等等。不需要多余的界面进行添加修改等,利用datagrid的属性,...
// 示例:从数据库获取数据并绑定到datagrid DataTable dt = GetDataFromDB(); dataGridView1.DataSource = dt; ``` 2. **数据列自动生成**:当数据源绑定后,datagrid会自动根据数据源的字段生成对应的列。若需...
本知识点将深入探讨如何在Silverlight 4中使用DataGrid进行数据的增、删、改以及全选操作。 首先,DataGrid控件是基于WPF中的同名控件,并在Silverlight中得到了优化。它提供了强大的数据绑定能力,可以与各种数据...
本教程将通过一个简单的示例来阐述如何实现`datagrid`的增删改功能,主要涉及的技术点包括ASP.NET页面生命周期、数据绑定以及事件处理。 首先,`datagrid`控件在ASP.NET中是一个强大的组件,它能够将数据库中的数据...
Flex 动态给DataGrid增加行,可编辑行数据
本篇文章将深入探讨如何使用Flex技术来实现页面上的数据操作,包括增、删、改、查,以及柱形图数据的变化,并且不依赖于数据库。我们将讨论Flex的基本概念、数据绑定、事件处理、界面设计以及图形渲染。 首先,让...
在本场景中,我们讨论的是如何在Flex 4中利用Myeclipse 9.0集成开发环境,从MySQL数据库中获取数据,并通过DataGrid组件在Flex页面上展示这些数据。这个过程涉及到多个技术栈,包括Java、Mysql数据库、Tomcat服务器...
在Flex编程领域,DataGrid组件是开发者们常用的数据展示工具,尤其在处理大量结构化数据时,它能提供高效、可定制化的展示效果。本文将深入探讨Flex DataGrid的高级用法,通过实例源码来解析其核心特性,帮助开发者...
在Flex开发中,Datagrid组件是用于展示数据集的一个强大工具,它允许用户以表格的形式查看和操作数据。本文将深入探讨如何在Flex的Datagrid中实现数据的合计与平均值计算,帮助开发者更好地理解和应用这些功能。 ...
在.NET框架中,DataGrid控件是一个非常实用的组件,常用于显示和操作数据库中的数据。本教程将详细讲解如何使用Visual Studio 2010(VS2010)中的DataGrid控件来实现与数据库的连接,并完成数据的添加、删除和修改...
在Flex4.6开发环境中,DataGrid控件是用于展示数据集合的重要组件,它提供了丰富的功能,如排序、分页和自定义列显示。在这个项目中,我们关注的是如何实现DataGrid的行编辑功能,特别是在行中嵌套ComboBox控件以...
flex中dataGrid导出数据到excel中,不存在乱码问题
在本主题中,“基于datagrid控件的增删改查及分页实现”是一个常见的需求,特别是在开发数据密集型的Web应用时。下面将详细介绍这个主题中的相关知识点。 1. Flex DataGrid 控件: DataGrid是Flex中一个强大的组件...
总结来说,这个Flex应用通过`HTTPService`从XML文件获取数据,然后将数据绑定到`DataGrid`组件上,从而实现动态加载和展示XML数据的功能。这种方式在实际项目中非常常见,特别是在需要从服务器获取结构化数据并显示...
这是一个在VB中使用 数据库绑定控件DataGrid的实例,演示了如何将从数据库中读取出的数据显示到DataGrid控件中。本例子中包括了很多ADO 操作数据库方面的基本操作,是新手学习VB环境下的ado操作的好范例,比如添加、...