版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
第六章
SSH结合EasyUI实现企业级运用回顾SSH架构将程序分为PO层、DAO层、Service层和Web层Web层由控制器和网页视图组成struts2-spring-plugin是用于框架间整合的核心包HibernateTemplate对象的executeFind方法在查询时使用，通过HibernateCallback参数返回集合对象在web.xml文件中，可以通过配置
CharacterEncodingFilter过滤器解决中文乱码问题本章内容1视图层采用EasyUI
datagrid组件2EasyUI表单异步交互1使用datagrid实现数据分页2使用Ajax实现表单异步交互1.
结合datagrid组件优化表格显示效果践习实练实际开发场景使用datagrid实现数据分页技术讲解讲解时间：
45分钟实践时间：
45分钟6.1使用datagrid组件：内容预览6.1.1实际开发场景在当今的Web应用程序中，用户对界面的美观度和设计感的要求越来越高。那么，有什么办法既能够设计美观的前端，又能够减轻压力、提高开发效率呢？我们可以采用目前流行的Web前端框架，如EasyUI、ExtJS和DOJO等前端框架。这些框架对J2EE程序而言都是不错的选择！6.1.2使用datagrid实现数据分页该案例将结合上一章完成的SSH架构。在此基础上，视图层加入EasyUI视图层框架，实现数据分页功能。大致的功能实现分为以下三个步骤：导入EasyUI的支持。编写模型层、控制器层代码。创建视图层页面，使用datagrid组件实现分页。在使用Struts的json扩展功能时，要检查项目是否导入struts2-json-plugin-2.2.1.jar文件，以免框架不提供支持6.1.2使用datagrid实现数据分页datagrid组件请求参数对datagrid组件的请求参数和接收参数进行设计。在默认情况下，
datagrid请求action时，会向action发送两个参数，属性如下：page：代表请求的页码，该属性要在action定义接收属性。rows：代表数据总行数。6.1.2使用datagrid实现数据分页datagrid组件相应服务器数据在datagrid接收参数时，控制器要向视图层响应JSON格式数据，而非集合对象。"total"
:
40,"rows"
:
[
{"cusId"
:
1,"cusLicense":
"C1","cusLicenseid"
:
"
","cusName":"卡拉克","cusYears":7},
{"cusId"
:
2,"cusLicense":
"C1","cusLicenseid"
:
"
","cusName":"穆勒","cusYears":5}//省略……]}返回数据总行数{
数据实体的序列化1.在工程中，导持入（复制）EasyUI的支使用datagrid实现数据分页6.1.2使用datagrid实现数据分页EasyUI目录结构2.在CustomersDAO类中，定义底层分页方法和获取总行的方法6.1.2使用datagrid实现数据分页}查询数据总行数CpuusbtolicmLeisrst<DCAuOs.jtaovmaers>getPages(final
int
page,
final
int
rows)
{publicLiLsot
nligstTgaebtRleo=wsg(e)
t{HibernateTemplate().executeFind(SessionnewseHssibioenrn=attehCisa.lglbeatScke(s)si{opnu(b);lic
Object
doInHibernate(SessionsessiLoonn)
g
count
=
(Long)session.createQuery("selectthcrownstH(ciubseIdrn)aftreoEmxcCeupsttionm,
eSrQs"L)E.uxnceiqputieoRnes{
ult();//session必须显Cr示ite性ri关a
c闭ri=session.createCriteria("com.mstf.ssh.entity.Customers");cri.setMaxResults(rows);returncri.list();}});returnlistTable;}返回当前页的翻页数据使用Hibernastee原ss生io的n.close();API实现查询，re可tu以rn提count;
cri.setFirstResult(page);高查询性能3.
在CustomersService中，定义封装分页的方法，返回Map封装的类型6.1.2使用datagrid实现数据分页CustomersService.xmlpublic
Map<String,
Object>
getCustomersPage(intpage,
final
introws)
{List<Customers>
data
=
this.getCustomersDAO().getPages((page
-
1)
*
rows,
rows);//查询总行Long
total=
this.getCustomersDAO().getRows();Map<String,
Object>
map
=
new
HashMap<String,
Object>();map.put("total",
total);map.put("rows",
data);returnmap;}查询分页结果和总行将数据保存到Map集合中，在action中转换4.
在action类中，定义参数属性和响应方法6.1.2使用datagrid实现数据分页CustomersAction.javaprivate
intpage;private
introws
=
5;public
Map
responseJson;//省略get/set……public
String
display()
throws
Exception
{this.setResponseJson(this.getCustomersService().getCustomersPage(page,rows));return"success";}该属性类似于json数据格式的根，在struts.xml中需要配置该参数将结果保存到responseJson属性中，框架会自动序列化为JSON格式6.1.2使用datagrid实现数据分页</result></action></package>5.
在struts.xml文件中，配置actionjson-default继承自json-default，专门针对json格式输出struts.xml<package
name="jsonPkg"
extends="json-default"><action
name="cusJsonAction"
class="CustomersAction"><result
name="success"
type="json"><!--
responseJson对应返回数据的根--><paramname="root">responseJson</param>responseJson对应Action类中的属性名，获取JSON数据的根节点位置，即所有内容6.
浏览器测试，在浏览器中输入，查看正确的输出结果6.1.2使用datagrid实现数据分页返回JSON数据格式7.在WebRoot目录中，创建index.jsp文件。导入EasyUI的CSS和JavaScript支持；并且在body主体中创建
datagrid组件的静态元素6.1.2使用datagrid实现数据分页所支持的CSS样式<table
id="dataLoad"></table><</bsocdriyp>t
type="text/javascript"
src="ui/jquery.min.js"charset="utf-8"></script><script
type="text/javascript"
src="ui/jquery.easyui.min.js"charset="utf-8"></script><script
type="text/javascript"
src="ui/locale/easyui-lang-zh_CN.js"charset="utf-8"></script></head><head><<bolindyk>rel="stylesheet"
type="text/css"
href="ui/themes/default/easyui.css"
/><link
rel="stylesheet"
type="text/dcastsa"ghrirde组f=件"的ui静/t态he元m素eEsa/iscyoUnI.所cs需s"要/>的的JS8.
在index.jsp文件中添加EasyUI
datagrid组件实现代码6.1.2使用datagrid实现数据分页index.jsp<script
type="text/javascript"
charset="utf-8">$(function(){loadingGrid();});function
loadingGrid()
{//省略……}</script>JQuery的入口函数请老师演示index.jsp的详细代码9.
在浏览器中输入，查看正确的输出结果6.1.2使用datagrid实现数据分页6.1.3学生实践练习实践时间：
45分钟使用第5章的mySshProject工程，实现用户信息的数据分页功能6.1.3学生实践练习在工程中，导入EasyUI的支持。编写服务器代码，参考本教材第5章5.1.2小节中的实现过程，步骤如下：在UsersDAO类中，定义底层分页方法和获取总行的方法。在UsersService中，定义封装分页的方法，返回Map封装的类型。在UsersAction类中，定义参数属性和响应方法。在struts.xml文件中，配置action类。在WebRoot目录中，创建index.jsp文件，编写视图层代码。在浏览器地址栏中，输入地址，完成显示1.
结合Ajax应用实现表单异步提交践习实练1.
使用Ajax实现表单异步交互技术讲解讲解时间：
45分钟实践时间：
45分钟6.2
EasyUI表单异步交互：内容预览使用Ajax实现表单异步交互在该案例的实现过程中，服务器端保存用户方法不需要重新定义。在视图显示方面，可以结合HTML
form表单显示；在页面请求方面，使用EasyUI的Ajax的提交方式进行请求；在控制器响应方面，同样需要将JSON格式数据响应给客户端。6.2.1使用Ajax实现表单异步交互1.
在CustomersAction中，定义处理请求的方法6.2.1使用Ajax实现表单异步交互CustomersAction.javapublic
String
add()
throws
Exception{this.getCustomersService().addCustomers(cus);Map<String,
Object>
map=new
HashMap<String,
Object>();map.put("msg","驾驶员信息添加成功!");this.setResponseJson(map);return"addSuc";}执行添加返回json数据类型结果2.
在struts.xml文件中，添加result导航6.2.1使用Ajax实现表单异步交互struts.xml<action
name="cusJsonAction"
class="CustomersAction"><result
name="addSuc"
type="json"><param
name="includeProperties">responseJson\.msg</param></result>……</action>仅选择responseJson元素下所有的msg元素6.2.1使用Ajax实现表单异步交互3.在index.jsp文件中，添加表单和Ajax代码index.jsp<div
id="add"style="margin-left:
40px;
margin-top:10px;"><form
id="frm"
method="post"><table><tr><td>驾驶员姓名：</td><td><input
name="cus.cusName"
type="text"
/></td></tr>//省略表单……<tr><td
colspan="2"
align="center"><input
type="button"onclick="send()"value="添加客户"/></td></tr></table></form></div>表单无须定义action提交地址，它通过Ajax方式提交按钮定义为button类型，而非
submit类型。并触发send事件6.2.2学生实践练习实践时间：
45分钟基于本章6.1.3小节的代码，实现用户信息添加功能6.2.2学生实践练习在UsersAction中，定义处理请求的方法。在struts.xml文件中，添加result导航地址。在index.jsp文件中，添加JavaSrcipt代码和HTML表单在浏览器地址栏中，输入地址，完成用户信息添加。总结使用EasyUI框架实现分页功能。
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 集成电路集成产品的焊接封装设备产品市场需求分析报告
- 汉语拼音02 i u ü 2024年新一年级语文暑假自学课（统编版2024秋）
- 高端橱柜市场发展预测和趋势分析
- 铂金市场洞察报告
- 锻压机市场需求与消费特点分析
- 罗茨鼓风机市场洞察报告
- 聚氨酯助剂产品市场需求分析报告
- 卤制食品市场分析结论与建议
- 人教版(2024)第二单元-汉语拼音《iuü》教学课件
- 部编版(2024)一年级道德与法治上册第四单元第13课《我们小点儿声》教学课件
- 外科医师晋升副主任（主任）医师例分析专题报告
- 小学心理健康教育《科学用脑效率高》教学课件
- DB22T 5014-2018 城镇供热系统调控设计标准
- 毒理学理论知识考核试题题库及答案
- DB33-T 862-2019固定资产投资项目节能评估导则
- 公司授权收款委托书英文版(3篇)
- 五年级上册数学课件-5.3 除数是整数的小数除法丨苏教版 (共11张PPT)
- 病员搬运技术课件
- 一篇散文《水银花开的夜晚》弄懂散文题型
- 云教版四年级劳动教案上
- 拼音田字格(A4打印模板)
评论
0/150
提交评论