)省份-城市-区域三级联动【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 学习的更多相关文章

  1. Asp.Net MVC4 + Oracle + EasyUI 学习 序章

    Asp.Net MVC4 + Oracle + EasyUI  序章 -- 新建微软实例 本文链接:http://www.cnblogs.com/likeli/p/4233387.html 1.  简 ...

  2. jQuery EasyUI学习资源汇总

    jQuery EasyUI学习资源汇总 EasyUi – 1.入门 EasyUi – 2.布局Layout + 3.登录界面 EasyUi – 4.datwagrid 学习Jquery EasyUI的 ...

  3. EasyUI学习(一)——EasyUI入门

    EasyUI学习总结(一)——EasyUI入门 一.EasyUI下载 EasyUI官方下载地址:http://www.jeasyui.com/download/index.php,目前最新的版本是:j ...

  4. 前端框架Easyui学习积累

    前端框架Easyui学习积累 1.easyui textbox 赋值:$("#id").textbox("setValue","xx"); ...

  5. easyUI学习笔记二

    1.  拖拉大小 <!DOCTYPE html> <html> <head> <title>easyui学习</title> <scr ...

  6. easyUI学习笔记一

    1.引用js文件 <script type="text/javascript" src = jquery-easyui/jquery.min.js> </scri ...

  7. Asp.Net MVC4 + Oracle + EasyUI 学习 第一章

    Asp.Net MVC4 + Oracle + EasyUI  第一章 --操作数据和验证 本文链接:http://www.cnblogs.com/likeli/p/4234238.html 文章集合 ...

  8. easyui学习日记20141213

    一.前言 对于页面的设计一直都不是很懂.看到easyui样式简洁大方的样子,就心里痒痒,趁这段时间工作没什么项目的同时充充电.同时给自己做个笔记吧. 首先需要下载easyui的包,有两种版本,支持GP ...

  9. JQuery EasyUI学习框架

    前言 前端技术,新项目的开发拟使用EasyUI框架(基于EasyUI丰富UI组件库),项目负责人的提示EasyUI分配给我这个任务.发展前,我需要这对于一个新手EasyUI框架学习一些基本的入门.记录 ...

随机推荐

  1. 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 ...

  2. 使用ghost装完系统后出现“引用了一个不可用的位置”

    用GHOST版光盘安装完系统后,只有一个C盘,无法点桌面刷新,然后提示“D:/我的文档引用了一个不可用的位置.... 1.在管理员账户下定位到如下键值:“HKEY_CURRENT_USER\Softw ...

  3. day-12函数对象

    函数默认值的细节 如果函数的默认参数的默认值为变量,在所属函数定义阶段一执行就被确定为当时变量存放的值,后面变化不会再变化 a = 100 def fn(num=a): a = 200 fn() 三元 ...

  4. TCP连接异常:broken pipe 和EOF

    本文介绍3种TCP连接异常的情况. 1.server端没有启动,client尝试连接 ./client dial failed: dial tcp 127.0.0.1:8080: connect: c ...

  5. jquery 一键复制文本到剪切板

    <a id="copy" data-clipboard-text="123456">复制文本</a> $(function(){ var ...

  6. abaqus 帮助文档 Substructure(子结构) 理论

    对于静态问题,可以缩减到只保留Retain Node的刚度矩阵和载荷矩阵: 但对于动力问题,还需要增加内部节点作为retain node,但这样会有点麻烦,更为常用的方式是保留子结构的模态和振型.

  7. 关于CPU 架构与指令集的一些个人理解

    关于CPU 架构与指令集的一些个人理解 (理解不一定正确,只是目前的理解) 1.一般所说的X86,是指基于Intel X86架构处理器的一套指令集,即X86指令集: 2.CPU的架构是最底层的,是处理 ...

  8. Eclipse Memory Analyzer 分析内存泄露

    OutOfMemoryError示例 代码 package com.walson.heap; import java.util.ArrayList;import java.util.List; /** ...

  9. 20175236 《Java程序设计》实验一(Java开发环境的熟悉)实验报告

    一.实验报告封面 课程:Java程序设计 班级:1752班 姓名:温丰帆 学号:20175236 指导教师:娄嘉鹏 实验日期:2019年4月2日 实验时间:13:45 - 15:25 实验序号:实验一 ...

  10. centos7安装nginx,以及使用node测试反向代理

    1.添加nginx的安装源 vi /etc/yum.repos.d/nginx.repo 2.输入下面内容,并保存退出 [nginx] name=nginx repo baseurl=http://n ...