bootstrap日历控件

好久没写博客了，今天事情不多就写一篇。需求:要做一个日历绑定组织架构树:效果如下图所示

这是一个小功能，界面不太美观,但功能还是实现了。这个功能综合了javascript,jquery,css,html,java,ajax,jsp等技术知识点。日历用的bootstrap的日历组件,组织架构树是公司的产品框架，难点在于组织架构树与日历的交互。就是当点击组织架构树的节点，会把历史设置的日期显示，日期所在单元格显示橘红色，当点击已标记颜色的日期，颜色消失，再点击则又标记颜色。首先，我在项目中新建了一个模块，再引用bootstrap组件以及和组织架构树的代码进行整合，接着我在控制组织架构树折叠的js代码里加入了一段ajax代码请求后台，参数则为组织id以及年和月组成的字符串用于到数据库里查询这个组织绑定的日期数据，返回一个list;前端接收到这个list之后，for循环，并用jquery的选择器给指点类属性的元素加一个类属性“selday”,并且调用jquery的attr方法给元素的on属性值改为1。这样显示出了日期。

 $.ajax({        url:'/holiday/query',                type:'POST',            traditional:true,            data:{"orgId":oid,"year":str},        success:function(data){            console.log("对象集合长度:"+data.length);            for(var i=0;i<data.length;i++)            {                console.log(data[i].holidayCode);                var dayid=data[i].holidayCode;                $(".fcday"+dayid).addClass("selday").            }        }    });});

下面这段代码就是给日期点击时调用的，页面载入完了以后执行这段代码，当要新加日期时，点击日期单元格，调用这一函数，拿到这一元素的on属性值，充当开关的作用，当on属性值为0时，则表示单元格没被选中，说明要把数据写进数据库里，通过发ajax请求调用后台的入库代码;若on属性值为1时，则表示单元格是选中状态，点击时则要把这个数据删除，通过发ajax请求调用后台的删除数据库数据的代码。

$(function(){    $(".calendar").on("click",".fcThisMonth",(function()    {        var dataDate=this.attributes["data-date"].value;        var onoff = this.attributes["on"].value;        console.log(dataDate)                console.log(onoff)        if(oid=='0') {            alert("请先选择部门！！")        }        else{            if(onoff == '0'){                $(this).addClass("selday");              this.attributes["on"].value='1';                $.ajax({                    url:'${rc.contextPath}/holiday/save',                    type:'POST',                    traditional:true,                    data:{"orgId":oid,"holidayId":dataDate},                    success:function(){//                        alert("插入成功");                    }                });            }else{                this.attributes["on"].value='0';                $(this).removeClass("selday");                var eqdate=""+eqyear+eqmonth+eqday;                $.ajax({                    url:'${rc.contextPath}/holiday/delete',                    type:'POST',                    traditional:true,                    data:{"orgId":oid,"holidayId":dataDate},                    success:function(){//                    alert("删除成功");                    }                });            }        }    }    )   )});

另外还有一点就是点击日历组件上面面板的左右箭头切换月份，这个要在bootstrap的源码里，加上一点代码调用js的函数向后台请求查询数据库数据:

<pre name="code" class="javascript">var icon = options.theme ? smartProperty(options.buttonIcons, buttonName) : null; // why are we using smartProperty here?var text = smartProperty(options.buttonText, buttonName); // why are we using smartProperty here?var button = $("<span class='fc-button fc-button-" + buttonName + " " + tm + "-state-default'>" +(icon ?"<span class='fc-icon-wrap'>" +"<span class='ui-icon ui-icon-" + icon + "'/>" +"</span>" :text) +"</span>").click(function() {if (!button.hasClass(tm + '-state-disabled')) {buttonClick();}                                                                  <span style="white-space:pre"></span>console.log("jq");                                    <span style="white-space:pre"></span>/*调用ajaxquery函数*/                                   <span style="white-space:pre"></span>ajaxquery();})

大致主要的思路就是以上这些。