`
ln_ydc
  • 浏览: 271268 次
  • 性别: Icon_minigender_1
  • 来自: 青岛
社区版块
存档分类
最新评论

flex基于datagrid控件的增删改查及分页实现

    博客分类:
  • Web
 
阅读更多

前期准备:

用到的工具:myeclipse 6.5 + flash builder 4.5 + blazeds3.3.0 + mysql数据库 + tomcat 6.0.20

blazeds下载  这个好像得注册个用户 

https://www.adobe.com/cfusion/entitlement/index.cfm?e=lc_blazeds

----------------------------

效果展示:



 

 

 

----------------------------

具体实现:

1.java端准备

(1)用myeclipse创建web工程FlexTopTest

(2)将下载下来的blazeds-turnkey-3.3.0.22497.rar解压,将如下目录的内容

{blazeds-home}\tomcat\webapps\blazeds\WEB-INF

替换掉FlexTopTest中的WEB-INF中的内容

(3)具体编码实现,现把servlet端代码贴出来

UserService userService = new UserServiceImpl();
		
		StringBuilder content = new StringBuilder();
		String method = request.getParameter("method");
		if("list".equals(method)) {
			String pageNo_str = request.getParameter("pageNo");
			String pageSize_str = request.getParameter("pageSize");
			String keyword = request.getParameter("keyword");
			int pageNo = 1;
			int pageSize = 20;
			try {
				pageNo = Integer.parseInt(pageNo_str);
				pageSize = Integer.parseInt(pageSize_str);
			} catch (NumberFormatException e) {
				
			}
			// List<User> userList = userService.getList(pageNo, pageSize);
			// content.append(JsonUtils.toJson(userList));
			Pagination<User> paga = userService.getList(pageNo, pageSize, keyword);
			content.append(JsonUtils.toJsonIncludeNull(paga));
		} else if ("add".equals(method)) {
			String userName = request.getParameter("userName");
			String password = request.getParameter("password");
			String realName = request.getParameter("realName");
			String mail = request.getParameter("mail");
			String gender = request.getParameter("gender");
			String birthday = request.getParameter("birthday");
			System.out.println(birthday);
			User user = new User();
			user.setUserName(userName);
			user.setRealName(realName);
			user.setPassword(password);
			user.setGender(gender);
			user.setMail(mail);
			// user.setBirthday(birthday);
			userService.createUser(user);
			content.append("{\"result\":\"success\", \"msg\":\"success\"}");
		} else if ("delete".equals(method)) {
			String id_str = request.getParameter("id");
			int id = Integer.parseInt(id_str);
			userService.deleteUser(id);
			content.append("{\"result\":\"success\", \"msg\":\"success\"}");
		} else if ("info".equals(method)) {
			String id_str = request.getParameter("id");
			int id = Integer.parseInt(id_str);
			User user = userService.getUser(id);
			content.append(JsonUtils.toJson(user));
		} else if ("update".equals(method)) {
			String id_str = request.getParameter("id");
			String userName = request.getParameter("userName");
			String password = request.getParameter("password");
			String realName = request.getParameter("realName");
			String mail = request.getParameter("mail");
			String gender = request.getParameter("gender");
			String birthday = request.getParameter("birthday");
			
			int id = Integer.parseInt(id_str);
			User user = new User();
			user.setId(id);
			user.setUserName(userName);
			user.setRealName(realName);
			user.setPassword(password);
			user.setGender(gender);
			user.setMail(mail);
			// user.setBirthday(birthday);
			userService.updateUser(user);
			content.append("{\"result\":\"success\", \"msg\":\"success\"}");
		}
		
		// response.setContentType("text/html");
		// response.setCharacterEncoding("UTF-8");
		PrintWriter out = response.getWriter();
		out.println(content);
		out.flush();
		out.close();

 

2.flex端准备

(1)用lashbuilder 创建 flex工程 FlextTopTest

在创建过程中,选择application server时,选择java,具体配置如下



 注意 :root folder是java web项目发布到tomcat中的文件目录

root url:一看就明了了

(2)具体编码实现,现把用户列表的mxml贴出来

<?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"
			   applicationComplete="initApp()">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
		<s:RemoteObject id="userService"
						destination="userService"
						fault="Alert.show(event.fault.faultString,'Error')">
		</s:RemoteObject>

	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import com.adobe.serialization.json.JSON;
			import com.ln.ydc.flex.commons.core.utils.*;

			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import mx.controls.dataGridClasses.DataGridColumn;
			import mx.events.CloseEvent;
			import mx.events.ListEvent;
			import mx.formatters.DateFormatter;
			import mx.managers.PopUpManager;

			// 数据源
			[Bindable]
			private var dataArray:ArrayCollection;

			// 分页数据
			[Bindable]
			private var pageNo:uint=1;
			[Bindable]
			private var pageSize:uint=20;
			[Bindable]
			private var totalRecord:uint;
			[Bindable]
			private var totalPage:uint;

			// 公共数据
			[Bindable]
			public static var genderArray:ArrayCollection=new ArrayCollection([{id: 0, label: '男'}, {id: 1, label: '女'}]);


			public function initApp():void
			{
				// 加个时间戳,解决缓存不更新问题
				var params:URLVariables=new URLVariables("temp=" + Math.random());
				params.pageNo=pageNo;
				params.pageSize=pageSize;
				var ru:RequestUtils=new RequestUtils;
				ru.doPostRequest(UrlConst.USER_LIST_URL, params, initDataSource);


				btn_add.addEventListener(MouseEvent.CLICK, popUserAddWin);
				btn_info.addEventListener(MouseEvent.CLICK, popUserInfoWin);
				btn_update.addEventListener(MouseEvent.CLICK, popUserUpdateWin);
				btn_delete.addEventListener(MouseEvent.CLICK, btn_deleteClick);
				btn_refesh.addEventListener(MouseEvent.CLICK, btn_refeshClick);
			}

			// 设置数据源
			private function initDataSource(e:Event):void
			{
				var loader:URLLoader=URLLoader(e.target);
				var dataObj:Object=JSON.decode(loader.data) as Object;
				pageNo=dataObj["pageNo"];
				pageSize=dataObj["pageSize"];
				totalRecord=dataObj["totalRecord"];
				totalPage=dataObj["totalPage"];
				// var array:Array=JSON.decode(String(dataObj["records"])) as Array;
				dataArray=new ArrayCollection(dataObj["records"]);
				dg.dataProvider=dataArray;
			}

			// 弹出用户添加窗口事件
			private function popUserAddWin(evt:MouseEvent):void
			{
				var childWin:UserAdd=new UserAdd();
				childWin.owner=this;
				PopUpManager.addPopUp(childWin, this, true);
				PopUpManager.centerPopUp(childWin);
			}

			// 弹出用户信息窗口事件
			private function popUserInfoWin(evt:MouseEvent):void
			{
				if (dg.selectedItem == null)
				{
					Alert.show("请先选择一个用户", "友情提示");
					return;
				}
				var childWin:UserInfo=new UserInfo();
				childWin.owner=this;
				childWin.setUserId(dg.selectedItem.id);
				PopUpManager.addPopUp(childWin, this, true);
				PopUpManager.centerPopUp(childWin);
			}

			// 弹出用户编辑窗口事件
			private function popUserUpdateWin(evt:MouseEvent):void
			{
				if (dg.selectedItem == null)
				{
					Alert.show("请先选择一个用户", "友情提示");
					return;
				}
				var childWin:UserUpdate=new UserUpdate();
				childWin.owner=this;
				childWin.setUserId(dg.selectedItem.id);
				PopUpManager.addPopUp(childWin, this, true);
				PopUpManager.centerPopUp(childWin);
			}

			// 删除用户事件
			private function btn_deleteClick(evt:MouseEvent):void
			{
				if (dg.selectedItem == null)
				{
					Alert.show("请先选择一个用户", "友情提示");
				}
				else
				{
					var params:URLVariables=new URLVariables;
					params.id=dg.selectedItem.id;
					var ru:RequestUtils=new RequestUtils;
					ru.doPostRequest(UrlConst.USER_DELETE_URL, params, resultHandler);
				}
			}

			// 刷新列表事件
			private function btn_refeshClick(evt:MouseEvent):void
			{
				var params:URLVariables=new URLVariables;
				params.temp=Math.random();
				params.pageNo=pageNo;
				params.pageSize=pageSize;
				var ru:RequestUtils=new RequestUtils;
				ru.doPostRequest(UrlConst.USER_LIST_URL, params, initDataSource);
			}


			// 默认回调函数
			private function resultHandler(evt:Event):void
			{
				var loader:URLLoader=URLLoader(evt.target);
				var data:Object=JSON.decode(String(loader.data));
				Alert.show("操作" + data["result"] + "", "信息提示", Alert.YES | Alert.NO, this, alertClickHandler);
			}

			private function alertClickHandler(evt:CloseEvent):void
			{
				if (evt.detail == Alert.YES)
				{
					// status.text = "You answered Yes";
				}
				else
				{
					// status.text = "You answered No";
				}
			}

			private function toPage(pageNo:uint):void
			{
				var params:URLVariables=new URLVariables;
				params.temp=Math.random();
				params.pageNo=pageNo;
				params.pageSize=pageSize;
				var ru:RequestUtils=new RequestUtils;
				ru.doPostRequest(UrlConst.USER_LIST_URL, params, initDataSource);
			}

			private function topPage():void
			{
				toPage(1);
			}

			private function prevPage():void
			{
				toPage(pageNo - 1);
			}

			private function nextPage():void
			{
				toPage(pageNo + 1);
			}

			private function endPage():void
			{
				toPage(totalPage);
			}

			// 生日格式化  日期
			private function formatBirthday(item:Object, column:GridColumn):String
			{
				// trace("UserManager\t" + item.birthday + "\t" + DateUtils.formatDate(String(item.birthday)));
				// trace(DateUtils.formatDate(String(item.birthday) + "ddddd"));
				// return DateUtils.formatDate(String(item.birthday));
				return item.birthday;
			}

			private function formatGender(item:Object, column:GridColumn):String
			{
				var gender:String="男";
				if (item.gender.toString() == "1")
				{
					gender="女";
				}
				return gender;
			}
		]]>
	</fx:Script>
	<s:DataGrid id="dg"
				x="43"
				y="58"
				width="851"
				height="357"
				requestedRowCount="4">
		<s:columns>
			<s:ArrayList>
				<s:GridColumn dataField="id"
							  headerText="ID">
				</s:GridColumn>
				<s:GridColumn dataField="userName"
							  headerText="用户名">
				</s:GridColumn>
				<s:GridColumn dataField="realName"
							  headerText="姓名">
				</s:GridColumn>
				<s:GridColumn dataField="gender"
							  headerText="性别"
							  labelFunction="formatGender">
				</s:GridColumn>
				<s:GridColumn dataField="mail"
							  headerText="邮箱">
				</s:GridColumn>
				<s:GridColumn dataField="birthday"
							  headerText="生日"
							  labelFunction="formatBirthday">
				</s:GridColumn>
				<s:GridColumn dataField="registerDate"
							  headerText="注册日期">
				</s:GridColumn>
			</s:ArrayList>
		</s:columns>
	</s:DataGrid>
	<s:Button id="btn_search"
			  x="206"
			  y="25"
			  label="查询"/>
	<s:Button id="btn_add"
			  x="303"
			  y="25"
			  label="增加"/>
	<s:Button id="btn_delete"
			  x="401"
			  y="25"
			  label="删除"/>
	<s:Button id="btn_update"
			  x="501"
			  y="25"
			  label="修改"/>
	<s:Button id="btn_info"
			  x="587"
			  y="25"
			  label="查看"/>
	<s:Button id="btn_refesh"
			  x="675"
			  y="25"
			  label="刷新"/>
	<s:TextInput id="input_keyword"
				 x="43"
				 y="24"/>
	<s:Label x="51"
			 y="432"
			 text="第 {pageNo}/{totalPage} 页  共 {totalRecord} 条数据"/>
	<s:Button id="btn_top"
			  x="210"
			  y="423"
			  label="首页"
			  buttonDown="topPage()"/>
	<s:Button id="btn_prev"
			  x="307"
			  y="423"
			  label="上一页"
			  buttonDown="prevPage()"/>
	<s:Button id="btn_next"
			  x="405"
			  y="423"
			  label="下一页"
			  buttonDown="nextPage()"/>
	<s:Button id="btn_end"
			  x="505"
			  y="423"
			  label="尾页"
			  buttonDown="endPage()"/>
</s:Application>
 

其它具体实现见附件

3.数据库准备

表结构

DROP TABLE IF EXISTS `t_user`;
/*!40101 SET @saved_cs_client     = @@character_set_client */;
/*!40101 SET character_set_client = utf8 */;
CREATE TABLE `t_user` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `realName` varchar(25) DEFAULT NULL,
  `userName` varchar(25) DEFAULT NULL,
  `pwd` varchar(50) DEFAULT NULL,
  `birthday` date DEFAULT NULL,
  `gender` varchar(1) DEFAULT NULL,
  `mail` varchar(50) DEFAULT NULL,
  `registerDate` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00',
  `deleteFlag` int(1) DEFAULT '0',
  `lastModifyDate` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  UNIQUE KEY `userName` (`userName`),
  UNIQUE KEY `mail` (`mail`)
) ENGINE=InnoDB AUTO_INCREMENT=156 DEFAULT CHARSET=utf8;
/*!40101 SET character_set_client = @saved_cs_client */;
 

----------------------------

遇到的一些问题:

1.乱码  java端使用过虑器解决

2.flex 弹出窗口

 

----------------------------

不足及未实现:

1.java日期与flex格式化未解决
2.未数据验证

----------------------------

参考:

Flex连接数据库三种方法

Flex使用Blazeds与Java交互

Flex 中有两种弹出窗口

http://zhidao.baidu.com/question/308022033.html

  • 大小: 105.9 KB
  • 大小: 29.2 KB
  • 大小: 23.3 KB
  • 大小: 27.7 KB
  • 大小: 56.4 KB
分享到:
评论

相关推荐

    Flex4 DataGrid控件行编辑项目

    在Flex4.6开发环境中,DataGrid控件是用于展示数据集合的重要组件,它提供了丰富的功能,如排序、分页和自定义列显示。在这个项目中,我们关注的是如何实现DataGrid的行编辑功能,特别是在行中嵌套ComboBox控件以...

    flex dataGrid 分页控件

    这是我自己开发的一个dataGrid分页的控件,上传的资源是一个打成包的flex项目,这个控件在查询数据时是与后台进行实时交互的,表格的表头样式是重写皮肤类进行定义的,而隔行变色是通过css来实现的。其中最重要的...

    flex datagrid 分页控件源码

    在描述中提到的“flex datagrid pagination”是指DataGrid控件的一个重要特性——分页功能。在处理大数据集时,分页是必不可少的,因为它能提高用户体验,避免一次性加载所有数据导致的性能问题。下面将详细讲解Flex...

    flex datagrid 前台 分页

    实现Flex DataGrid的前台分页,首先需要确保数据源能够一次性加载所有数据。这可能意味着你需要有足够的内存来处理这些数据,否则可能会导致性能问题。在获取数据后,你可以使用DataGrid的`dataProvider`属性来绑定...

    使用Flex开发DataGrid分页控件应用支持客户端及服务端

    本教程将详细介绍如何在Flex中开发一个支持客户端和服务器端分页的DataGrid控件。 1. 客户端分页: 在客户端分页中,应用程序会一次性从服务器获取所有数据,然后在客户端进行分页处理。这种方式的优点是用户交互...

    Flex中DataGrid分页源码

    本文将详细解析使用AS3.0在Flex中实现DataGrid分页的功能,帮助你深入理解这一技术。 首先,Flex是Adobe开发的一个开放源代码框架,用于构建富互联网应用程序(RIA)。它提供了丰富的组件库,包括DataGrid,这是一...

    DataGrid控件

    虽然Flex主要应用于Flash开发,它的DataGrid控件同样具备数据绑定、排序和分页等功能,适用于创建动态、交互性的数据展示。 总结,DataGrid控件是.NET开发中不可或缺的一部分,它提供了强大的数据展示和操作能力。...

    flex 的datagrid分页

    "flex的datagrid分页"这个主题,主要涉及如何在DataGrid中实现数据的分页显示,以便用户能够高效地浏览大量数据,而不会因为一次性加载所有数据导致性能下降。下面将详细介绍DataGrid分页的相关知识点: 1. **数据...

    flex下拉dataGrid

    DataGrid控件用于显示和编辑多列数据,支持排序、选择和滚动等功能。我们可以根据需求定制DataGrid的列配置,包括列宽、标题、数据类型等。同时,DataGrid的数据源同样可以绑定到ComboBox的dataProvider,确保两者...

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

    在Flex开发中,DataGrid控件是用于展示数据集并进行交互操作的重要组件。它能够以表格形式显示数据,支持排序、筛选、编辑等功能,极大地增强了用户界面的交互性。本篇文章将深入探讨如何在Flex中创建一个既可编辑又...

    flex3 对dataGrid 实现分页

    本文将详细介绍如何在Flex3中为DataGrid组件实现分页。 首先,我们需要理解Flex3的架构。Flex3基于ActionScript3.0,这是一个面向对象的编程语言,提供了强大的数据绑定和事件处理机制。在Flex中,数据网格...

    flex dataGrid分页 皮肤 隔行变色 实时交互

    这是我自己开发的一个dataGrid分页的控件,上传的资源是一个打成包的flex项目,这个控件在查询数据时是与后台进行实时交互的,表格的表头样式是重写皮肤类进行定义的,而隔行变色是通过css来实现的。其中最重要的...

    flex中的datagrid的分页定位以及高亮显示

    在Flex开发中,`Datagrid`组件是一种常用的展示数据列表的控件,而分页和数据高亮显示是提升用户体验的重要功能。本篇主要探讨如何在Flex的`Datagrid`中实现分页定位和高亮显示。 首先,分页定位涉及的主要任务是...

    Flex中DataGrid和其它控件使用

    在Flex开发中,DataGrid是常用的数据显示控件,它能够以表格的形式展示大量数据,并提供了丰富的功能,如排序、分页、筛选等。本篇文章将深入探讨Flex中的DataGrid及其与其他控件的协同使用。 首先,DataGrid的核心...

    flex datagrid分页 动态绑定数据源

    在Flex中,我们可以通过设置Datagrid的pageSize属性和实现IList接口的数据源来实现分页。 动态绑定数据源是Flex中数据驱动开发的核心特性。在Flex中,我们可以将数据源与组件直接关联,当数据源发生改变时,关联的...

    Flex-DataGrid源码及资料

    在这个"Flex-DataGrid源码及资料"的压缩包中,包含了一些关键特性,如鼠标右键菜单、鼠标双击编辑、插入复选框以及数据集的双向绑定。下面将对这些功能进行详细介绍。 1. 鼠标右键:在Flex DataGrid中添加鼠标右键...

    flex 三状态多选 自动分页DataGrid

    在Flex开发中,DataGrid控件是用于展示数据表格的重要组件。它允许用户以网格形式查看和操作数据,尤其在处理大量数据时,自动分页功能变得至关重要,以提高用户体验和应用性能。在这个主题中,“三状态多选”功能则...

Global site tag (gtag.js) - Google Analytics