目前在做OA首页的时候，打算增加一个日历记事本功能。要求简单，不占版面，经过努力，终于完成，大家可以参考下。
主要实现功能：前后台交互，新增/修改、获取记录等，删除功能也可以写，时间有限，自己写吧!
1.png
2.png
主要参考：http://bbs.itheima.com/forum.php?mod=viewthread&tid=412056&highlight=layui
采用layui和jquery实现
1、js页面集成，通过iframe嵌入
{
xtype : 'panel',
width : 350,
margin : '0 5 0 5',
cls : 'panelCls',
border : false,
region : 'east',
html : '<iframe allowtransparency="true" frameborder="0" style="width:380px;height:100%;position:absolute; top:-10px; left:-15px;" scrolling="no" src="../OA/jishiben/index.html"></iframe>'
}
2、记事本html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="layui/css/layui.css">
<link rel="stylesheet" href="css/date.css">
</head>
<body>
<!-- 你的HTML代码 -->
<div class="layui-container" style="padding: 15px;">
<div class="layui-row">
<div class="layui-col-md12">
<div class="layui-inline" id="test-n2" ></div>
</div>
</div>
</div>
<script src="layui/layui.js"></script>
<script>
layui.use(['layer', 'form','jquery','laydate'], function() {
var layer = layui.layer,
$ = layui.jquery,
laydate = layui.laydate,
form = layui.form;
//定义json
var data={};
//页面加载后初始化data
$.ajax({
type: 'POST',
url: "../../datenote.do?method=getDateNote",
dataType : "text",
success: function(res){
data = JSON.parse(res);
var new_date = new Date();
loding_date(new_date ,data);
}
});
//var dataArr = [];
//var new_date = new Date();
//loding_date(new_date ,data);
//日历插件调用方法
function loding_date(date_value,data){
console.log("得到的日期2："+data)
laydate.render({
elem: '#test-n2'
,type: 'date'
,theme: 'grid'
,max: '2099-06-16 23:59:59'
,position: 'static'
,range: false
,value:date_value
,isInitValue: false
,calendar: true
,btns:false
/* ,ready: function(value){
//console.log(value);
hide_mr(value);
} */
,done: function(value, date, endDate){
console.log(value); //得到日期生成的值，如：2017-08-18
console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
//layer.msg(value)
//调用弹出层方法
date_chose(value,data);
}
, mark:data//重要json！
});
}
//获取隐藏的弹出层内容
var date_choebox = $('.date_box').html();
//定义弹出层方法
function date_chose(obj_date,data){
var index = layer.open({
type: 1,
skin: 'layui-layer-rim', //加上边框
title:'添加记录',
area: ['300px', '200px'], //宽高
btn:['确定','撤销','取消'],
content: '<div class="text_box">'+
'<form class="layui-form" action="">'+
'<div class="layui-form-item layui-form-text">'+
' <textarea id="text_book" placeholder="请输入内容" class="layui-textarea"></textarea>'+
'</div>'+
'</form>'+
'</div>'
,success:function(){
console.log(data)
console.log(obj_date)
$('#text_book').val(data[obj_date])
}
,yes:function (){
//调用添加/编辑标注方法
if($('#text_book').val()!=''){
chose_moban(obj_date,data);
layer.close(index);
}else{
layer.msg('不能为空', {icon: 2});
}
},btn2:function (){
chexiao(obj_date,data);
}
});
}
//定义添加/编辑标注方法
function chose_moban(obj_date,markJson){
//获取弹出层val
var chose_moban_val = $('#text_book').val();
$('#test-n2').html('');//重要！由于插件是嵌套指定容器，再次调用前需要清空原日历控件
//添加属性
markJson[obj_date] = chose_moban_val;
$.ajax({
type: 'POST',
url: "../../datenote.do?method=setDateNote",
data: {
markDate:obj_date,
markNote:markJson[obj_date]
},
success: function(res){
console.log(res)
}
});
//再次调用日历控件，
loding_date(obj_date,markJson);//重要！，再标注一个日期后会刷新当前日期变为初始值，所以必须调用当前选定日期。
}
//撤销选择
function chexiao(obj_date,markJson){
//删除指定日期标注
delete markJson[obj_date];
//原理同添加一致
$('#test-n2').html('');
loding_date(obj_date,markJson);
}
});</script>
</body>
</html>
3、java端
@Resource(name = "sessionFactoryPrimary")
private SessionFactory sessionFactory;
@SuppressWarnings("rawtypes")
@RequestMapping(params = "method=getDateNote")
public void getDateNote(HttpServletRequest request, HttpServletResponse response) throws Exception {
response.setContentType("text/json;charset=utf-8");
Session session = sessionFactory.getCurrentSession();
String userName = (String) request.getSession().getAttribute("userName");
SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd");
List list = session.createQuery("from DateNote where reportMan=:reportMan ")
.setParameter("reportMan", userName).list();
StringBuffer sb=new StringBuffer();
for (Iterator iterator = list.iterator(); iterator.hasNext();) {
DateNote dn = (DateNote) iterator.next();
sb.append(",\""+sdf.format(dn.getMarkDate())+"\":\""+dn.getMarkNote()+"\"");
}
String sbStr=sb.toString().replaceAll("\n", "");
String str ="{"+ sbStr.substring(1,sbStr.length())+"}";
response.getWriter().write(str);
}
@SuppressWarnings("rawtypes")
@RequestMapping(params = "method=setDateNote")
public void setDateNote(HttpServletRequest request, HttpServletResponse response,String markDate,String markNote)
throws Exception {
response.setContentType("text/json;charset=utf-8");
Session session = sessionFactory.getCurrentSession();
SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd");
String userName = (String) request.getSession().getAttribute("userName");
Success success=new Success();
if(StringUtils.isBlank(markDate) || StringUtils.isBlank(markNote)){
success.setMsg("N");
}else{
//1、查询当天是否已经添加记录
List queryExist=session.createQuery("select d.id from DateNote d where Date(d.markDate) = :mkdate")
.setParameter("mkdate", sdf.parse(markDate)).list();
if(queryExist.size()>0){
String id=queryExist.get(0).toString();
DateNote dn=session.get(DateNote.class, id);
dn.setMarkNote(markNote);
dn.setUpdateTime(new Date());
session.update(dn);
}else{
DateNote dn=new DateNote();
dn.setMarkDate(sdf.parse(markDate));
dn.setMarkNote(markNote);
dn.setCreateTime(new Date());
dn.setUpdateTime(new Date());
dn.setReportMan(userName);
session.save(dn);
}
success.setMsg("Y");
}
CommonHelper.responseToFront(response, success);
}
Ok，完工！
网友评论