ajax完成预约效果

1. 保证浏览器访问action能够得到json数据集合（检查浏览器输出）。
2. 先做好静态的表格带基本的样式，通过ajax方法，将回调函数返回的预约信息，循环变成td，组装到table中，不需要了静态的tr和td，由于涉及日期处理，需要解决如何获取当前日期，如何获取当前日期所在的周次，如何获得当前日期本周一的日期，通过将日期编号等关键信息生成到td的属性中，以便匹配（检查ajax回调函数返回的内容能否正确生成表头信息包括日期和星期几）。
3. 通过本周周一和周五的循环内部和返回的数据集遍历双重循环，找到日期和半天匹配的信息，通过判断生成不同的td样式，显示不同的界面效果（检查本周数据是否正确生成）。
4. 将生成部分需要封装的方法提取出来，将原来的代码完整剪切 用function封装，将代码中变量不是自己声明的就需要传参，在原位置调用方法传参（检查封装后已完成功能是否受影响 如本周th，td和下一周th，td逐步封装）。
5. 追加切换按钮，一定要在ajax回调函数中调用方法追加。（因为ajax 有可能先执行但是后执行完，可能造成需要的数据集还没有从服务器取回来），再追加封装的click方法（检查按钮能不能点，点了能不能切换本周和下一周）。
6. 通过点击时间和本td属性中保存的日期和上下午，和数据集合比对找到需要的其他数据，添加的公共的div用于显示（公共div需要定位和父元素偏移，检查先不隐藏公共的div，调整完毕才隐藏）。

实体类：Appointment.java

package entity;

public class Appointment {
    private String apno;// 编号由日期-上午 例如 2018-10-24-1 表示2018-10-24上午
    private String apname;//预约姓名
    private String apsex;//预约性别
    private String apphone;//预约电话
    private String apdesc;//预约描述

    public Appointment() {
        super();
    }

    public Appointment(String apno, String apname, String apsex, String apphone, String apdesc) {
        super();
        this.apno = apno;
        this.apname = apname;
        this.apsex = apsex;
        this.apphone = apphone;
        this.apdesc = apdesc;
    }

    public String getApno() {
        return apno;
    }

    public void setApno(String apno) {
        this.apno = apno;
    }

    public String getApname() {
        return apname;
    }

    public void setApname(String apname) {
        this.apname = apname;
    }

    public String getApsex() {
        return apsex;
    }

    public void setApsex(String apsex) {
        this.apsex = apsex;
    }

    public String getApphone() {
        return apphone;
    }

    public void setApphone(String apphone) {
        this.apphone = apphone;
    }

    public String getApdesc() {
        return apdesc;
    }

    public void setApdesc(String apdesc) {
        this.apdesc = apdesc;
    }
}

Action类:AppointmentAction.java

package action;

import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.http.HttpServlet;

import org.apache.struts2.ServletActionContext;

import entity.Appointment;
import net.sf.json.JSONArray;
import utils.MyDateFormat;

public class AppointmentAction extends HttpServlet{


    private static final long serialVersionUID = 1L;
    private List<Appointment> appointments;
    private String currentDate;//获取当前要查看的是第几个星期
    private int currentWeek;//当前在本年周次
    

    public String getCurrentDate() {
        return currentDate;
    }

    public void setCurrentDate(String currentDate) {
        this.currentDate = currentDate;
        this.currentWeek = MyDateFormat.getWeekOfYear(currentDate);
    }

    /**
     * @see HttpServlet#HttpServlet()
     */
    public AppointmentAction() {
        super();
        appointments = new ArrayList<Appointment>();

        Appointment appointment1 = new Appointment("2018-10-10-1", "张阿姨", "女", "111", "成都，60岁");
        Appointment appointment2 = new Appointment("2018-10-24-2", "陈阿姨", "女", "151", "合肥，50岁");
        Appointment appointment3 = new Appointment("2018-10-25-1", "何叔叔", "男", "111", "成都，57岁");
        Appointment appointment4 = new Appointment("2018-10-26-1", "李叔叔", "男", "121", "南京，63岁");
        Appointment appointment5 = new Appointment("2018-10-31-1", "庄阿姨", "女", "168", "自贡，65岁");
        Appointment appointment6 = new Appointment("2018-10-29-2", "张阿姨", "女", "133", "镇江，66岁");

        appointments.add(appointment1);
        appointments.add(appointment2);
        appointments.add(appointment3);
        appointments.add(appointment4);
        appointments.add(appointment5);
        appointments.add(appointment6);
    }

    /**
     * @see 获得本周和下一周的 预约
     */
    public String getCurrentAndNextWeekAppointment() throws Exception {
        ServletActionContext.getResponse().setCharacterEncoding("utf-8");
        ServletActionContext.getRequest().setCharacterEncoding("utf-8");
        ServletActionContext.getResponse().setContentType("text/html; charset=utf-8");
        PrintWriter out = ServletActionContext.getResponse().getWriter();

        //需要将全部的预约中 是本周和下一周的 保留为新的集合
        List<Appointment> realAppointments = new ArrayList<Appointment>();
        
        //循环每一个预约，和当前标准时间对应的周次 一致 或者为下一周的才保留
        for(Appointment appointment:appointments){
            String appointmentDate = appointment.getApno().substring(0, appointment.getApno().length()-2);
            int appointmentWeek = MyDateFormat.getWeekOfYear(appointmentDate);
            if(appointmentWeek == currentWeek || appointmentWeek == currentWeek + 1){
                //System.out.println(appointmentDate);
                realAppointments.add(appointment);
            }
        }
        
        JSONArray jsondetails = JSONArray.fromObject(realAppointments);    
        
        out.print(jsondetails.toString());
        
        return null;
    }

    public String addAppointment() throws Exception {

        return null;
    }

    public String updateAppointment() throws Exception {

        return null;
    }
    
}

工具类：MyDateFormat.java

package utils;

import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Calendar;
import java.util.Date;


public class MyDateFormat {
    //传入日期，获取日期所在的星期 是全年的第多少个星期
        public static int getWeekOfYear(String date) {
            //格式化日期类
            SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd");
            Date resultDate = null;
            try {
                //格式化日期
                resultDate = format.parse(date);
            } catch (ParseException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }

            //时间类  传入
            Calendar calendar = Calendar.getInstance();
            //设置一周的开始为周一
            calendar.setFirstDayOfWeek(Calendar.MONDAY);
            //传入需要 比对的日期
            calendar.setTime(resultDate);
            int weekOfYear = calendar.get(Calendar.WEEK_OF_YEAR);
            //System.out.println(weekOfYear);

            return weekOfYear;
        }
        
        public static void main(String[] args) {
            MyDateFormat.getWeekOfYear("2018-10-24");
        }
}

struts.xml 配置

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
        "-//Apache Software Foundation//DTD Struts Configuration 2.5//EN"
        "http://struts.apache.org/dtds/struts-2.5.dtd">


<struts>
    <package name="struts2" extends="struts-default" namespace="/">

        <action name="appointmentAction_*" class="action.AppointmentAction" method="{1}">
                <allowed-methods>addAppointment,updateAppointment,getCurrentAndNextWeekAppointment</allowed-methods>
        </action>

    </package>
</struts>

预约.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
  <style type="text/css">
</style>
<style type="text/css">

 .content{margin-left:auto;margin-right:auto;width: 1000px;}

 .appointment{margin-left:auto;margin-right:auto;width: 800px;border:solid 1px;}
 
 .appointment tr > td{width:140px;border:solid 1px;text-align: center;height:28px;}
 .appointment tr > td:nth-child(1){width:100px;}
 .stateTd > span{display:inline-block; width:36px;height:20px;margin-top:4px;}
 .stateTd1 > span{background-image: url('image/car.png');background-position: 0px -340px;}
 .stateTd2 > span{background-image: url('image/car.png');background-position: -60px -340px;}
 .apppointTab{position: relative;}
 
.detailinfo{display: none;position: absolute;}
.detailinfo > ul{margin:0;padding:0;}
.detailinfo > ul > li{list-style-type: none;font-family: "微软雅黑";font-size: 12px;}
.detailinfo > ul > li:nth-child(even){background-color: #fde4eb;}
.detailinfo > ul > li:nth-child(odd){background-color: #e3fbe3;}
 
 .content > div > input{margin-left:780px;margin-top:10px;}
 .currentWeek{display: none;}
</style>
  <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
  <script type="text/javascript" src="js/dateformat.js"></script>
  <script type="text/javascript" src="js/initAppointment.js">

  </script>
  <script type="text/javascript">
   $(function(){
     //alert('1254');
   })
  </script>
</head>
<body>
   <div class="content">
   <div class="apppointTab">
    <table class="appointment">
            
    </table>
        <div class="detailinfo"></div>
    </div>
    <div>
    </div>
   </div>
</body>
</html>

dateformat.js:

//获取当前时间，格式YYYY-MM-DD
    function getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
    }
    
    //获取是当前星期的 日期,dayno 本周的第几天
    function getCurrentWeekDay(dayno){
        var dd = new Date();
        var week = dd.getDay(); //获取时间的星期数
        //alert(week);
        var minus = week ? week - 1 : 6;
        //alert(minus);
        dd.setDate(dd.getDate() - minus + dayno); //获取minus天前的日期 
        var y = dd.getFullYear();
        var m = dd.getMonth() + 1; //获取月份 
        var d = dd.getDate();
        return y + "-" + m + "-" + d;
    }
    
    function getDayofWeek(day){
        var weekday=new Array(7);
        weekday[0]="星期一";
        weekday[1]="星期二";
        weekday[2]="星期三";
        weekday[3]="星期四";
        weekday[4]="星期五";
        weekday[5]="星期六";
        weekday[6]="星期日";
        var dd = new Date(day);
        var week = dd.getDay(); 
        var dayofweek = week ? week - 1 : 6;
        
        return weekday[dayofweek];
    }

initAppointment.js

$(function(){
        //alert(getCurrentWeekDay(5));
       $.ajax({
            url:'appointmentAction_getCurrentAndNextWeekAppointment.action',
            type:'post',
            data:{'currentDate':getNowFormatDate()},
            dataType:'json',
            success:function(appointments){
                //alert(appointments);
                //$details = $(details);//js对象转换为jquery对象
                //appendDiv();//该方法的调用方在success才能保证ajax取到值之后，才循环
                initTh(1);
                
                initTd(appointments,1,1);
                initTd(appointments,2,1);
                
                //初始化按钮
                var btnstr =  '<input type="button" value="本周" class="changeWeekBtn currentWeek"/>'
                 +'<input type="button" value="下一周" class="changeWeekBtn nextWeek"/>'
                
                 $('.content >div:eq(1)').append(btnstr);
                 btnbindClick(appointments);//追加绑定按钮事件
                
            }   
        }); 
       function initTh(currentOrNext){
            var trOfth = '<tr><th>时间段</th>';
            var day;
            for(var i=0;i<5;i++){
                if(currentOrNext==1){
                 day = getCurrentWeekDay(i);
                }else{
                  day = getCurrentWeekDay(i+7); 
                }
                trOfth += '<th>'+day+'<br/>('+getDayofWeek(day)+')</th>';
            }
            trOfth += '</tr>';
            $('.appointment').append(trOfth);

       }
       
       
       function initTd(appointments,halfday,currentOrNext){
           var trRow;
           if(halfday == 1){
             trRow = "<tr><td>上午</td>";
           }else{
             trRow = "<tr><td>上午</td>";  
           }
        var  findflag;
        for(var i=0;i<5;i++){
            findflag = false;//标志本次循环是否找到有相对应的半天预约信息
    
            if(currentOrNext==1){
             day = getCurrentWeekDay(i);
            }else{
              day = getCurrentWeekDay(i+7); 
            }
            //在外部循环出的日期 和，数据库返回的预约日期 进行匹配（上午）
            $(appointments).each(function(j,appointment){
                var appointmentDate = appointment.apno;
            
                if(appointmentDate.substr(0,10)==day
                        &&appointmentDate.substr(11,1)==halfday){
                    trRow += '<td class="stateTd stateTd2" alt="'+day+'" alt1="'+halfday+'"><span></span></td>';
                    findflag = true;
                    //break;
                }
            });
            if(findflag == false){
                trRow += '<td class="stateTd stateTd1"><span></span></td>';         
            }
        }
        
        trRow += "</tr>";
    
        $('.appointment').append(trRow);
        tdbindHover(appointments);//给新生成的td绑定 鼠标移入移出事件
       }
       
       //按钮绑定，一定在ajax回调中使用，才能保证有数据
       function btnbindClick(appointments){
          $('.changeWeekBtn').click(function(){
              if($(this).val()=='下一周'){
                  $('.currentWeek').css("display",'block');
                  $('.nextWeek').css("display",'none');
                  //因为已经将初始化th 和上午td 下午td 分别封装到了方法，通过最后一个参数区别本周和下一周
                    $('.appointment').html('');
                    initTh(2);              
                    initTd(appointments,1,2);
                    initTd(appointments,2,2);
              }else{
                  $('.currentWeek').css("display",'none');
                  $('.nextWeek').css("display",'block');
                  $('.appointment').html('');
                    initTh(1);              
                    initTd(appointments,1,1);
                    initTd(appointments,2,1);
              }
          });
       }
       //td鼠标移入移出事件
       function tdbindHover(appointments){
           $('.stateTd2').hover(function(e){
               var currentApno= $(this).attr('alt')+'-'+$(this).attr('alt1');
                 //遍历数据集合找到 当前半天对应的数据
               var currentAppointment;
               $(appointments).each(function(i,appointment){
                   if(appointment.apno ==currentApno){
                       currentAppointment = appointment;
                   }
               });
               var tdulStr = '<ul>';
               tdulStr += '<li><span>姓名:</span>'+currentAppointment.apname+'<span></span>';
               tdulStr += '<li><span>性别:</span>'+currentAppointment.apsex+'<span></span>';
               tdulStr += '<li><span>电话:</span>'+currentAppointment.apphone+'<span></span>';
               tdulStr += '<li><span>描述:</span>'+currentAppointment.apdesc+'<span></span>';
               tdulStr += '</ul>';
            //将内容添加给公共的div显示
               $('.detailinfo').html(tdulStr);
               var clientX = e.clientX;
               var clientY = e.clientY;
               
                var parentLeftPx = $('.apppointTab').css('marginLeft');
                var parentTopPx =  $('.apppointTab').css('marginTop');
                //alert(schoolbgleftPx.length);
                var parentLeft = parentLeftPx.substr(0,parentLeftPx.length-2);
                var parentTop = parentTopPx.substr(0,parentTopPx.length-2);;
                
               
                $('.detailinfo').css('left',clientX-parentLeft).css('top',clientY-parentTop).css('display','block');
           },function(){
               $('.detailinfo').html('');
               $('.detailinfo').css('display','none');
           });
       }
   });