NLifeBill第二章日历显示

NLifeBill登录之后显示的首页是一个日历,日历上面显示当月的每一天,记过帐的就会显示那天的出账和进账,没有记账的就会显示0/0。如图:

之前在asp.net mvc模式先的时候这个控件我最初的想法是在服务端生成,后来发现这样太慢了,就在客户端生成了,整个日历控件是我写的一个jquery插件。

日历的上部分主要控制月份的前进和后退并且显示当前的月份,后面会添加上当前整个月的整体进账和出账。

这里主要记录下插件的思路。插件需要传递的参数有四个:

1 //默认值
2 var defaults = {
3     year: new Date().getFullYear(),
4     month: new Date().getMonth() + 1,
5     url: null,
6     data: null
7 };

第三个参数url是必须的,其他参数都是可选的。

在第一次初始化的时候插件会根据传入的url去访问后台的方法获取数据,如果有给年,月那么会使用给的年月,没有给值就会默认获取系统当前的年月。后台直接返回json格式的数据,然后根据返回的数据拼接出日历,每一次点击前进和后退的时候都是再次调用此插件里面的方法再次传递前三个方法。

日历的样式是额外的css,本来想写在插件里面的,后面嫌麻烦就单独出来了:

 1 table{border: solid 1px #e8eef4;border-collapse: collapse;}
 2 table td{padding: 5px;border: solid 1px #e8eef4;}
 3 table th{padding: 6px 5px;text-align: left;background-color: #dff0d8;border: solid 1px #dff0d8;}
 4 table td: hover{background-color: #f2dede;}
 5 body{margin: 0px;padding: 0px;}
 6 .td_div_main{width: 100%;height: 90px;margin: 0px;}
 7 .td_div_top{float: right;width: 99%;height: 20px;margin: 0px 0px;text-align: right;}
 8 .td_div_cont{float: right;width: 99%;height: 50px;margin: 2px auto;text-align: center;font-size: 15px;font-weight: 300;line-height: 50px;}
 9 .td_div_cont a{color: #696969;text-decoration: none;}
10 .td_div_topg{float: right;width: 99%;height: 20px;margin: 0px 0px;text-align: right;color: #bbbbbb;}

使用的时候在页面引入相应的文件之后:

1 <script>
2     $(function(){
3         $("#Rili").showrili({ url: "/getRl" });
4     });
5 
6     function Up(y, m) {
7         $("#Rili").showrili({ year: y, month: m, url: "/getRl" });
8     }
9 </script>

其实这个插件多少有点定制的味道,并不算完全公用的,当然也是可以改的,后期可能会做调整吧。Up方法是插件里面要用的一个方法,其实是可以封装在插件里面的,只是懒就没有封装。

整个插件的代码:

  1 /*
  2  * jQuery插件
  3  *
  4  */
  5 
  6  (function ($) {
  7      //默认值
  8      var defaults = {
  9          year: new Date().getFullYear(),
 10          month: new Date().getMonth() + 1,
 11          url: null,
 12          data: null
 13      };
 14 
 15      //获取指定月份有多少天
 16      function daysInMonth(year, month) {
 17          month = parseInt(month, 10);  //parseInt(number,type)这个函数后面如果不跟第2个参数来表示进制的话,默认是10进制。
 18          var temp = new Date(year, month, 0);
 19          return temp.getDate();
 20      }
 21 
 22      function setUrl(year, month) {
 23          var yu, mu, yd, md;
 24 
 25          if (month == 1) {
 26              yd = year - 1;
 27              md = 12;
 28              yu = year;
 29              mu = month + 1;
 30          }
 31          else if (month == 12) {
 32              yd = year;
 33              md = month - 1;
 34              yu = year + 1;
 35              mu = 1;
 36          }
 37          else {
 38              yd = year;
 39              md = month - 1;
 40              yu = year;
 41              mu = month + 1;
 42          }
 43 
 44          var down = "javascript:Up(" + yd + "," + md + ")";
 45          var up = "javascript:Up(" + yu + "," + mu + ")";
 46 
 47          var div = '<div style="margin:2px auto; border:1px solid #ccc; width:90%; min-width:812px; height:26px;">' +
 48                    '<div style="width:50px; height:22px; line-height:22px; float:left; text-align:center; margin:2px auto;">' +
 49                    '<a id="rili_down" style="color:#5c87b2;" href=' + down + '>后退</a>' +
 50                    '</div>' +
 51                    '<div style="width:100px; height:22px; line-height:22px; float:left; text-align:center; margin:2px auto;">' + year + '/' + month + '</div>' +
 52                    '<div style="width:50px; height:22px; line-height:22px; float:left; text-align:center; margin:2px auto;">' +
 53                    '<a id="rili_up" style="color:#5c87b2;" href=' + up + '>前进</a>' +
 54                    '</div>' +
 55                    '<div style="width:200px; height:22px; line-height:22px; float:right; text-align:center; margin:2px auto;">' +
 56                    '<embed src="/Content/free-flash-clock.swf" width="100" height="22" wmode="transparent" type="application/x-shockwave-flash"></embed>' +
 57                    '</div>' +
 58                    '</div>';
 59 
 60          return div;
 61      }
 62 
 63      $.ajaxSetup({
 64          async: false
 65      });
 66 
 67      $.fn.showrili = function (options) {
 68          //合并属性
 69          options = $.extend(defaults, options);
 70 
 71          $.post(
 72                   options.url,
 73                   { "y": defaults.year, "m": defaults.month },
 74                   function (json, textStatus) {
 75                       if (textStatus = "success") {
 76                     if(json.bill.length > 0){
 77                       defaults.data = json.bill;
 78                     }else{
 79                       var d = "{}";
 80                       var dats = eval('(' + d + ')');
 81 
 82                       defaults.data = dats;
 83                     }
 84                       }
 85                   }
 86                );
 87 
 88          //合并属性
 89          options = $.extend(defaults, options);
 90 
 91          //拼接当前时间
 92          var dq = options.year + '-' + options.month + '-' + '1';
 93 
 94          //获取当前时间对象
 95          var d = new Date(dq);
 96 
 97          //获取当前月的第一天是礼拜几以数字表示
 98          var week = d.getDay() == 0 ? 7 : d.getDay();
 99 
100          //拼接table头部
101          var tab = setUrl(options.year, options.month) + '<div style="margin:10px auto; border:1px solid #ccc; width:90%; min-width:812px; height:auto;">' +
102                    '<table style="width:100%" cellspacing="0">' +
103                   '<thead>' +
104                   '<tr>' +
105                   '<th style="text-align:center;">星期一</th>' +
106                   '<th style="text-align:center;">星期二</th>' +
107                   '<th style="text-align:center;">星期三</th>' +
108                   '<th style="text-align:center;">星期四</th>' +
109                   '<th style="text-align:center;">星期五</th>' +
110                   '<th style="text-align:center;">星期六</th>' +
111                   '<th style="text-align:center;">星期天</th>' +
112                   '</tr>' +
113                   '</thead>' +
114                   '<tbody>' +
115                   '<tr>';
116 
117          //1.1.判断当前月的日历中从一号开始的前面有几个空格
118          var qg = week - 1;
119 
120          //1.2.获取当月1号前面的日期是上个月的那几天:上个月天数-空格数+1
121          var qm = 0;
122          if (options.month == 1) {    //如果是1月那么年份要-1
123              qm = daysInMonth(options.year - 1, 12) - qg + 1;
124          } else {
125              qm = daysInMonth(options.year, options.month - 1) - qg + 1;
126          }
127 
128          //1.3.循环添加前面的空格数目
129          for (var i = 0; i < qg; i++) {
130              tab += "<td>" +
131                    "<div class='td_div_main'>" +
132                    "<div class='td_div_topg'>" + (qm + i) + "</div>" +
133                    "<div class='td_div_cont'>&nbsp;</div>" +
134                    "</div>" +
135                    "</td>";
136          }
137 
138          var datajs = eval('(' + options.data + ')');
139 
140          //1.4.循环这一行里面剩下的几天
141          for (var i = 0; i < (7 - week + 1); i++) {
142 
143             var key1 = "_" + options.year + "" + options.month + "" + (i + 1);
144 
145             var val1 = datajs[key1];
146 
147             var name =  val1 == undefined ? '0/0' : datajs[key1][0].total;
148             var z =  val1 == undefined ? '0/0' : datajs[key1][0].id;
149             var url =  val1 == undefined ? "add/"+options.year+"/"+options.month+"/"+(i+1) : "upd/" + z;
150 
151              tab += "<td>" +
152                    "<div class='td_div_main'>" +
153                    "<div class='td_div_top'>" + (1 + i) + "</div>" +
154                    "<div class='td_div_cont'><a href='#/" + url + "'>" + name + "</a></div>" +
155                    "</div>" +
156                    "</td>";
157          }
158 
159          //1.5.第一行数据拼接完成
160          tab += "</tr>";
161 
162          //2.1.计算本月有多少天
163          var dd = daysInMonth(options.year, options.month);
164 
165          //2.2.计算还有多少天要循环
166          var sd = dd - (7 - week + 1);
167 
168          //2.3.计算整行的循环还有多少行
169          var hd = Math.floor(sd / 7);
170 
171          //累加余下的日期开始数
172          var lc = 7 - week + 1;
173 
174          //2.5.开始循环整行的
175          for (var i = 0; i < hd; i++) {
176              tab += "<tr>";
177 
178              //2.5.1.开始循环整行里面的td
179              for (var j = 0; j < 7; j++) {
180                  lc++;
181 
182                 var key1 = "_" + options.year + "" + options.month + "" + lc;
183 
184                 var val1 = datajs[key1];
185 
186                 var name =  val1 == undefined ? '0/0' : datajs[key1][0].total;
187                 var z =  val1 == undefined ? '0/0' : datajs[key1][0].id;
188                 var url =  val1 == undefined ? "add/"+options.year+"/"+options.month+"/"+lc : "upd/" + z;
189 
190                  tab += "<td>" +
191                        "<div class='td_div_main'>" +
192                        "<div class='td_div_top'>" + lc + "</div>" +
193                        "<div class='td_div_cont'><a href='#/" + url + "'>" + name + "</a></div>" +
194                        "</div>" +
195                        "</td>";
196              }
197 
198              tab += "</tr>";
199          }
200 
201          //3.1.计算整行之后还有多少天剩余要循环 options.data._20131011[0].id
202          var gd = sd % 7;
203 
204          //3.2.循环剩余没有循环的td
205          tab += "<tr>";
206          for (var i = 0; i < gd; i++) {
207              lc++;
208                 var key1 = "_" + options.year + "" + options.month + "" + lc;
209 
210                 var val1 = datajs[key1];
211 
212                 var name =  val1 == undefined ? '0/0' : datajs[key1][0].total;
213                 var z =  val1 == undefined ? '0/0' : datajs[key1][0].id;
214                 var url =  val1 == undefined ? "add/"+options.year+"/"+options.month+"/"+lc : "upd/" + z;
215 
216              tab += "<td>" +
217                    "<div class='td_div_main'>" +
218                    "<div class='td_div_top'>" + lc + "</div>" +
219                    "<div class='td_div_cont'><a href='#/" + url + "'>" + name + "</a></div>" +
220                    "</div>" +
221                    "</td>";
222          }
223 
224          //3.3.循环最后一行不够循环剩余的td个数
225          for (var i = 0; i < 7 - gd; i++) {
226              tab += "<td>" +
227                    "<div class='td_div_main'>" +
228                    "<div class='td_div_topg'>" + (i + 1) + "</div>" +
229                    "<div class='td_div_cont'>&nbsp;</div>" +
230                    "</div>" +
231                    "</td>";
232          }
233 
234          //3.4.拼接完成
235          tab += "</tr>" +
236                "</tbody>" +
237                "</table></div>";
238 
239          $(this).html(tab);
240      }
241 
242 
243  })(jQuery);
View Code

这里就是整个日历的内容。

posted @ 2014-02-25 14:05  Dn9x  阅读(262)  评论(0编辑  收藏  举报