Educate网站项目整理(一)

2016-12-26 11:15:22来源:CSDN作者:FourMoon_人点击

前段时间做了一个网站项目,遇到也解决了一些问题,所以花时间整理一下。

活动显示页面

  1. 大体的显示效果就是这样的,左侧是多条件的选择栏(有7个条件,这里我只列出两个具有代表性的),右边头部最上端是导航栏,可以在活动和群组之间切换,往下是显示已选择的条件。写sql语句时,同种条 件之间是or,不同种条件是and。
  2. web前端:javascript、amazeUI、ajax
  3. 后台框架:SpringMVC+SpringJDBC+Hibernate

一堆问题

活动时间这个条件是固定的,活动类型是从数据库里获取的。活动类型多达数十条,这里要做折叠展开的功能。
问题一:活动类型选择栏如何做出折叠、展开的效果?
jsp页面

<h1 id="Activity" style="font-size:22px;font-family:Lucida Grande", Helvetica, Arial,""><b>活动类型</b></h1><div id="moreActivity" style="display:none;">      </div><img alt="展开" src="../images/icon-coin.png" onclick="Unfold()">展开

javascript
获取活动类型并动态添加到页面中

$.ajax({            url:'getAllSecondInterest',            data:{},            type:'post',            cache:false,            dataType:'json',            success:function(data){                for(var i=0;i<4;i++){                    $('#Activity').append("<label class='am-checkbox'><input type='checkbox'  onchange='typeselect(id);' id='"+data[i].interestid+"'  name='"+data[i].interestName+"' data-am-ucheck>"+data[i].interestName+"</label>");                }                for(var i=4;i<data.length;i++){                    $('#moreActivity').append("<label class='am-checkbox'><input type='checkbox' onchange='typeselect();' id='"+data[i].interestid+"'  name='"+data[i].interestName+"' data-am-ucheck>"+data[i].interestName+"</label>");                }            }        });

折叠展开方法

    var index=1;//展开、收起    var Unfold=function(){       if(index%2!=0){           $('#moreActivity').show();       }       else{           $('#moreActivity').hide();       }       index++;    }

====================问题一完结

在做时间条件查询的时候,因为条件是固定的,所以我的做法是,每次时间条件复选框的选中或取消都会向后台传递5个布尔类型的值。

var time1;var time2;var time3;var time4;var time5;function change(){//时间选择        time1=document.getElementById("timeNow").checked;        time2=document.getElementById("timeTwoDays").checked;        time3=document.getElementById("timeSevenDays").checked;        time4=document.getElementById("timeWeekAfter").checked;        time5=document.getElementById("timeHappened").checked;        reloadPicture();//图片加载          }

在后台通过进行分析得出我所选的条件,再进行sql语句的拼接,进行查询。

但是活动类型有三四十条(只要你愿意还可以更多),所以说要是还沿用时间条件的做法就很烦人。而且活动类型条件跟时间条件还有个很大的不同。

时间条件的sql实例:where.... and a.starttime < date_format(now(), '%Y-%m-%d 23:59:59')活动类型条件的sql实例:where .... and i.interestid  in (19,20)

于是我决定把所有选中的活动类型的id合成一条字符串类型的数据传递给后台
问题二:如何在每次进行活动类型条件选择/取消的时候把所有选中的类型的id获取?
我相信不少人的想法跟我一开始一样,定义一个数组,没选中一个活动类型,就把活动类型的id放进数组里,进行数据处理后,传个字符串给后台。
那么问题来了,当我取消选中一个活动类型时,按理说就应该从数组里去除我选中的这个活动类型的id,理论上讲做到从数组里删除一个数据是可以做到的,但是仔细想想会有点麻烦。作为一个懒人,我怎么能接受这种方案?经过一系列的头(目)脑(光)风(呆)暴(滞),我想到了下面的这个办法。

//每当选择/取消某个活动类型复选框时,遍历所有的活动类型复选框,找出选中的活动类型,并获取id和name//这样就避免了进行减法,只要做加法,方便了不少$('#Activity').find("input").each(function(){           if($(this).is(':checked')){                var interestsObjectIdAndName=new Object();                interestsObjectIdAndName.interestId=$(this).attr('id');                interestsObjectIdAndName.interestName=$(this).attr('name');                interestsStr.push(interestsObjectIdAndName);           }       });

====================问题二完结

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台