jquery+java 仿Google日曆

好久沒有更新文章了，廢話不多說，先直接上效果圖

這次是要用jquery+java仿照一個google日曆的功能，從數據庫中讀取任務顯示在畫面上，可以直接新建任務，或者編輯刪除任務

在Eclipse中新建一個web project 。這次我們採用struct+spring+hibernate框架，實現起來可能有些難度。這裏就不一一解釋了

一）UI層處理

1）頁面樣式

<mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">/* 頁面基本樣式 */ body, td, input { font-family:Arial; font-size:12px; } /* 日程表格樣式 */ #calTable { border-collapse:collapse; border:5px solid #C3D9FF; } /* 每日單元格樣式 */ td.calBox { border:1px solid #CCDDEE; width:100px; height:80px; vertical-align:top; } /* 每日單元格內日期樣式 */ td.calBox div.date { background:#E8EEF7; font-size:11px; padding:2px; cursor:pointer; } /* 每日單元格內週六週日樣式 */ td.sat div.date, td.sun div.date{ color:red; } /* 今日樣式 */ td.calBox div.today { background:#BBCCDD; } /* 周標識樣式 */ td.day { text-align:center; background:#C3D9FF; border:1px solid #CCDDEE; color:#112ABB; } /* 當前顯示的年月樣式 */ #dateInfo { font-weight:bold; margin:3px; } /* 添加任務div樣式 */ #addBox { display:none; position:absolute; width:300px; border:1px solid #000; height:100px; background:#FFFF99; padding:10px; } /* 添加任務內日期樣式 */ #taskDate { height:30px; font-weight:bold; padding:3px; } /* 按鈕樣式 */ .taskBtn { margin:10px; } /* 編輯任務div樣式 */ #editBox { display:none; position:absolute; width:300px; border:1px solid #000; height:70px; background:#99FF99; padding:10px; } /* 任務樣式 */ div.task { width:98px; overflow:hidden; white-space:nowrap; background:#668CB3; border:1px solid #FFF; color:#FFF; padding:1 2 1 3; cursor:pointer; }</style>

2）導入jquery庫和json2庫文件

3）畫面代碼如下，可以看代碼註釋

<%@ page contentType="text/html; charset=utf-8" language="java" %> <%@ taglib prefix="s" uri="/struts-tags" %> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>日程表</title> <mce:script type="text/javascript" src="${pageContext.request.contextPath}/common/jquery.js" mce_src="${pageContext.request.contextPath}/common/jquery.js"></mce:script> <mce:script type="text/javascript" src="${pageContext.request.contextPath}/common/json2.js" mce_src="${pageContext.request.contextPath}/common/json2.js"></mce:script> <mce:script type="text/javascript"></mce:script> </head> <body> <h3>日程表</h3> <div id="load-ing" style="position:absolute;padding-left:6px;right:0px;top:0px;background-color: rgb(221, 68, 119);height:20px;width:76px;font-size:12px;padding-top: 1px; white-space: normal;color:#FFF;"> 加載數據中... </div>  <div id="addBox"> <div id="taskDate"></div> 內容：<input type="text" id="taskInfo" size="40" /> <div class="taskBtn"> <input type="button" value="創建新任務" onClick="addTask(this)"/> <input type="button" value="取消" onClick="closeAddBox()"/> </div> </div>  <div id="editBox"> <input type="hidden" id="taskId" /> 內容：<input type="text" id="editTaskInfo" size="40"/> <div class="taskBtn"> <input type="button" value="更新任務信息" onClick="updateTask()"/> <input type="button" value="刪除該任務" onClick="delTask()"/> <input type="button" value="取消" onClick="closeEditBox()"/> </div> </div>  <table id="calTable"> <tr> <td colspan="7"> <input type="button" value="上月" onClick="prevMonth()"/> <input type="button" value="本月" onClick="thisMonth()"/> <input type="button" value="下月" onClick="nextMonth()"/> <span id="dateInfo"></span> </td> </tr> <tr> <td class="day">週日</td> <td class="day">週一</td> <td class="day">週二</td> <td class="day">週三</td> <td class="day">週四</td> <td class="day">週五</td> <td class="day">週六</td> </tr> <tr> <td class="calBox sun" id="calBox0"></td> <td class="calBox" id="calBox1"></td> <td class="calBox" id="calBox2"></td> <td class="calBox" id="calBox3"></td> <td class="calBox" id="calBox4"></td> <td class="calBox" id="calBox5"></td> <td class="calBox sat" id="calBox6"></td> </tr> <tr> <td class="calBox sun" id="calBox7"></td> <td class="calBox" id="calBox8"></td> <td class="calBox" id="calBox9"></td> <td class="calBox" id="calBox10"></td> <td class="calBox" id="calBox11"></td> <td class="calBox" id="calBox12"></td> <td class="calBox sat" id="calBox13"></td> </tr> <tr> <td class="calBox sun" id="calBox14"></td> <td class="calBox" id="calBox15"></td> <td class="calBox" id="calBox16"></td> <td class="calBox" id="calBox17"></td> <td class="calBox" id="calBox18"></td> <td class="calBox" id="calBox19"></td> <td class="calBox sat" id="calBox20"></td> </tr> <tr> <td class="calBox sun" id="calBox21"></td> <td class="calBox" id="calBox22"></td> <td class="calBox" id="calBox23"></td> <td class="calBox" id="calBox24"></td> <td class="calBox" id="calBox25"></td> <td class="calBox" id="calBox26"></td> <td class="calBox sat" id="calBox27"></td> </tr> <tr> <td class="calBox sun" id="calBox28"></td> <td class="calBox" id="calBox29"></td> <td class="calBox" id="calBox30"></td> <td class="calBox" id="calBox31"></td> <td class="calBox" id="calBox32"></td> <td class="calBox" id="calBox33"></td> <td class="calBox sat" id="calBox34"></td> </tr> <tr> <td class="calBox sun" id="calBox35"></td> <td class="calBox" id="calBox36"></td> <td class="calBox" id="calBox37"></td> <td class="calBox" id="calBox38"></td> <td class="calBox" id="calBox39"></td> <td class="calBox" id="calBox40"></td> <td class="calBox sat" id="calBox41"></td> </tr> </table> </body> </html>

二）業務層

定義下列變量及其屬性，用於記錄單條任務的信息

private int singleId;
private String singleTask;
private Date singleBuildDate;

定義下列變量及其屬性，用於記錄多條任務的信息

private List<Integer> id;
//任務內容
private List<String> task;
//任務日期
private List<Date> buildDate;

定義變量month及其屬性，用於記錄當前的月份和年份

三）dao層，對數據庫中任務表的增刪改查，部分代碼如下（scheduleModel是數據庫中任務表對應的實體類）

/** * 獲取目標月份任務信息 * @param month 月份 * @return */ public List<scheduleModel> getTasks(String month) { DateFormat df =new SimpleDateFormat("yyyy-MM"); String a = null; try { a = df.format(df.parse(String.valueOf(month))); } catch (ParseException e) { // TODO Auto-generated catch block e.printStackTrace(); } return localDb.find("from scheduleModel where CONVERT(varchar(100),buildDate, 23) like '"+a+"%' order by id asc"); } public List<scheduleModel> all() { return localDb.find("from scheduleModel"); } /** * 添加新任務並獲取新任務的任務編號 * @param newsch * @return */ public int addTask(scheduleModel newsch) { int newId = -1; //用於保存新任務編號 Session session = this.localSessionFactory.getCurrentSession(); try { session.save("db.scheduleModel", newsch); String hql = "select max(id) from scheduleModel "; Query query = session.createQuery(hql); List lst = query.list(); if (lst.size()>0) { newId = (Integer) lst.get(0); //獲取新id } } catch (Exception e) { e.printStackTrace(); } return newId; } /** * 刪除任務 * @param taskId * @return */ public Boolean delTask(int taskId) { Session session = this.localSessionFactory.getCurrentSession(); try { String hql = " delete from scheduleModel where id=:tid"; Query query = session.createQuery(hql); query.setInteger("tid", taskId); int flag=query.executeUpdate(); if(flag>0) { return true; } return false; } catch (Exception e) { e.printStackTrace(); return false; } } /** * 更新任務 * @param newsch * @return */ public Boolean updateTask(scheduleModel newsch) { Session session = this.localSessionFactory.getCurrentSession(); try { //localDb.update("scheduleModel", newsch); String hql = " update scheduleModel set task=:task where id=:tid"; Query query = session.createQuery(hql); query.setInteger("tid", newsch.getId()); query.setString("task", newsch.getTask()); int flag=query.executeUpdate(); if(flag>0) return true; else return false; } catch (Exception e) { e.printStackTrace(); return false; } }

jquery+java 仿Google日曆

如果在——遇到愛情

寫在過渡期

php遠程連接mysql

java中系統剪貼板的使用

php中文件的下載（以及下載的文件名中文亂碼）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結