- 浏览: 271268 次
- 性别:
- 来自: 青岛
文章分类
最新评论
-
薛小强:
document.forms['formName'];里面放的 ...
jsp自定义标签——分页标签 -
qing_gee:
test_cacerts 是什么?
keytool 用法总结 -
prince_of_:
这篇文章非常赞,支持楼主
反射实现AOP动态代理 -
lijingshou:
赞......啊
Maven项目在eclipse中关联源码包 -
双双37278752:
能给个完整的实现分页的代码吗?最好给出一个Demo,谢谢
jsp自定义标签——分页标签
前期准备:
用到的工具: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.未数据验证
----------------------------
参考:
http://zhidao.baidu.com/question/308022033.html
- FlexTopTest_flex.rar (223.4 KB)
- 下载次数: 214
- FlexTopTest_java.rar (6.9 MB)
- 下载次数: 186
发表评论
-
读JEECMS代码之模仿JEECMS
2015-06-04 14:44 0刚开始看jeecms代码,会有无从下手的感觉,最好的办法就 ... -
读JEECMS代码之安装部署
2015-06-04 11:07 2008一、下载 参考下贴:http://bbs.jeec ... -
PageRank
2013-05-05 20:57 0dddd -
页面间传递多个参数
2011-12-31 11:38 1707问题描述: 有多个页面,(1)选择课程-->(2)选择 ... -
onclick 实现post提交 js 分割字符串
2011-12-26 14:50 6370问题描述: <script type=" ...
相关推荐
在Flex4.6开发环境中,DataGrid控件是用于展示数据集合的重要组件,它提供了丰富的功能,如排序、分页和自定义列显示。在这个项目中,我们关注的是如何实现DataGrid的行编辑功能,特别是在行中嵌套ComboBox控件以...
这是我自己开发的一个dataGrid分页的控件,上传的资源是一个打成包的flex项目,这个控件在查询数据时是与后台进行实时交互的,表格的表头样式是重写皮肤类进行定义的,而隔行变色是通过css来实现的。其中最重要的...
在描述中提到的“flex datagrid pagination”是指DataGrid控件的一个重要特性——分页功能。在处理大数据集时,分页是必不可少的,因为它能提高用户体验,避免一次性加载所有数据导致的性能问题。下面将详细讲解Flex...
实现Flex DataGrid的前台分页,首先需要确保数据源能够一次性加载所有数据。这可能意味着你需要有足够的内存来处理这些数据,否则可能会导致性能问题。在获取数据后,你可以使用DataGrid的`dataProvider`属性来绑定...
本教程将详细介绍如何在Flex中开发一个支持客户端和服务器端分页的DataGrid控件。 1. 客户端分页: 在客户端分页中,应用程序会一次性从服务器获取所有数据,然后在客户端进行分页处理。这种方式的优点是用户交互...
本文将详细解析使用AS3.0在Flex中实现DataGrid分页的功能,帮助你深入理解这一技术。 首先,Flex是Adobe开发的一个开放源代码框架,用于构建富互联网应用程序(RIA)。它提供了丰富的组件库,包括DataGrid,这是一...
虽然Flex主要应用于Flash开发,它的DataGrid控件同样具备数据绑定、排序和分页等功能,适用于创建动态、交互性的数据展示。 总结,DataGrid控件是.NET开发中不可或缺的一部分,它提供了强大的数据展示和操作能力。...
"flex的datagrid分页"这个主题,主要涉及如何在DataGrid中实现数据的分页显示,以便用户能够高效地浏览大量数据,而不会因为一次性加载所有数据导致性能下降。下面将详细介绍DataGrid分页的相关知识点: 1. **数据...
DataGrid控件用于显示和编辑多列数据,支持排序、选择和滚动等功能。我们可以根据需求定制DataGrid的列配置,包括列宽、标题、数据类型等。同时,DataGrid的数据源同样可以绑定到ComboBox的dataProvider,确保两者...
在Flex开发中,DataGrid控件是用于展示数据集并进行交互操作的重要组件。它能够以表格形式显示数据,支持排序、筛选、编辑等功能,极大地增强了用户界面的交互性。本篇文章将深入探讨如何在Flex中创建一个既可编辑又...
本文将详细介绍如何在Flex3中为DataGrid组件实现分页。 首先,我们需要理解Flex3的架构。Flex3基于ActionScript3.0,这是一个面向对象的编程语言,提供了强大的数据绑定和事件处理机制。在Flex中,数据网格...
这是我自己开发的一个dataGrid分页的控件,上传的资源是一个打成包的flex项目,这个控件在查询数据时是与后台进行实时交互的,表格的表头样式是重写皮肤类进行定义的,而隔行变色是通过css来实现的。其中最重要的...
在Flex开发中,`Datagrid`组件是一种常用的展示数据列表的控件,而分页和数据高亮显示是提升用户体验的重要功能。本篇主要探讨如何在Flex的`Datagrid`中实现分页定位和高亮显示。 首先,分页定位涉及的主要任务是...
在Flex开发中,DataGrid是常用的数据显示控件,它能够以表格的形式展示大量数据,并提供了丰富的功能,如排序、分页、筛选等。本篇文章将深入探讨Flex中的DataGrid及其与其他控件的协同使用。 首先,DataGrid的核心...
在Flex中,我们可以通过设置Datagrid的pageSize属性和实现IList接口的数据源来实现分页。 动态绑定数据源是Flex中数据驱动开发的核心特性。在Flex中,我们可以将数据源与组件直接关联,当数据源发生改变时,关联的...
在这个"Flex-DataGrid源码及资料"的压缩包中,包含了一些关键特性,如鼠标右键菜单、鼠标双击编辑、插入复选框以及数据集的双向绑定。下面将对这些功能进行详细介绍。 1. 鼠标右键:在Flex DataGrid中添加鼠标右键...
在Flex开发中,DataGrid控件是用于展示数据表格的重要组件。它允许用户以网格形式查看和操作数据,尤其在处理大量数据时,自动分页功能变得至关重要,以提高用户体验和应用性能。在这个主题中,“三状态多选”功能则...