bootstrap日历控件

这篇博客介绍了如何结合JavaScript、jQuery、CSS、HTML、Java、Ajax和jsp等技术,实现一个日历控件与公司组织架构树的交互功能。利用Bootstrap的日历组件,当点击组织架构树节点时,相应日期会高亮显示,再次点击则取消高亮。通过Ajax从后台获取组织绑定的日期数据,并在前端动态设置日期状态。
摘要由CSDN通过智能技术生成

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


这是一个小功能,界面不太美观,但功能还是实现了。这个功能综合了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,
          
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值