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'> </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'> </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);
这里就是整个日历的内容。
