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() + "¤tPage=" + $('#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>
<body>
<div id="boxDiv" style="margin-top: 30px; width: 90%; "></div>
<%@ include file="../common/delete.jsp" %>
</body>
</html>
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 type="text/javascript">
var bdiv;
var centerdiv;
var flag = false;
function play(){
centerdivwidth = $("#showmsg").width();
if(flag){
centerdivwidth += 100;
}
flag = true;
centerdivheight = $("#showmsg").height();
centerdivleft = ($("body").width()-centerdivwidth)/2 + "px";
centerdivtop= (window.screen.height-centerdivheight)/2-215 + "px";
bdiv = $("<div>").css({
"opacity":"0.8",
"width":"100%",
"height":"100%",
"background":"white",
"position":"absolute",
"top":"0px",
"left":"0px",
"z-index":"10",
"display":"none"
}).appendTo($("body"));
centerdiv = $("<div>").css({
"opacity":"0.9",
"width":"220px",
"height":"19px",
"position":"absolute",
"top":centerdivtop,
"left":centerdivleft,
"z-index":"11",
"display":"none"
}).appendTo($("body"));
$("#showmsg").appendTo($(centerdiv));
initPlay();
}
function initPlay(){
$(showmsg).show();
divin();
setTimeout(divout,1000);
}
function divin(){
$(bdiv).fadeIn("1000");
$(centerdiv).fadeIn("1000");
}
function divout(){
$(bdiv).fadeOut("1000");
$(centerdiv).fadeOut("1000");
}
</script>
<div id="showmsg" style="width:100px; height:30px; color: red;display: none;">删除成功！！！</div>
8.界面效果图：(内附相片中)界面上的图片自己可选择.
http://blog.163.com/dangzhengtao@yeah/editPhoto.do?albumId=-1&photoId=fks_087070080083081068082094086075072081086075084086094068080#
