?

以下是工作中一些思路實現的筆記，業務需求是：

1、簡易日歷

2、質押物提交后的一天開始到當前系統時間之間才可以提交質押物

3、沒有提交質押物的日期里面的圖片以灰色圖片站位，已經提交質押物的日期里面的圖片以紅色圖片站位

4、圖片點擊之后可以出現modal，modal中需要有圖片輪播，需要前端刪除，后端刪除，上傳圖片，圖片上傳限制

?

經驗分享：

a、后端返回給前端的數據可能比較亂，這個時候需要前端寫一個適配器函數，也就是把后端的數據進行轉換成前端某一個插件適用的數據結構。適配器函數很好用哦~在工作的其他地方都可以用到，有了適配器函數，后端無論傳什么樣的數據結構給前端，前端都能夠輕松應對！

b、點擊日歷上的圖片顯示modal且modal中有圖片輪播圖片預覽，這個效果實現的思路是，日歷加載完后請求后端數據，把日歷上對應的日期的dom上加pic屬性，這個屬性里面存圖片數組的字符串形式，拿到數據后再把數據序列化成數組對象，或者對象放在圖片輪播上，和圖片預覽上

?

如需轉載請注明出處！

/**
* @Author Mona
* @Date 2016-12-23
* @description 巡檢記錄
*//**
* @適用于whale 項目的日歷控件
* @param string selector 為想實例化日歷控件的dom容器
*///是否是監管方
var role_info = new Role();
var role_id = role_info.getRoleId();
var is_jg_operator = role.compareTo(role_id,role["jg_operator"]);function WhaleCalendar(options){var _this = this;_this.selector = $(options.selector);_this.the_month = $(_this.selector).find('[role="the-month"]');//左上角年_this.the_year = $(_this.selector).find('[role="the-year"]');//左上角月
_this.prev_year = $(_this.selector).find('[role="prev-year"]');//上一年_this.next_year = $(_this.selector).find('[role="next-year"]');//下一年
_this.prev_month = $(_this.selector).find('[role="prev-month"]');//上一月_this.next_month = $(_this.selector).find('[role="next-month"]');//下一月_this.peldge_date = options.peldge_date_this.IsLeapYear = function(year){if((year%400 == 0)||(year%4==0 && year%100!=0)){return true;}return false;}_this.prev_year.on('click',function(){_this.prevYear();})_this.next_year.on('click',function(){_this.nextYear();})_this.prev_month.on('click',function(){_this.prevMonth();})_this.next_month.on('click',function(){_this.nextMonth();})_this.init();}WhaleCalendar.prototype = {init:function(){var _this = this;_this.renderTable();},createCalendar:function(year,month,date){var _this = this;var d = new Date();var cur_year = '';var cur_mon = '';var cur_date = '';if(!year || year <= 0){cur_year = d.getFullYear();  // 年份}else{cur_year = year;}if(!month || month <= 0){cur_mon = d.getMonth();  // 月份}else{cur_mon = month-1;}if(!date || date<=0){cur_date = d.getDate();  // 日期}else{cur_date = date;}//默認年月var my_year = cur_year;var my_month = cur_mon+1;        _this.the_year.text(my_year);_this.the_month.text(my_month);var month_days = new Array(31,28+(_this.IsLeapYear(d.getFullYear())),31,30,31,30,31,31,30,31,30,31); // 月份天數數組var month_firstday_date = new Date(cur_year,cur_mon,1);var monthDays = month_days[cur_mon];var monthFirstday = month_firstday_date.getDay(); // 月份的第一天是星期幾var lines = Math.ceil((monthDays+monthFirstday)/7);  // 表格所需行數var calendarBody = "";var time = new Date().getTime();for(var i=0;i<lines;i++){calendarBody+="<tr class='line'>";for(var j = 0;j<7;j++){idx = i*7+j; //  單元格自然序列號if(i == 0 && idx < monthFirstday){calendarBody+="<td class='empty'></td>";}else if(idx < monthDays+monthFirstday){var date = idx+1-monthFirstday;var my_cur_date = my_year+"/"+my_month+"/"+date;var is_mid = ((new Date(Date.parse(_this.peldge_date))-new Date(Date.parse(my_cur_date)))<=0) &&(new Date()-(new Date(Date.parse(my_cur_date)))>=0);var monkey_icon_cls = is_mid?' common-img canlander-mk-icon':'';if(date == cur_date && cur_mon == d.getMonth() && cur_year == d.getFullYear()){calendarBody+="<td class='today'><div class='img-box"+monkey_icon_cls+"' id='imgbox"+time+i+j+"today' data-is-empty='1' data-cur-date='"+my_year+"/"+my_month+"/"+date+"'></div>";calendarBody+="<p class='cur-day'><span class='y-day'>"+date+"日</span></p></td>";}else{calendarBody+="<td><div class='img-box"+monkey_icon_cls+"' id='imgbox"+time+i+j+"' data-is-empty='0' data-cur-date='"+my_year+"/"+my_month+"/"+date+"'></div>";calendarBody+="<p class='whale-day'><span class='y-day'>"+date+"日</span></p></td>";}}else{calendarBody+="<td class='empty'></td>";}}calendarBody+="</tr>";}return calendarBody;},prevMonth:function(){var _this = this;var theMonth = eval(_this.the_month.html());var theYear = eval(_this.the_year.html());if(theMonth<=1){_this.the_month.html("12");if(theYear<=1){_this.the_year.html(1);}else{_this.the_year.html(theYear-1);}}else{_this.the_month.html(theMonth-1);}cur_year = eval(_this.the_year.html());cur_mon = eval(_this.the_month.html());_this.renderTable(cur_year,cur_mon)},nextMonth:function(){var _this = this;var theMonth = eval(_this.the_month.html());if(theMonth >= 12){var theYear = eval(_this.the_year.html());if(theYear>=2200){_this.the_year.html(2200);}else{_this.the_year.html(eval(theYear+1));}_this.the_month.html(1);}else{_this.the_month.html(eval(theMonth+1));}cur_year = eval(_this.the_year.html());cur_mon = eval(_this.the_month.html());_this.renderTable(cur_year,cur_mon)},prevYear:function(){var _this = this;var theYear = eval(_this.the_year.html());if(theYear <= 1){_this.the_year.html(1);}else{_this.the_year.html(eval(theYear-1));}cur_year = eval(_this.the_year.html());cur_mon = eval(_this.the_month.html());_this.renderTable(cur_year,cur_mon)},nextYear:function(){var _this = this;var theYear = eval(_this.the_year.html());if(theYear >= 2200){_this.the_year.html(2200);}else{_this.the_year.html(eval(theYear+1));}cur_year = eval(_this.the_year.html());cur_mon = eval(_this.the_month.html());_this.renderTable(cur_year,cur_mon)  },renderTable:function(year,month){var _this = this;if(year&&month){        _this.selector.find("table tr").not(".header").remove();_this.selector.find("table").append(_this.createCalendar(year,month));  _this.selector.find("table tr").not(".header").hide().fadeIn(500);       }else{_this.selector.find("table").append(_this.createCalendar());}_this.selector.find("table tr").find('td:eq(0)').css('background-color','#fafafa');_this.selector.find("table tr").find('td:eq(6)').css('background-color','#fafafa');reRenderData();$('.img-box').on('click',function(){//點擊日歷中的圖片var is_empty_status = $(this).attr('data-is-empty');var target_id = $(this).attr('id');var cur_date = $(this).attr('data-cur-date');//開始時間轉換var string_date = formatDateToString(cur_date);//結束 時間轉換var cur_pics = $(this).attr('data-pics');var parse_pics = null;var is_mid = (new Date(Date.parse(window.sessionStorage["pledgeDate"]))-new Date(Date.parse(cur_date)))<=0;console.debug('質押物提交的時間');console.debug(new Date(Date.parse(cur_date)));if(!is_mid){return }if(typeof cur_pics !=='undefined'){parse_pics = JSON.parse(cur_pics);}else{parse_pics = 'empty_pic';}console.debug('圖片對象')console.debug(parse_pics);var imgModal = viewImgObj({target:target_id,is_empty:is_empty_status,date:string_date,pics:parse_pics});imgModal.Modal({target:target_id,is_empty:is_empty_status,date:string_date,pics:parse_pics});});       }
}/**
* 根據返回的數據渲染
*/function formatDateToString(date){var cur_date_arr = date.split('/');var _this_year_data = cur_date_arr[0];var _this_mouth_data = cur_date_arr[1];var _this_day_data = cur_date_arr[2];if(_this_mouth_data.length<2){_this_mouth_data = '0'+_this_mouth_data}if(_this_day_data.length<2){_this_day_data = '0'+_this_day_data}var _this_cur_date = _this_year_data+_this_mouth_data+_this_day_data;return _this_cur_date
}/*20160102
2016/01/02*/
function formatDateAsRules(date) {if(date.length<1){return }date = date.toString();var _this_cur_year = date.substring(0,4);var _this_cur_mouth = date.substring(4,6);var _this_cur_day = date.substring(6,8);if(_this_cur_mouth.length==2){var mouth_arr = _this_cur_mouth.split('');if(mouth_arr[0]==0){_this_cur_mouth = mouth_arr[1];}}if(_this_cur_day.length==2){var day_arr = _this_cur_day.split('');if(day_arr[0]==0){_this_cur_day = day_arr[1];}  }return (_this_cur_year+'/'+_this_cur_mouth+'/'+_this_cur_day)
}function reRenderData(){function get_echo_data(){ var my_the_year = $('[role="the-year"]').text();var my_the_month = $('[role="the-month"]').text();var cur_date = my_the_year+'/'+my_the_month+'/'+'1';//時間格式轉換開始var string_date = formatDateToString(cur_date)//結束時間格式轉換var echo_data = null;      var param = {firstDate:string_date,count:'31',pledgeBusinessKey:window.sessionStorage["businessKey"]}//獲取巡檢記錄回顯記錄HttpUtils.get_records_data(param,function(data){console.debug('回顯巡檢記錄數據');console.debug(data);echo_data = data.data;})return configuratorEchoData(echo_data);}var my_data = get_echo_data();var records_data = my_data.had_records_data;console.debug('純凈的回顯數據');console.debug(my_data)function rerenderCalendar(){var calendar_date = $('[data-cur-date]');$.each(calendar_date,function(i,item){var cur_dom = $(item);var td_date = new Date($(item).attr('data-cur-date'));$.each(records_data,function(j,info_date){var cur_echo_date = info_date.date //formatDateAsRules(info_date.date)var echo_date = new Date(cur_echo_date);var echo_pics = info_date.pics;if((td_date-echo_date)==0 && echo_pics.length>0){//有上傳圖片的記錄則給他一個點亮的狀態if(cur_dom.hasClass('canlander-mk-icon')){cur_dom.removeClass('canlander-mk-icon').addClass('logo-red-icon');}    console.debug('時間：'+cur_echo_date)echo_pics = JSON.stringify(echo_pics);cur_dom.attr('data-pics',echo_pics); }if((td_date-echo_date)==0 && echo_pics.length==0){if($(cur_dom).hasClass('logo-red-icon')){$(cur_dom).removeClass('logo-red-icon').addClass('canlander-mk-icon');$(cur_dom).removeAttr('data-pics');}}})})}rerenderCalendar();
}/**
* @param object 
* param.target 操作的具體日期的那個縮略圖
* param.is_empty 當前上傳的縮略圖對應的日期中巡檢記錄是否為空
* param.date 當前巡檢日期
*/function scrollLeftcc(target,width){var pic_list_dom = $(target).parent().find('[data-role="pic-list"]');var single_width = width;if(parseInt(pic_list_dom.css('left'))==0){return }pic_list_dom.animate({'left':'+='+single_width+'px'},300)
}function scrollRight(target,width){var single_width = width;var pic_list_dom = $(target).parent().find('[data-role="pic-list"]');var list_len = pic_list_dom.find('li').length;if(parseInt(pic_list_dom.css('left'))==-((list_len-1)*single_width)||list_len==0){return }pic_list_dom.animate({'left':'-='+single_width+'px'},300)
}function viewImgObj (settings){//巡檢日期   var upload_file_dom = '';var file_box = []; var pics = (settings&&settings.pics);function picModal(options){//顯示modalvar _this = this;        var target = (options&&options.target);var is_empty = parseInt(options&&options.is_empty)?true:false;var date = (options&&options.date);var size = (options&&options.size)||'0';var cur_pics = (options&&options.pics);var cur_pic_len = (cur_pics!=='empty_pic')?cur_pics.length:0;var h = '';h+='<div id="view-records" class="modal fade " tabindex="-1" style="display: none;" aria-hidden="true">';h+='<div class="modal-backdrop fade"></div>';h+='<div class="modal-dialog " style="z-index:99999">';h+='<div class="modal-content view-records-content">';h+='<div class="modal-header">';h+='<span  class="close" data-dismiss="modal">×</span>';h+='<h4 class="blue bigger">查看巡檢記錄</h4>';h+='</div>';h+='<div class="modal-body">';var carousel = '<div class="my-carousel-box" data-role="carousel"><span class="left" data-role="left" οnclick="javascript:scrollLeftcc(this,200)"> &lt; </span><div class="carousel-box"><ul id="my-carousel" class="my-carousel '+(is_jg_operator?'jg-handlable':'')+'" data-role="pic-list"></ul></div><span class="right" data-role="right" οnclick="javascript:scrollRight(this,200)"> &gt; </span></div>';var thumbnail_img = '<div class="my-thumbnail-box"><ul id="my-thumbnail" class="my-thumbnail"></ul></div>';var tip_info = is_jg_operator?'<span class="tip-info" id="tip-info">'+cur_pic_len+'/5</span>':'';var upload_img = is_jg_operator?'<span class="upload-file"><b data-role="upload-file">上傳圖片</b><input type="file" data-role="upload"></span>':'';var submit_file = is_jg_operator?'<div class="clearfix"><span class="btn btn-primary btn-sm pull-right" data-role="submit-file">提交</span></div>':'';h+=carousel+thumbnail_img+upload_img+tip_info+submit_file;h+='</div>';h+='</div>';h+='</div>';h+='</div>';if($('#view-records').length>0){$('#view-records').remove();}$('body').append(h);var cur_view_pic_modal = $('#view-records');var carousel_dom = $('#my-carousel');//輪播圖var thumbnail_dom = $('#my-thumbnail');//縮略圖upload_file_dom = $('[data-role="upload-file"]');//上傳圖片var upload_input_dom = upload_file_dom.parent().find('input[data-role="upload"]');var submit_file_dom = $('[data-role="submit-file"]');//向后端提交上傳的圖片var tip_info = $('#tip-info');// 渲染輪播圖if(cur_pics && cur_pics!=='empty_pic'){carousel_dom.html(renderCarousel(cur_pics));//刪除數據庫的圖片
            deleteDbImg();//渲染小縮略圖
            thumbnail_dom.html(renderSmallPic(cur_pics));//打開系統選擇文件對話框if(cur_pic_len==5){upload_file_dom.attr('disabled','');}}upload_file_dom.on('click',function(){if(typeof $(this).attr('disabled')!=='undefined'){alert('最多只能上傳5張!')return }  $(this).parent().find('input').trigger('click');})//input change 拿到當前選擇的upload_input_dom.on('change',function(){var _this = this;var file = $(this)[0].files[0];readFile(file,thumbnail_dom);$('.tip-info').text(cur_pic_len+'/5')})//上傳文件submit_file_dom.on('click',function(){if(!file_box||file_box.length<1){return }var param = {};param.files = file_box; param.data = {pledgeBusinessKey:window.sessionStorage["businessKey"],inspectionDate:date}console.debug('巡檢記錄上傳的參數')console.debug(param);HttpUtils.update_records_pic_data(param,function(data){if(data.statusCode == '200'){console.debug('上傳成功！');cur_view_pic_modal.modal('hide');reRenderData()}})})//圖片輪播scrollCarousel('[data-role="carousel"]',200);var view_records_dom = $('#view-records');view_records_dom.modal({backdrop:false});//點擊背景時不關閉modalview_records_dom.modal('show');view_records_dom.on('hidden.bs.modal',function(){$(this).remove();})};function renderCarousel(cur_pics){var h = '';var url = contextPath+'/accessory/download/';$.each(cur_pics,function(i,item){h+='<li id="'+item.ip_id+'"><b data-role="delete-db-img" class="delete-db-img">&times;</b><img src="'+url+item.accessory_id+'" width="200" height="250"></li>';})return h}function deleteDbImg(){var delete_db_img_dom = $('[data-role="delete-db-img"]');delete_db_img_dom.on('click',function(){var _this = this;var picId = $(_this).parent().attr('id');var param = {inspectionPicId:picId};console.debug('刪除圖片時的ip_id')console.debug(param);HttpUtils.delete_records_pic(param,function(data){if(data.statusCode == '200'){alert('刪除圖片成功！');var delete_pic_ip_id = $(_this).parent().attr('id');var small_pic_list = $('.small-bg');$(_this).parent().remove();$.each(small_pic_list,function(i,item){if(delete_pic_ip_id==$(item).attr('data-id')){$(item).remove();return false}});//刪除后重新渲染輪播圖scrollCarousel('[data-role="carousel"]',200);$('[data-role="carousel"]').css('left',0);var cur_num = (($('.tip-info').text()).split('/'))[0]-1;//刪除一張則信息提示少一張$('.tip-info').text(cur_num+'/5');//重新渲染張數
                    reRenderData();}})})}function renderSmallPic(cur_pics){var h = '';var url = contextPath+'/accessory/download/';$.each(cur_pics,function(i,item){h+='<div class="small-bg" data-id="'+item.ip_id+'"><img src="'+url+item.accessory_id+'" width="40" height="40"></div>';})return h}function scrollCarousel(selector,width){var left_btn_dom = $(selector).find('[data-role="left"]');var right_btn_dom = $(selector).find('[data-role="right"]');var pic_list_dom = $(selector).find('[data-role="pic-list"]');var single_width = width;var list_len = pic_list_dom.find('li').length;pic_list_dom.css({'width':list_len*single_width+'px'});}function readFile(file,box){//讀取圖片if($('.small-bg').length==5){alert('最多只能上傳5張')return }var str = '';var is_pic = /image\/\w+/.test(file.type); if(is_pic){var reader = new FileReader();reader.readAsDataURL(file);reader.onload = function(){ var time = new Date().getTime();var file_obj = {id:"view-img"+time,value:file};  file_box.push(file_obj);console.debug(file_box);str += '<div class="small-bg"><b data-role="delete-img" id="view-img'+time+'">&times;</b><img src="'+this.result+'" width="40" height="40"></img></div>'; $(box).append(str);var sm_pic_len = $(box).find('.small-bg').length;$('.tip-info').text(sm_pic_len+'/5'); if(sm_pic_len == 5){$('[data-role="upload-file"]').attr('disabled','');}               removeFile();                                   }}                }function removeFile(){//刪除圖片$('[data-role="delete-img"]').on('click',function(){var cur_id = $(this).attr('id');$.each(file_box,function(i,item){var input_file_id = item.id;if(cur_id==input_file_id){file_box.splice(i,1);return false} })console.debug(file_box);$(this).parent().remove();var cur_sm_pic_len = $('#my-thumbnail').find('.small-bg').length;$('.tip-info').text(cur_sm_pic_len+'/5');if(typeof $('[data-role="upload-file"]').attr('disabled')!=='undefined'){$('[data-role="upload-file"]').removeAttr('disabled'); }})}return {Modal:picModal}
}/**
* @日歷回顯數據配置器
* @param {data} object 后端返回的數據
*/function configuratorEchoData(data){var clean_echo_data = {};clean_echo_data.had_records_data = [];$.each(data,function(i,item){var clean_data = {};//var cur_date = (item.inspectionDate).replace(/-/g,'/');var cur_date = formatDateAsRules(item.inspectionDate);clean_data["pics"] = [];clean_data["date"] = cur_date;$.each(item.inspectionPics,function(j,info){var picInfo = {};picInfo["accessory_id"] = info.picAccessory.id;picInfo["ip_id"] = info.id;clean_data["pics"].push(picInfo)})clean_echo_data.had_records_data.push(clean_data);})return clean_echo_data
}$(function () {new WhaleCalendar({selector:'[data-role="whale-canlander"]',peldge_date:window.sessionStorage["pledgeDate"]})//實例化日歷插件reRenderData()//根據后端返回的數據渲染日歷

})

?

轉載于:https://www.cnblogs.com/MonaSong/p/6288557.html

總結

以上是生活随笔為你收集整理的工作笔记---巡检记录的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。