easyUI 学习
)省份-城市-区域三级联动【struts2 + ajax +非数据库版】
(1)省份-城市-区域,基于jQuery的AJAX三级联动,用Struts2整合AJAX【非数据库版】
$.ajax(
{
type:"POST",
url:"${pageContext.request.contextPath}/findCityByProvinceRequest?id="+new Date().getTime(),
data:{"province":province},
success:function(backData,textStatus,ajax){}
}
);
注意:上面的每个key值不能乱写
<select id="province"> <option>选择省份</option> <option>广东</option> <option>湖南</option> </select> <select id="city"> <option>选择城市</option> </select> |
<script type="text/javascript"> $("#province").change(function(){ //删除原城市下拉框中的内容,除第一项外 $("#city option:gt(0)").remove(); var province = $("#province option:selected").text(); if("选择省份" != province){ $.ajax({ "type":"POST", "url":"${pageContext.request.contextPath}/findCityByProvince?time="+new Date().getTime(), "sendData":{"province":province}, "success":function(backData,textStatus,ajax){ //js对象 var city = backData.cityList; //jquery对象 var $city = $(city); //each() $city.each(function(){ //this表示每个城市 var $option = $("<option>" + this + "</option>"); $("#city").append( $option ); }); } }); } }); </script> |
public class ProvinceCityAction extends ActionSupport{ private String province;//广东 public void setProvince(String province) { this.province = province; } public String findCityByProvince() throws Exception { cityList = new ArrayList<String>(); if("广东".equals(province)){ cityList.add("湛江"); cityList.add("汕头"); }else if("湖南".equals(province)){ cityList.add("邵阳"); cityList.add("浏阳"); } return "ok"; } private List<String> cityList; public List<String> getCityList() { return cityList; } /** * var backData = { * "cityList":["邵阳","浏阳"] * } */ } |
<struts> <package name="timePackage" extends="json-default" namespace="/"> <global-results> <result name="ok" type="json"/> </global-results> <!-- 获取服务端时间 --> <action name="loadTimeRequest" class="cn.itcast.javaee.js.time.TimeAction" method="loadTimeMethod"/> <!-- 检查用户名和密码是否存在 --> <action name="checkRequest" class="cn.itcast.javaee.js.register.RegisterAction" method="checkMethod"/> <!-- 根据省份查询城市 --> <action name="findCityByProvince" class="cn.itcast.javaee.js.provincecity.ProvinceCityAction" method="findCityByProvince"/> </package> </struts> |
二)学会查阅文档,使用jQuery-EasyUI,构建自已的Web页面
(1)网址:www.jeasyui.com,下载并参考学习<<jQuery EasyUI v1.3.5官方API中文版.exe>>手册
(2)什么是jQuery-EasyUI
参见<<什么是EasyUI.JPG>>
是一种第三方组织开发的一款基于jQuery的,简单易用的,功能强大的
WEB[后台前端]JavaScript现成的组件库
注意:今天的EasyUI组件库的版本较高,需要高版本浏览器支持,
中低版本浏览器会有不能正常执行的情况
(3)JavaScript,AJAX,JSON,jQuery,EasyUI分别能解决什么问题
JS:基于浏览器对web页面中的节点进行操作,比较麻烦
jQuery:基于浏览器简化对web页面中的节点进行操作,做到了write less do more
AJAX:基于浏览器与服务端进行局部刷新的异步通讯编程模式
JSON:简化自定义对象的创建与AJAX数据交换轻量级文本
EasyUI:快速基于现成的组件创建自已的web页面
组件:是指已经由第三方开源组织写好的,直接可以使用的功能界面,例如:form,layout,tree...
注意:我们学的都是零散的组件,项目中需要将其装配起来,方可构建完整的web页面,
EasyUI只是众多前端WEB组件之一
(4)jQuery-EasyUI快速入门----可折叠功能的面板
第一步:创建一个js-day05这么一个web工程
第二步:在WebRoot目录下创建00-base.html
第三步:在WebRoot目录下创建js和themes目录,导入官方文件
参见<< jquery-easyui-1.3.6文件夹>>
第四步:在00-base.html 文件的<head>标签中引入如下文件
<!-- 引入外部CSS文件 --> <link rel="stylesheet" href="../themes/icon.css" type="text/css"></link> <link rel="stylesheet" href="../themes/default/easyui.css" type="text/css"></link> <!-- 引入外部JS文件 --> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery.easyui.min.js"></script> |
第五步:在00-base.html 文件的<body>标签中创建如下<div>标签
<div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;" title="我的面板" iconCls="icon-save" collapsible="true"> 内容<br/> 内容<br/> 内容<br/> 内容<br/> </div> |
(5)EasyUI组件
(01) layout布局
<!-- 布局面板 --> <div data-options="fit:true" id="cc" class="easyui-layout" style="width:600px;height:400px;"> <!-- 区域面板 --> <div data-options="region:'north',title:'北',split:false,collapsible:true" style="height:100px;"></div> <div data-options="region:'south',title:'南',split:false,collapsible:true" style="height:100px;"></div> <div data-options="region:'east',title:'东',split:false,collapsible:false,minWidth:150,maxWidth:150" style="width:100px;"></div> <div data-options="region:'west',title:'西',split:false,collapsible:false,minWidth:150,maxWidth:150" style="width:100px;"></div> <div data-options="region:'center',title:'中',iconCls:'icon-reload',href:'/js-day05/06_image.html',collapsible:false" style="padding:5px;background:#eee;"></div> </div> |
<script type="text/javascript"> //浏览器加载web页面时触发 $(function(){ //将北边面板折叠,字符串双引单引均可 $('#cc').layout('collapse','north'); //休息3秒 window.setTimeout(function(){ //将南边面板折叠,字符串双引单引均可 $('#cc').layout('collapse','south'); },"3000"); }); </script> |
<body class="easyui-layout"> <!-- 北 --> <div data-options="region:'north'" style="height:150px"></div> <!-- 中 --> <div data-options="region:'center'"> <!-- 将中拆分边西和中二部份 --> <div class="easyui-layout" data-options="fit:true"> <!-- 东 --> <div data-options="region:'west'" style="width:200px"></div> <!-- 中 --> <div data-options="region:'center'"></div> </div> </div> </body> |
(02)accordion分类
<!-- 容器 --> <div data-options="border:true,animate:true,multiple:false,selected:-1" id="aa" class="easyui-accordion" style="width:300px;height:500px;"> <!-- 面板 --> <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;"> 内容1 </div> <div title="Title2" data-options="iconCls:'icon-reload'" style="padding:10px;"> 内容2 </div> <div title="Title3" data-options="iconCls:'icon-reload',collapsible:true"> 内容3 </div> </div> |
<script type="text/javascript"> $(function(){ //增加一个面板 $("#aa").accordion("add",{ "title":"Title4", "content":"内容4", "selected":false, "iconCls":"icon-search" }); //休息3秒 window.setTimeout(function(){ //删除4号面板 $("#aa").accordion("remove",3); //取消选择1号面板 $("#aa").accordion("unselect",0); },"3000"); }); </script> |
(3)linkbutton按钮
<a id="btn-add" class="easyui-linkbutton" data-options="iconCls:'icon-add'"> 增加 </a> <a id="btn-find" class="easyui-linkbutton" data-options="iconCls:'icon-search'"> 查询 </a> <a id="btn-update" class="easyui-linkbutton" data-options="iconCls:'icon-edit'"> 修改 </a> <a id="btn-delete" class="easyui-linkbutton" data-options="iconCls:'icon-remove'"> 删除 </a> |
<script type="text/javascript"> /* $("#btn-add").click(function(){ //将该按失效 $("#btn-add").linkbutton("disable"); }); $("#btn-add").dblclick(function(){ //将该按失效 $("#btn-add").linkbutton("disable"); }); */ //参数一:字符串类型的事件,多个事件之间通过空格分隔,事件名称符合jquery事件名写法 //参数二:处理函数 $("#btn-add").bind("click dblclick",function(){ //将该按失效 $("#btn-add").linkbutton("disable"); }); </script> |
(04)tabs选项卡
<!-- 容器面板 --> <div id="tt" class="easyui-tabs" style="width:500px;height:250px;" data-options="plain:false,border:true,tools:[{ iconCls:'icon-add', handler:function(){ alert('添加') } },{ iconCls:'icon-remove', handler:function(){ alert('删除') } }],selected:-1"> <!-- 选项卡面板 --> <div title="Tab1" data-options="closable:true" style="padding:20px"> tab1 </div> <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;"> tab2 </div> <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;"> tab3 </div> </div> |
<script type="text/javascript"> $(document).ready(function(){ $("#tt").tabs("add",{ "title":"Tab4", "content":"tab4", "selected":false, "closable":true }); }); </script> |
<script type="text/javascript"> //定位四个按钮,同时添加单击事件 $("a").click(function(){ //获取按钮的文本 var tip = $(this).text(); //去空格 tip = $.trim(tip); //如果是"增加部门" if("增加部门" == tip){ //是否已有相同的tabs选项卡打开 var flag = $("#tt").tabs("exists",tip); //如果不存在相同的tabs选项卡打开 if(!flag){ //创建一个tabs选项卡 $("#tt").tabs("add",{ "title":tip, "href":"${pageContext.request.contextPath}/addGroup.jsp", "selected":true, "closable":true }); } } }); </script> |
(05)pagination分页框
<!-- total:记录总数100 pageSize:每页显示多少条记录5 pageNumber:当前页号1 pageList:[5,10,15]表示可供选择中每页显示多少条记录, 注意:pageSize的值必须是pageList数组值之一 --> <div id="pp" class="easyui-pagination" data-options="total:100,pageSize:5,pageNumber:1,pageList:[5,10,15],showPageList:true,showRefresh:false,afterPageText:'页'" style="background:#efefef;border:1px solid #ccc;width:400px"> </div> |
<script type="text/javascript"> $("#pp").pagination({ //pageNumber当前页号,例如1 //pageSize获取多少条记录,例如:5 //以上二个参数,需要谁,就接收谁,不一定二个都同时出现,参数名可以任意 "onSelectPage":function(pageNumber,pageSize){ alert(pageNumber + ":" + pageSize); } }); </script> |
一)学会查阅文档,使用jQuery-EasyUI,构建自已的Web页面
(1)网址:www.jeasyui.com,下载并参考学习<<jQuery EasyUI v1.3.5官方API中文版.exe>>手册
(2)什么是jQuery-EasyUI
参见<<什么是EasyUI.JPG>>
是一种第三方组织开发的一款基于jQuery的,简单易用的,功能强大的
WEB前端JavaScript现成的组件库
注意:今天的EasyUI组件库的版本较高,需要高版本浏览器支持,
中低版本浏览器会有不能正常执行的情况
(3)JavaScript,AJAX,JSON,jQuery,EasyUI分别能解决什么问题
JS:基于浏览器对web页面中的节点进行操作,比较麻烦
jQuery:基于浏览器简化对web页面中的节点进行操作,做到了write less do more
AJAX:基于浏览器与服务端进行局部刷新的异步通讯编程模式
JSON:简化自定义对象的创建与AJAX数据交换轻量级文本
EasyUI:快速基于现成的组件创建自已的web页面
组件:是指已经由第三方开源组织写好的,直接可以使用的功能界面,例如:form,layout,tree...
注意:我们学的都是零散的组件,项目中需要将其装配起来,方可构建完整的web页面,
EasyUI只是众多前端WEB组件之一
(4)jQuery-EasyUI快速入门----可折叠功能的面板
第一步:创建一个js-day05这么一个web工程
第二步:在WebRoot目录下创建00-base.html
第三步:在WebRoot目录下创建js和themes目录,导入官方文件
参见<< jquery-easyui-1.3.6文件夹>>
第四步:在00-base.html 文件的<head>标签中引入如下文件
<!-- 引入外部CSS文件 --> <link rel="stylesheet" href="../themes/icon.css" type="text/css"></link> <link rel="stylesheet" href="../themes/default/easyui.css" type="text/css"></link> <!-- 引入外部JS文件 --> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery.easyui.min.js"></script> |
第五步:在00-base.html 文件的<body>标签中创建如下<div>标签
<div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;" title="我的面板" iconCls="icon-save" collapsible="true"> 内容<br/> 内容<br/> 内容<br/> 内容<br/> </div> |
(5)EasyUI组件
(06)form表单
》validatebox验证框
姓名:必填/1-6个字符/必填中文
邮箱:必填/1-30个字符/必填符合邮箱格式/后缀必须是com或cn
<div style="margin:100px"></div> 用户名: <input id="vv"/> <script type="text/javascript"> $("#vv").validatebox({ required:true, validType:["length[1,4]","zhongwen"] }); </script> <script type="text/javascript"> //自定义验证规则 $.extend($.fn.validatebox.defaults.rules, { zhongwen : { validator: function(value){//value表示在文本框中输入的内容 if(/^[\u3220-\uFA29]+$/.test(value)){ return true; } }, message: "用户名必须填中文" } }); </script> |
思考:检查邮箱的扩展名只能是{'com','cn'}
》combobox下拉列表框
设置下拉列表框默认值
你所在的城市: <select id="cc" class="easyui-combobox" name="city" style="width:150px;"> <option>aitem1</option> <option>bitem1</option> <option>bitem2</option> <option>citem1</option> <option>citem2</option> <option>citem3</option> <option>ditem1</option> <option>ditem2</option> <option>ditem3</option> <option>ditem4</option> </select> <script type="text/javascript"> $(function(){ $("#cc").combobox("setValue","长沙"); }); </script> |
你所在的城市: <input id="cc" name="city" value="广州"/> <script type="text/javascript"> $("#cc").combobox({ url:"combobox_data.json", valueField:"id", textField:"text" }); //textField表示在下拉框中看得见的内容,<option>长沙</option> //valueField表示在下拉框中看不见的内容,用于向后台传递数据<option value="cs">长沙</option> </script> |
combobox_data.json:
[ { "id":"gz", "text":"广州" }, { "id":"zs", "text":"中山" }, { "id":"fs", "text":"佛山" }, { "id":"sz", "text":"深圳", "selected":true }, { "id":"yj", "text":"阳江" } ] |
》datebox日期选择框
显示yyyy-mm-dd格式,
添加<script type="text/javascript" src="locale/easyui-lang-zh_CN.js"></script>
选中日期并显示选中的日期
入职时间:<input id="dd" type="text"></input> <script type="text/javascript"> $("#dd").datebox({ required:true }); </script> <script type="text/javascript"> $("#dd").datebox({ onSelect:function(date){ alert(date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()); } }); </script> |
》numberspinner数字微调框
设置数字微调框中的值
获取数字微调框中的值
商品数量:<input type="text" size="2px" value="1"/><span></span> <hr/> <input id="ss" required="required" style="width:80px;"> <script type="text/javascript"> $("#ss").numberspinner({ value:1, min:1, max:100, editable:true }); </script> <script type="text/javascript"> $("#ss").numberspinner({ onSpinUp:function(){ //获取numberspinner的当前值 var value = $("#ss").numberspinner("getValue"); //将numberspinner的当前值设置到商品数量文本框中 $("input:first").val(value).css("color","red"); //如果value值为100 if( value == 100 ){ $("span:first").html("商品已满,不能再购买了").css("color","blue"); $("input:first").attr("disabled","disabled"); } }, onSpinDown:function(){ //获取numberspinner的当前值 var value = $("#ss").numberspinner("getValue"); //将numberspinner的当前值设置到商品数量文本框中 $("input:first").val(value).css("color","red"); //如果value值小于100 if( value < 100 ){ $("span:first").html(""); $("input:first").removeAttr("disabled"); } } }); </script> |
》slider滑动条框
拖动滑块,将值同步显示到span标签中
身高:<span>150</span><span id="tip"></span> <div style="margin:50px"> <input id="ss" class="easyui-slider" value="0" style="width:600px;height:500px" data-options="max:180,min:150,mode:'v',showTip:true,rule:[150,'|',160,'|',170,'|',180]"/> </div> <script type="text/javascript"> $("#ss").slider({ onChange:function(newValue){ $("span:first").text(newValue); if(newValue == 180){ $("#tip").text("你真高呀"); }else if(newValue >= 170){ $("#tip").text("你不错呀"); }else if(newValue >= 160){ $("#tip").text("你可以呀"); } } }); </script> |
(07)progressbar进度条
》每隔1秒让进度条按随机数填充,直至充满进度条刻度
进度条: <div id="p" style="width:400px;"></div> <script type="text/javascript"> $("#p").progressbar({ width:"auto", height:44, value:0 }); </script> <input type="button" value="开始" style="font-size:111px"/> <script type="text/javascript"> var timeID = null; //随机产生1-9之间的整数,包含1和9 function getNum(){ return Math.floor(Math.random()*9)+1; } $(":button").click(function(){ timeID = window.setInterval(function(){ //获取随机数,例如:9 var num = getNum(); //获取进度条当前值,例如:99 var value = $("#p").progressbar("getValue"); //如果随机数加当前值小于100的话 if(value + num < 100){ //填充进度条当前值 $("#p").progressbar("setValue",value+num); }else{ //将进度条当前值设置为100 $("#p").progressbar("setValue",100); //停止定时器 window.clearInterval(timeID); //将"开始"按钮生效 $(":button").removeAttr("disabled"); } },200); //将"开始"按钮失效 $(this).attr("disabled","disabled"); }); </script> |
(08)window窗口
》单击按钮,打开或关闭一个窗口
<input id="open1" type="button" value="打开窗口1"/> <input id="open2" type="button" value="打开窗口2"/> <hr/> <div id="win1"></div> <div id="win2"></div> <script type="text/javascript"> $("#open1").click(function(){ $("#win1").window({ title:"我的窗口1", width:200, height:300, top:100, left:400, collapsible:false, minimizable:false, maximizable:false, closable:true, draggable:false, resizable:false, shadow:false, modal:false, href:"08_datebox.html" }); }); $("#open2").click(function(){ $("#win2").window({ title:"我的窗口2", width:200, height:300, top:100, left:800, collapsible:false, minimizable:false, maximizable:false, closable:true, draggable:false, resizable:false, shadow:false, modal:false }); }); </script> |
(09)dialog对话框
》单击按钮,打开或关闭一个对话框
<input id="open1" type="button" value="打开对话框1"/> <hr/> <div id="dd1"></div> <script type="text/javascript"> $("#open1").click(function(){ $("#dd1").dialog({ width:300, height:400, left:400, top:100, title:"对话框1", toolbar:[ { text:'编辑', iconCls:'icon-edit', handler:function(){alert('edit')} }, { text:'帮助', iconCls:'icon-help', handler:function(){alert('help')} } ], buttons:[ { text:'确定', handler:function(){alert('ok')} }, { text:'关闭', handler:function(){ //关闭本对话框 $("#dd1").dialog("close"); } } ], href:"07_combobox_2.html" }); }); </script> |
(10)messager消息窗口
》单击按钮,弹出警告框
》单击按钮,弹出确认框
》单击按钮,弹出显示框
》单击按钮,弹出输入框
<input type="button" value="警告框"/> <input type="button" value="确认框"/> <input type="button" value="输入框"/> <input type="button" value="显示框"/> <hr/> <div style="margin:200px"></div> <script type="text/javascript"> $(":button").click(function(){ var tip = $(this).val(); tip = $.trim(tip); if("警告框" == tip){ $.messager.alert("我的警告框","不能睡觉了","warning"); }else if("确认框" == tip){ $.messager.confirm("我的确认框","你确定在关闭本窗口吗?",function(flag){ alert(flag); }); }else if("输入框" == tip){ $.messager.prompt("我的输入框","你决定要学习Android还是JavaEE吗?",function(value){ alert(value); }); }else if("显示框" == tip){ $.messager.show({ title:"我的显示框", msg:"不要太区分Android和JavaEE了", showType:"fade", width:200, height:200, timeout:1000 }); } }); </script> |
(11)tree树
》选中树中某个子节点,弹出选中的内容
》用树替代linkButton按钮
<ul id="ttt" class="easyui-tree" style="width:222px"> <li> <span>第一章</span> </li> <li> <span>第二章</span> <ul> <li> <span>第一节</span> </li> <li> <span>第二节</span> <ul> <li>第一条</li> <li>第二条</li> <li>第三条</li> </ul> </li> </ul> </li> </ul> |
<ul id="ttt"></ul> <script type="text/javascript"> $("#ttt").tree({ url:"tree_data.json", lines:true }); </script> <script type="text/javascript"> $("#ttt").tree({ onClick:function(node){ alert(node.text); } }); </script> |
tree_data.json:
[ { "id":1, "text":"第一章" }, { "id":2, "text":"第二章", "state":"closed", "children":[ { "id":21, "text":"第一节" }, { "id":22, "text":"第二节" }, { "id":23, "text":"第三节", "state":"closed", "children":[ { "id":231, "text":"第一条" }, { "id":232, "text":"第二条" } ] } ] } ] |
(12)datagrid数据表格
》参见E:\开发类库\jquery-easyui-1.3.6\demo\datagrid(9-数据网格)\products.json
》 DateGrid会异步以POST方式向服务器传入二个参数:page和rows二个参数,服务端需要哪个,就接收哪个参数
* page:需要显示的页号
* rows:需要获取多少条记录
开发过程:
DB:
use js; drop table if exists users; create table users( id int(5) primary key auto_increment, name varchar(4) not null, sal int(5) not null ); insert into users(name,sal) values('小赵君',1000); insert into users(name,sal) values('中赵君',1500); insert into users(name,sal) values('大赵君',2000); insert into users(name,sal) values('赵小君',2500); insert into users(name,sal) values('赵中君',3000); insert into users(name,sal) values('赵大君',3500); insert into users(name,sal) values('赵君小',4000); insert into users(name,sal) values('赵君中',4500); insert into users(name,sal) values('赵君大',5000); insert into users(name,sal) values('赵君',5500); select id,name,sal from users; |
Entity:
public class User { private Integer id; private String name; private Integer sal; public User(){} public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public Integer getSal() { return sal; } public void setSal(Integer sal) { this.sal = sal; } } public class PageBean { private Integer currPageNO; private Integer perPageNO; private Integer allRecordNO; private Integer allPageNO; private List<User> userList = new ArrayList<User>(); public PageBean(){} public Integer getCurrPageNO() { return currPageNO; } public void setCurrPageNO(Integer currPageNO) { this.currPageNO = currPageNO; } public Integer getPerPageNO() { return perPageNO; } public void setPerPageNO(Integer perPageNO) { this.perPageNO = perPageNO; } public Integer getAllRecordNO() { return allRecordNO; } public void setAllRecordNO(Integer allRecordNO) { this.allRecordNO = allRecordNO; } public Integer getAllPageNO() { return allPageNO; } public void setAllPageNO(Integer allPageNO) { this.allPageNO = allPageNO; } public List<User> getUserList() { return userList; } public void setUserList(List<User> userList) { this.userList = userList; } } |
Util:
public class JdbcUtil { private static ComboPooledDataSource dataSource = new ComboPooledDataSource(); public static ComboPooledDataSource getDataSource() { return dataSource; } } |
src/c3p0-config.xml
<?xml version="1.0" encoding="UTF-8"?> <c3p0-config> <default-config> <property name="driverClass">com.mysql.jdbc.Driver</property> <property name="jdbcUrl">jdbc:mysql://127.0.0.1:3306/js</property> <property name="user">root</property> <property name="password">root</property> <property name="acquireIncrement">2</property> <property name="initialPoolSize">5</property> <property name="minPoolSize">1</property> <property name="maxPoolSize">5</property> </default-config> </c3p0-config> |
Dao:
public class UserDao { //select count(id) from users where 1=1 and name like '%赵%'; public Integer getAllRecordNO(String sql) throws Exception{ QueryRunner runner = new QueryRunner(JdbcUtil.getDataSource()); Long temp = (Long) runner.query(sql,new ScalarHandler()); return temp.intValue(); } //select id,name,sal from users where 1=1 and name like '%赵%' limit ?,?; public List<User> findAllRecord(String sql,Integer start,Integer size) throws Exception{ QueryRunner runner = new QueryRunner(JdbcUtil.getDataSource()); return runner.query(sql,new BeanListHandler<User>(User.class),new Object[]{start,size}); } } |
Service:
public class UserService { private UserDao userDao = new UserDao(); //show("赵",2); public PageBean show(String keywords,Integer currPageNO) throws Exception{ PageBean pageBean = new PageBean(); String sqlA = "select count(id) from users where 1=1"; String sqlB = "select id,name,sal from users where 1=1"; if(keywords != null && keywords.trim().length() > 0){ sqlA += " and name like '%" + keywords + "%'"; sqlB += " and name like '%" + keywords + "%'"; } pageBean.setCurrPageNO(currPageNO); Integer allRecordNO = userDao.getAllRecordNO(sqlA); pageBean.setAllRecordNO(allRecordNO); Integer allPageNO = null; if(pageBean.getAllRecordNO() % pageBean.getPageSize() == 0){ allPageNO = pageBean.getAllRecordNO() / pageBean.getPageSize(); }else{ allPageNO = pageBean.getAllRecordNO() / pageBean.getPageSize() + 1; } pageBean.setAllPageNO(allPageNO); Integer size = pageBean.getPageSize(); Integer start = (pageBean.getCurrPageNO()-1) * size; sqlB += " limit ?,?"; List<User> userList = userDao.findAllRecord(sqlB,start,size); pageBean.setUserList(userList); return pageBean; } } |
Action:
public class UserServlet extends HttpServlet { public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { try{ request.setCharacterEncoding("UTF-8"); String keywords = request.getParameter("keywords"); if(keywords==null || keywords.trim().length()==0){ keywords = ""; } System.out.println("keywords=" + keywords);//赵 String temp = request.getParameter("page"); if(temp == null || temp.trim().length()==0){ temp = "1"; } Integer currPageNO = Integer.parseInt(temp); System.out.println("currPageNO=" + currPageNO);//2 UserService userService = new UserService(); PageBean pageBean = userService.show(keywords,currPageNO); Map<String,Object> map = new LinkedHashMap<String,Object>(); map.put("total",pageBean.getAllRecordNO()); map.put("rows",pageBean.getUserList()); JSONArray jsonArray = JSONArray.fromObject(map); String jsonJAVA = jsonArray.toString(); jsonJAVA = jsonJAVA.substring(1,jsonJAVA.length()-1); response.setContentType("text/html;charset=UTF-8"); PrintWriter pw = response.getWriter(); pw.write(jsonJAVA); pw.flush(); pw.close(); }catch(Exception e){ e.printStackTrace(); } } } |
WebRoot/userList.jsp
<%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <!-- 引入外部CSS文件 --> <link rel="stylesheet" href="${pageContext.request.contextPath}/themes/icon.css" type="text/css"></link> <link rel="stylesheet" href="${pageContext.request.contextPath}/themes/default/easyui.css" type="text/css"></link> <!-- 引入外部JS文件 --> <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.easyui.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/locale/easyui-lang-zh_CN.js"></script> </head> <body> 姓名: <input type="text" size="10px" id="name"/> <input type="button" value="查询" onclick="find()"/> <table id="dg"></table> <script type="text/javascript"> function find(){ $("#dg").datagrid("load",{ "keywords" : $.trim( $("#name").val() ) }); } </script> <script type="text/javascript"> $("#dg").datagrid({ width:400, url:"${pageContext.request.contextPath}/UserServlet", fitColumns:true, columns:[[ {field:'id',title:'编号',width:100}, {field:'name',title:'姓名',width:100}, {field:'sal',title:'薪水',width:100} ]], singleSelect:true, pagination:true, pageNumber:1, pageSize:2, pageList:[2] }); </script> </body> </html> |
easyUI 学习的更多相关文章
- Asp.Net MVC4 + Oracle + EasyUI 学习 序章
Asp.Net MVC4 + Oracle + EasyUI 序章 -- 新建微软实例 本文链接:http://www.cnblogs.com/likeli/p/4233387.html 1. 简 ...
- jQuery EasyUI学习资源汇总
jQuery EasyUI学习资源汇总 EasyUi – 1.入门 EasyUi – 2.布局Layout + 3.登录界面 EasyUi – 4.datwagrid 学习Jquery EasyUI的 ...
- EasyUI学习(一)——EasyUI入门
EasyUI学习总结(一)——EasyUI入门 一.EasyUI下载 EasyUI官方下载地址:http://www.jeasyui.com/download/index.php,目前最新的版本是:j ...
- 前端框架Easyui学习积累
前端框架Easyui学习积累 1.easyui textbox 赋值:$("#id").textbox("setValue","xx"); ...
- easyUI学习笔记二
1. 拖拉大小 <!DOCTYPE html> <html> <head> <title>easyui学习</title> <scr ...
- easyUI学习笔记一
1.引用js文件 <script type="text/javascript" src = jquery-easyui/jquery.min.js> </scri ...
- Asp.Net MVC4 + Oracle + EasyUI 学习 第一章
Asp.Net MVC4 + Oracle + EasyUI 第一章 --操作数据和验证 本文链接:http://www.cnblogs.com/likeli/p/4234238.html 文章集合 ...
- easyui学习日记20141213
一.前言 对于页面的设计一直都不是很懂.看到easyui样式简洁大方的样子,就心里痒痒,趁这段时间工作没什么项目的同时充充电.同时给自己做个笔记吧. 首先需要下载easyui的包,有两种版本,支持GP ...
- JQuery EasyUI学习框架
前言 前端技术,新项目的开发拟使用EasyUI框架(基于EasyUI丰富UI组件库),项目负责人的提示EasyUI分配给我这个任务.发展前,我需要这对于一个新手EasyUI框架学习一些基本的入门.记录 ...
随机推荐
- python2.7安装django1.8后提示django-admin.py命令不存在
ln -s /usr/local/Python2.7/bin/django-admin.py /usr/local/bin/django-admin.py 将python命令目录下的django-ad ...
- 使用ghost装完系统后出现“引用了一个不可用的位置”
用GHOST版光盘安装完系统后,只有一个C盘,无法点桌面刷新,然后提示“D:/我的文档引用了一个不可用的位置.... 1.在管理员账户下定位到如下键值:“HKEY_CURRENT_USER\Softw ...
- day-12函数对象
函数默认值的细节 如果函数的默认参数的默认值为变量,在所属函数定义阶段一执行就被确定为当时变量存放的值,后面变化不会再变化 a = 100 def fn(num=a): a = 200 fn() 三元 ...
- TCP连接异常:broken pipe 和EOF
本文介绍3种TCP连接异常的情况. 1.server端没有启动,client尝试连接 ./client dial failed: dial tcp 127.0.0.1:8080: connect: c ...
- jquery 一键复制文本到剪切板
<a id="copy" data-clipboard-text="123456">复制文本</a> $(function(){ var ...
- abaqus 帮助文档 Substructure(子结构) 理论
对于静态问题,可以缩减到只保留Retain Node的刚度矩阵和载荷矩阵: 但对于动力问题,还需要增加内部节点作为retain node,但这样会有点麻烦,更为常用的方式是保留子结构的模态和振型.
- 关于CPU 架构与指令集的一些个人理解
关于CPU 架构与指令集的一些个人理解 (理解不一定正确,只是目前的理解) 1.一般所说的X86,是指基于Intel X86架构处理器的一套指令集,即X86指令集: 2.CPU的架构是最底层的,是处理 ...
- Eclipse Memory Analyzer 分析内存泄露
OutOfMemoryError示例 代码 package com.walson.heap; import java.util.ArrayList;import java.util.List; /** ...
- 20175236 《Java程序设计》实验一(Java开发环境的熟悉)实验报告
一.实验报告封面 课程:Java程序设计 班级:1752班 姓名:温丰帆 学号:20175236 指导教师:娄嘉鹏 实验日期:2019年4月2日 实验时间:13:45 - 15:25 实验序号:实验一 ...
- centos7安装nginx,以及使用node测试反向代理
1.添加nginx的安装源 vi /etc/yum.repos.d/nginx.repo 2.输入下面内容,并保存退出 [nginx] name=nginx repo baseurl=http://n ...