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

最新推荐文章于 2019-10-18 03:10:37 发布

qingsf

最新推荐文章于 2019-10-18 03:10:37 发布

阅读量245

点赞数

分类专栏： jackey 文章标签： Ajax json jQuery Hibernate CSS ViewUI

本文链接：https://blog.csdn.net/qsfwy/article/details/83639957

版权

jackey 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

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"%>