【问题标题】:How to show specific events from JSON feed如何显示来自 JSON 提要的特定事件
【发布时间】:2015-01-31 23:24:11
【问题描述】:

我在以下页面上有一个包含完整数据的 JSON 提要:

'./PlanningFeed.xhtml'

我可以在基本使用情况完整日历上显示数据并且它正在工作。

问题是我只想显示满足条件的事件。

这就是我获取 JSON 数据的方式:

eventSources: [
        {
            url: './PlanningFeed.xhtml',
            type: 'GET',
            data: {
                start: firstdate,
                end: lastdate,
                salle: salle //this is my attempt to get only events that has a specific
                             //"salle" attribute,the field salle is declared and populated
                             //in all event objects.
                             //but this parameter here  it doesn't affect
                             //anything and  my calendar is created with all salle events showed.
                             //which means this doesn't work.
            }
        }
    ]
}); 

我也尝试了eventRender,但无济于事:

    eventRender: function(event, element) {


        if (event.salle === salle) {
            console.log('added', event.salle);

        } else if (event.salle !== salle) {
            console.log('deleted', event.salle);
            $(placeholder).fullCalendar('removeEvents', event.id);

        }
    }

我不想从 JSON 提要中删除数据,我以后可能会使用它。我希望我可以查询 JSON 提要以仅显示我想要的事件(例如:event.salle='XYZ')。

不要犹豫,询问更多信息。

更新 1:

[{"title":"uiyuiyutyiyuity\nANGIO SCANNER RENALE.","start":"2014-12-01T07:30:00","end":"2014-12-01T07:45:00","salle":"SCANNER1","backgroundColor":"#B6E8FF","patState":4,"rapportWrittenState":0,"patientFullName":"uiyuiyutyiyuity","studyDureeMinute":15,"payStateImage":"non-cote","bannerColor":"#98d1ec","borderColor":"#98d1ec","id":"1"},
 {"title":"hjghjghjghj\n2 CHEVILLE F","start":"2014-12-01T07:15:00","end":"2014-12-01T07:35:00","salle":"RADIO 1","backgroundColor":"#CDDFED","patState":1,"rapportWrittenState":0,"patientFullName":"hjghjghjghj","studyDureeMinute":20,"payStateImage":"non-cote","bannerColor":"#a0c2dc","borderColor":"#a0c2dc","id":"2"},
 {"title":"yiyuiyuiyui\nANGIO SCANNER ABDOMINALE.","start":"2014-12-01T06:55:00","end":"2014-12-01T07:15:00","salle":"SCANNER1","backgroundColor":"#F0F0F0","patState":7,"rapportWrittenState":0,"patientFullName":"yiyuiyuiyui","studyDureeMinute":20,"payStateImage":"non-cote","bannerColor":"#C8C8C8","borderColor":"#C8C8C8","id":"3"},
{"title":"tuutyuj\nANGIO SCANNER CEREBRAL.","start":"2014-12-01T06:25:00","end":"2014-12-01T06:45:00","salle":"SCANNER1","backgroundColor":"#E8F5BB","patState":5,"rapportWrittenState":0,"patientFullName":"tuutyuj","studyDureeMinute":20,"payStateImage":"non-cote","bannerColor":"#cede97","borderColor":"#cede97","id":"4"},
{"title":"dfgdfgdfgdfg\nANGIO SCANNER CERVICAL.","start":"2014-12-01T06:00:00","end":"2014-12-01T06:20:00","salle":"SCANNER1","backgroundColor":"#FFC592","patState":3,"rapportWrittenState":0,"patientFullName":"dfgdfgdfgdfg","studyDureeMinute":20,"payStateImage":"c_valider","bannerColor":"#e8a66c","borderColor":"#e8a66c","id":"5"}]

【问题讨论】:

  • 你能展示你的json返回的示例代码吗?
  • 不是要求完整的日历来触发 ajax,你不能只发送请求、获取数据、过滤数据、将其保存在数组中并将其作为完整日历的输入吗?
  • 因为我需要在同一页面中创建 5 个 fullcalendra 实例,并且每个人都需要显示来自同一个 JSON 提要的特定事件,我如何明确告诉他们每个人要获取/显示哪些数据.
  • 我不确定$(placeholder).fullCalendar('removeEvents', event.id); 是否有效。我也对事件使用这种语法:events: { url: 'path/events.php', } 现在我正在测试你的情况。
  • 我可以显示我对此没有任何问题的事件,我的问题是我如何才能从充满事件的 JSON 提要中仅显示特定的满足条件事件(换句话说,我有一个 JSON一天内所有 5 个房间的饲料,我希望每个日历都显示一个房间的事件,如何实现?)

标签: javascript jquery json jsf-2 fullcalendar


【解决方案1】:

当我使用 JSF 时,通过使用 ajax oncomplete 从服务器端调用 fullcalendar 来完成。

  1. 从数据库加载特定数据。
  2. 使用 GSON 将其转换为 JSON 字符串。
  3. 将事件数组加载到日历中。

希望这会有所帮助。

【讨论】:

    【解决方案2】:
    var eventStore;// store pre filtered events here so we can get at them later
    ...
    events: function(start,end,callback) {
        $.ajax('http://www.myendpoint.com/getevents.php', {start:start,end:end}, function(data) {
            var events = JSON.parse(data);
            eventStore = events;
            var newEventList = [];
            for(var i = 0; i < events.length; i++){
                if(events.salle == true){
                    newEventList.push(events[i]);
                }
            }
            callback(newEventList);
        });
    }
    

    让您的 web 服务过滤数据并返回您需要的内容可能是最有意义的,但您可以使用上面的自定义函数在显示之前过滤事件。

    【讨论】:

      【解决方案3】:

      我不是很擅长完整的日历,但我找到了解决您问题的方法

      删除事件后,必须重新渲染所有事件:

      $(placeholder).fullCalendar('removeEvents', event.id);
       setTimeout(function(){
       $(placeholder).fullCalendar("rerenderEvents");
      },1);
      

      我肯定会使用超时。正在测试 fullcalendar-2.2.3 全新下载。

      编辑: 确保您的变量和 if 条件。

      【讨论】:

      • 它现在工作了,但我看到所有事件,然后我看不到的事件消失了。
      • 但是没有更好的解决方案,比如只获取我需要的数据吗?
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-04-22
      • 1970-01-01
      • 2015-01-12
      • 2023-03-05
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多