Jpage分页+Hibernate+Ajax+jquery+JSON通用技术二_H5之家

6.为使界面美观使用JQuery

<%@ page language="java" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>客户</title>
<script type="text/javascript" src="${basePath }ui/common/script/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="${basePath }ui/common/script/jquery.corners.min.js"></script>-
<link href="${basePath}ui/client/css/styles.css" type="text/css">

<link type="text/css" href="${basePath }ui/common/jpage/css/jpage.css"/>
<script type="text/javascript">
list();

/*******************************删除一个对象时运行*************************************/
function ajaxDel(clientID)
{
if(confirm("确定要删除吗？")){
$.ajax({
type: "POST",
url: "${basePath}client.do?method=dodel&clientID="+clientID,
error: function(){
$("#info").val("服务器繁忙，请稍后重试...");
},
success: function(msg){
if(msg=="err")
{
$("#info").val("服务器繁忙，数据删除失败，请稍后重试...");
}
else{
play();
}
list();
}
});
}
}

/*************************删除多个对象时运行*******************************************/
function ajaxDelAll(clientID)
{
$.ajax({
type: "POST",
url: "${basePath}client.do?method=dodelmore&clientID="+clientID,
error: function(){
$("#info").val("服务器繁忙，请稍后重试...");
},
success: function(msg){
if(msg=="err")
{
$("#info").val("服务器繁忙，数据删除失败，请稍后重试...");
}
else
{
play();
list();
}
}
});
}
/***************************************************************************************/

function list() {

/*方法名称*/
var method;

/*列表容器*/
var content;

/*加载初始化事件*/
ajax();

/*绘制列表*/
function draw(json)
{
content = '<table cellpadding="0" cellspacing="0">';
content += '<tr>';
/*绘制表头内容*/
content += '<td><input type="checkbox"></input></td>';
content += '<td>客户名称</td>';
content += '<td>电话</td>';
content += '<td>负责人</td>';
content += '<td>操作</td>';
content += '</tr>';

/*绘制数据*/
for(var i=0; i<json.list.length; i++)
{
content += '<tr>';
content += '<td><input type="checkbox"/></td>';
content += '<td><a href="${basePath}client.do?method=todetail&clientID=' + json.list[i].clientID + '">' + json.list[i].name + '</a></td>';
content += '<td>' + json.list[i].phone + '</td>';
content += '<td>' + json.list[i].user.name+ '</td>';
content += '<td><a href="${basePath}client.do?method=toupdate&clientID=' + json.list[i].clientID + '">编辑</a> | ';
content += '<a href="javascript:ajaxDel('+json.list[i].clientID+')">删除</a></td></tr>';
content += '</tr>';
}
content += '</table>';

/*绘制分页工具条*/
content += '<table cellpadding="0" cellspacing="0">';
content += '<tr><td>';
content += '<table cellpadding="0" cellspacing="0">';
content += '<tr><td valign="middle"><a>批量删除  </a><select title="每页显示条数">';
$.each([5,10,20,30,40],function(i,n){
var flag = false;
if(json.pageSize == n) flag = true;
if(flag) {
content += '<option value="' + n + '" selected="selected">' + n + '</option>';
} else {
content +='<option value="' + n + '">' + n + '</option>';
}
});
content += '</select>   </td>';
content += '<td valign="middle"><div></div></td>';
content += '<td valign="middle"><div title="首页"></div></td>';
content += '<td valign="middle"><div title="上一页"></div></td>';
content += '<td valign="middle"><div></div></td>';
content += '<td valign="middle"> 第 <input type="text" value="' + json.currentPage + '" size="4" title="页码"> 页 / 共 <span>' + json.totalPages + '</span> 页 </td>';
content += '<td valign="middle"><div></div></td>';
content += '<td valign="middle"><div title="下一页"></div></td>';
content += '<td valign="middle"><div title="尾页"></div></td>';
content += '<td valign="middle"><div></div></td>';
content += '<td valign="middle"><div title="刷新"></div></td>';
content += '<td valign="middle"><div></div></td>';
content += '<td valign="middle"> 检索到 ' + json.totalRows + ' 条记录，显示第  <span>' + (json.startRow + 1) + '</span> 条 - 第  <span>' + (json.startRow + json.pageSize) + '</span> 条记录 </td></tr></table>';
content += '</td></tr>';
content += '</table>';
}

/*ajax获取json对象*/
function ajax()
{
$.ajax({
type: "POST",
dataType: "json",
url: "${basePath}client.do?method=dolist&pageMethod=" + method + "&pageSize=" + $('#pageSize').val() + "&currentPage=" + $('#currentPage').val(),
error: function(){
$("#info").val("服务器繁忙，数据信息获取失败。请稍后重试...");
},
success: function(json){
$("#boxDiv").empty();
draw(json);
$("#boxDiv").append(content);
init();
}
});
}

/*初始化事件*/
function init() {

/*添加按钮按下状态样式*/
function pressHandler(){
$(this).addClass("default_pgPress");
}

/*移除按钮按下状态样式*/
function unpressHandler(){
$(this).removeClass("default_pgPress");
}

/*首页按钮鼠标点击事件*/
$("#first").mousedown(pressHandler);
$("#first").mouseup(unpressHandler);
$("#first").click(function(){
method = "first";
});

/*上一页按钮鼠标点击事件*/
$("#prev").mousedown(pressHandler);
$("#prev").mouseup(unpressHandler);
$("#prev").click(function(){
method = "previous";
});

/*下一页按钮鼠标点击事件*/
$("#next").mousedown(pressHandler);
$("#next").mouseup(unpressHandler);
$("#next").click(function(){
method = "next";
});

/*尾页按钮鼠标点击事件*/
$("#last").mousedown(pressHandler);
$("#last").mouseup(unpressHandler);
$("#last").click(function(){
method = "last";
});

/*刷新按钮鼠标点击事件*/
$("#refresh").mousedown(pressHandler);
$("#refresh").mouseup(unpressHandler);
$("#refresh").click(function(){
method = "any";
});

/*每页显示条数下拉框的项改变事件*/
$("#pageSize").change(function(){
method = "any";
});

/*************************************************************************************************************************/
/*页码文本框的失去焦点事件*/
$("#currentPage").blur(function(){
if($(this).val().length == 0)
{
$(this).val(1);
}
if($(this).val().length > 5)
{
$(this).val($("#totalpages").html());
}
method = "any";
});

/*当键盘按下时执行*/
$("#currentPage").keydown(function(event){
if((event.keyCode < 48 || event.keyCode > 57) && event.keyCode != 8)
{
event.keyCode = 0;
return false;
}
});
/*************************************************************************************************************************/

/*绑定ajax事件*/
$("#first").bind("click",ajax);
$("#prev").bind("click",ajax);
$("#next").bind("click",ajax);
$("#last").bind("click",ajax);
$("#refresh").bind("click",ajax);
$("#currentPage").bind("blur",ajax);
$("#pageSize").bind("change",ajax);

$("#allchk").change(function(){
$(":checkbox").attr("checked",$(this).attr("checked"));
});

/*************************************点击批量删除时运行************************************************/
$("#delall").click(function(){
if(confirm("确定要删除吗？")){
//声明一个变量用来存储需要删除的所有ID
var idsstring="";
delalls = $("input:checked");
for(i=0;i<delalls.length;i++)
{
if(idsstring=="" )
{
idsstring = $(delalls[i]).attr("id");
}
else
{
idsstring += "," + $(delalls[i]).attr("id");
}
}
ajaxDelAll(idsstring);
}
});
/*******************************************************************************************************/

}
}
</script>
</head>

7.界面样式CSS和delete.jsp：

Jpage样式：

@CHARSET "utf-8";
.default_container {
position: relative;
}

.default_pgContainer {
min-height:100px;
_height:100px;
}