Jpage分页+Hibernate+Ajax+jquery+JSON通用技术<2> _JavaScript

Jpage分页+Hibernate+Ajax+jquery+JSON通用技术<二>

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" rel="stylesheet" type="text/css">
?????? 
?????? <link rel="stylesheet" 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 width="100%" cellpadding="0" cellspacing="0" style="margin: 0px;">';
????? ?? content += '<tr align="center" class="default_pgToolbar">';
??????? /*绘制表头内容*/
??????? content += '<td width="40"><input type="checkbox" id="allchk"></input></td>';
??????? content += '<td width="100">客户名称</td>';
??????? content += '<td width="100">电话</td>';
??????? content += '<td width="100">负责人</td>';
??????? content += '<td width="100">操作</td>';
???? ?? content += '</tr>';
???? ??
???? ?? /*绘制数据*/
??? for(var i=0; i<json.list.length; i++)
??? {
???? content += '<tr align="center" style="border-bottom: 1px solid #88B4FF;">';
???? content += '<td><input type="checkbox" id="' + json.list[i].clientID + '" name="chk"/></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 width="100%" border="0" cellpadding="0" cellspacing="0" class="default_pgToolbar" id="toolbarBody">';
?????? ?? content += '<tr><td align="center">';
??? content += '<table border="0" cellpadding="0" cellspacing="0" class="default_pgPanel">';
??? content += '<tr><td valign="middle"><a id="delall">批量删除  </a><select class="default_pgPerPage" title="每页显示条数" id="pageSize">';
??? $.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 class="default_separator"></div></td>';
??? content += '<td valign="middle"><div class="default_pgBtn default_pgFirst" title="首页" id="first"></div></td>';
??? content += '<td valign="middle"><div class="default_pgBtn default_pgPrev" title="上一页" id="prev"></div></td>';
??? content += '<td valign="middle" width="10" align="left"><div class="default_separator"></div></td>';
??? content += '<td valign="middle"> 第 <input name="currentPage" type="text" id="currentPage" value="' + json.currentPage + '" size="4" title="页码"> 页 / 共 <span class="_pgTotalPage" id="totalpages">' + json.totalPages + '</span> 页 </td>';
??? content += '<td valign="middle" width="10" align="right"><div class="default_separator"></div></td>';
??? content += '<td valign="middle"><div class="default_pgBtn default_pgNext" title="下一页" id="next"></div></td>';
??? content += '<td valign="middle"><div class="default_pgBtn default_pgLast" title="尾页" id="last"></div></td>';
??? content += '<td valign="middle"><div class="default_separator"></div></td>';
??? content += '<td valign="middle"><div class="default_pgBtn default_pgRefresh" title="刷新" id="refresh"></div></td>';
??? content += '<td valign="middle" width="10" align="left"><div class="default_separator"></div></td>';
??? content += '<td valign="middle" class="default_pgSearchInfo" id="info"> 检索到 ' + json.totalRows + ' 条记录，显示第  <span class="default_pgStartRecord">' + (json.startRow + 1) + '</span> 条 - 第  <span class="default_pgEndRecord">' + (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;
}

.default_pgToolbar {
border-collapse: separate;
height:30px;
valign:middle;
font-size:12px;
border:1px solid #DADADA;
background: url(../images/bg.gif);
margin:10px 0 -1px 0;
}

.default_pgToolbar td {
font-size:12px;
}

.default_pgPanel {
float: left;
border-collapse: separate;
padding:0 10px 0 10px;
}

.default_pgBtn {
width: 20px;
height: 20px;
display: block;
cursor: pointer;
margin:1px;
}

.default_pgPress {
margin:2px 0 0 2px;
}

.default_pgPrev {
background: url(../images/prev.gif) no-repeat center;
}

.default_pgPrevDisabled {
background: url(../images/prev_disabled.gif) no-repeat center;
cursor:auto;
}

.default_pgNext {
background: url(../images/next.gif) no-repeat center;
}

.default_pgNextDisabled{
background: url(../images/next_disabled.gif) no-repeat center;
cursor:auto;
}

.default_pgFirst {
background: url(../images/first.gif) no-repeat center;
}

.default_pgFirstDisabled {
background: url(../images/first_disabled.gif) no-repeat center;
cursor:auto;
}

.default_pgLast {
background: url(../images/last.gif) no-repeat center;
}

.default_pgLastDisabled {
background: url(../images/last_disabled.gif) no-repeat center;
cursor:auto;
}

.default_pgRefresh {
background: url(../images/nowait.gif) no-repeat center;
}

.default_pgLoad {
background: url(../images/loading.gif) no-repeat center;
}

.default_pgCurrentPage {
width:30px;
height:16px;
line-height:16px;
text-align:center;
border:1px solid #CCCCCC;
background:url(../images/text_bg.gif) repeat-x;
}

.default_pgSearchInfo {
padding-left:20px;
}

.default_mask {
width: 100%;
height: 100%;
background: url(../images/loading.gif) no-repeat center;
background-color: #FFFFFF;
position: absolute;
z-index: 999;
top:0;
left:0;
filter:alpha(opacity=70);
-moz-opacity:0.70;
opacity:.70;
}

.default_separator {
width:2px;
height:20px;
background: url(../images/separator.gif) no-repeat center;
}

----------------------

delete.jsp:

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

</script>

8.界面效果图：(内附相片中)界面上的图片自己可选择.

http://blog.163.com/dangzhengtao@yeah/editPhoto.do?albumId=-1&photoId=fks_087070080083081068082094086075072081086075084086094068080#