Educate网站项目整理（一）

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

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);
           }
       });

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