唉,本来昨天昨晚数据查询今天就放假了,奈何哥们端午节回家了,他身上的重任没有完成,自然就落到了我的肩膀上,唉,这锅我背了,谁让咱是兄弟不是,心里苦说不出啊.
任务是做一个基于日期的备忘录,效果图如下.
道理很简单,从数据库里把当前用户的记录全部取出渲染这个表就可以了,主要是easyui的一些接口的使用,当然图中还有我的人生目标.
第一步是数据库设计,当然这个是很简单的,做绩效考核那阵艰难的革命岁月已经一去不复返了
id: integer
text: string
user_id: integer
date: datetime
第二步当然是取出当前用户对应的备忘录数据.
var easyui_dates = new Array();
$.each(dates ,function(index , obj){ //dates为从数据库获得的备忘录记录
var date= new Date(Date.parse(obj["date"]));
var has_the_date = false;
$.each(easyui_dates,function(index,obj){//easyui_dates为最终需要获得的数组
if(obj["year"] == date.getFullYear() && obj["month"] == date.getMonth()){
obj["days"].push(date.getDate())
has_the_date = true;
}else{
has_the_date = false;
}
});
if(!has_the_date){
var item = {"year":date.getFullYear(),"month":date.getMonth(),"days":[date.getDate()]}
easyui_dates.push(item);
}
});
}
});
最后得到的easyui_dates是这种形式的[{“year”:2017,”month”:5,”days”:[12,25,26,31]},{“year”:2017,”month”:3,”days”:[1,,2,25,31]]}
第三步然后我们就可以根据easyui_dates这个数据来判断日期了
$('#cc').calendar({
current:new Date(),
formatter: function(date){
var d = date.getDate();
var opts = $(this).calendar('options');
var ret = ""
$.each(easyui_dates,function(index,obj){
if (opts.year == obj["year"] && opts.month == obj["month"]+1 && $.inArray(d , obj["days"])>=0){
ret = '<div class="icon-ok md">' + d + '</div>';
}
});
if(ret == ""){
return d
}else{
return ret;
}
},
onSelect: function(date){
var select_date = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();
alert(select_date);//获得选择日期
}
});
这里需要说明两点,直接在easyui_date中return是很方便,但是我试了试那样应该是跳不出这个双重循环,所以我就重新加了个变量.
其次是formatter之后的函数每次需要执行40次左右,也就是遍历每一个日期来判断它有没有相应的事件存在,所以感觉效率堪忧,更别提我接过来的时候代码竟然它查询数据库的ajax放在里边,也就是显示就需要查询40多次数据库.但是我也没想到别的好办法,等我有了再来分享吧.
这个formatter的原理很简单,就是遍历每一个日期(本月加下一个月的一些日期),然后通过options属性可以获得他的年和月,我们依次判断每条记录的年月是否和当前年月相等,如果相等并且当前的日也在日期的数组中,那么就把这一天加上对号,即返回'<div class="icon-ok md">' + d + '</div>'
然后根据onSelect方法我们可以随心所欲的通过ajax请求来做我们的事情,也就是图下半部分就很简单了,就不细说了.