基于easyui的备忘录的实现

唉,本来昨天昨晚数据查询今天就放假了,奈何哥们端午节回家了,他身上的重任没有完成,自然就落到了我的肩膀上,唉,这锅我背了,谁让咱是兄弟不是,心里苦说不出啊.
任务是做一个基于日期的备忘录,效果图如下.
这里写图片描述
道理很简单,从数据库里把当前用户的记录全部取出渲染这个表就可以了,主要是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请求来做我们的事情,也就是图下半部分就很简单了,就不细说了.

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值