0

快速背景：

  • 我正在为美国的几个地区制作带薪休假 (PTO) 日历。
  • 我正在使用 Zend 框架、jquery、fullcalendar、www.adipalaz.com 的 Expand/All 以及自定义的“更多...”链接
  • 我有 3 个不同的 jquery 选项卡，每个选项卡上都有一个新的日历实例（1 级）
  • 每个选项卡都有与 PTO 相关的不同主题，有 3 个手风琴部分
  • 每个选项卡一个手风琴部分有一个过滤器来过滤日历上的结果
  • 每个选项卡的一个手风琴部分上有一个日历（第 2 级）
  • 第一个日历通过 JSON 调用/提要从两个不同的事件源中提取
  • 此日历根据地区拉取 PTO
  • 区域显示为全天事件
  • 每个“事件”都是使用 www.adipalaz.com 的展开/折叠（3 级）
  • 当使用 www.adipalaz.com 展开或折叠每个“事件”时，AJAX 调用会拉取与该区域相关的所有 PTO
  • 每个扩展的 AJAX 调用都会隐藏有关额外信息的详细信息，除非单击自定义“更多...”链接（级别 4）
  • 每个自定义更多链接也有一些动作（5级）

现在，上述所有工作。

我有一个处理“3 级”及以上的 .click 函数。这个 .click 函数的一部分是 AJAX 调用，另一部分获取并设置 z-index，以便我的“4 级”数据弹出所有其他未扩展的“3 级”数据。
到目前为止，该功能还不错。问题是我的所有基础数​​据仍然需要可见。

我的多层问题

  1. 重新渲染日历上的所有事件，以便无论单击“级别 3”如何，一周和事件都可见
  2. 一旦重新渲染不会丢失“级别 3” .click 动作，如果我使用 $('#calendar1').fullCalendar('rerenderEvents'); 并且不会丢失在尝试重新呈现事件之前显示的“级别 3”数据。

我有图像可以直观地解释我的问题，但由于这是我的第一篇文章，因此无法上传。如果您知道如何帮助我并且需要查看图片，请告诉我。

目前，这就是我对这个问题的全部了解：

//POPS THE OPEN ITEM UP IN Z-INDEX
$(uniqueID).parent().parent().css('z-index',9);

//THIS FINDS OUT WHAT TO ADD
changeSizeOfDiv = $(uniqueID).next('.fc-event-names').html(data).outerHeight()
     + $('.fc-week' + level + ' .fc-sun').outerHeight();

//THIS ALTERS THE ROW SIZE
$('tr.fc-week' + level).css('height',changeSizeOfDiv);

我还没有弄清楚如何动态更新以下行“top：#px;” 单击一个区域后。我认为通过使用 changeSizeOfDiv 函数将自上而下推倒应该可以工作，但到目前为止我不知道如何做到这一点，更不用说优雅地做到这一点了。

任何想法都会受到欢迎。
谢谢

4

1 回答 1

0

所以在很多帮助下，这就是我想出的，它就像一个魅力。我将此添加到日历初始化中

eventClick: function(event, element) {
    if (typeof event.originalTitle == 'undefined') {
        event.originalTitle = event.title;        
    }

    if (event.loaded) {
        event.title = event.originalTitle;
        event.loaded = false;
        $('#calendar1').fullCalendar('updateEvent',event);
    } else {
        $.ajax({
            url: regionNamesUrl + getFilterUrlPart(event.segmentDate,event.region),
            dataType: 'html',
            cache: false,
            success: function(data){                                
                event.title = event.originalTitle + '<br/><br/>' +data;
                event.loaded = true;

                $('#calendar1').fullCalendar('updateEvent',event);

                clicker(event,'approved');
                clicker(event,'cancelled');
            },
            error: function(data){
                alert('An error has occurred retrieving data from the server.  Try reloading the page.');
            }
      });
    }                
}
于 2012-05-31T18:34:43.763 回答