以下是工作中一些思路实现的笔记,业务需求是:
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){//显示modal
var _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)"> < </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)"> > </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});//点击背景时不关闭modal
view_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">×</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+'">×</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()//根据后端返回的数据渲染日历
})