基于easyui的备忘录的实现

唉,本来昨天昨晚数据查询今天就放假了,奈何哥们端午节回家了,他身上的重任没有完成,自然就落到了我的肩膀上,唉,这锅我背了,谁让咱是兄弟不是,心里苦说不出啊.
任务是做一个基于日期的备忘录,效果图如下.

道理很简单,从数据库里把当前用户的记录全部取出渲染这个表就可以了,主要是easyui的一些接口的使用,当然图中还有我的人生目标.
第一步是数据库设计,当然这个是很简单的,做绩效考核那阵艰难的革命岁月已经一去不复返了

id: integertext: stringuser_id: integerdate: 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请求来做我们的事情,也就是图下半部分就很简单了,就不细说了.