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

最新推荐文章于 2018-06-26 13:11:49 发布

原创最新推荐文章于 2018-06-26 13:11:49 发布 · 191 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#数据库 #开发工具 #json

Web 专栏收录该内容

4 篇文章

订阅专栏

前期准备：

用到的工具：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 中有两种弹出窗口