动态切换资源列可见性 [英] Dynamically toggle resource column visibility

问题描述

我在webapp上有一个FullCalendar调度程序，该调度程序对资源和事件有2种方式的数据绑定，所有这些工作都很好.我希望能够向用户显示一个下拉列表，使他们能够切换列的可见性，最好是完全在客户端.

I have a FullCalendar scheduler on a webapp which has 2 way databinding for resources and events, all working great. I want to be able to present the user with a dropdown that enables them to toggle the visibility of a column, ideally completely client side.

我尝试了addResource/removeResource的组合，但是我的问题是日历的重新呈现(例如，当添加新事件时)然后显示先前删除的资源.我可以解决此问题，但是更喜欢使用JS/CSS的简单方法.我目前无法找到一种将资源设置为不可见或宽度为零的方法-这可能吗?

I have tried a combination of addResource / removeResource however my issue here is that a rerender of the calendar (e.g. when a new event is added) then displays the previously removed resource. I can work around this however would prefer a really simple approach using JS / CSS. I currently cannot find a way to set a resource to not be visible, or to have zero width - is this possible?

推荐答案

有一个简单的方法可以做到这一点:

There is an easy way to do this:

1. 将资源存储在数组变量 resourceData 中.
2. 创建另一个名为 visibleResourceIds 的数组，以存储要显示的任何资源的ID.
3. 在资源回调函数中，过滤 resourceData 以仅包含 visibleResourceIds 中存在资源ID的资源.返回过滤后的数组，fullcalendar只会为您添加所需的资源.

1. Store resources in an array variable resourceData.
2. Create another array called visibleResourceIds to store the ids of any resources you want to show.
3. In the resources callback function, filter resourceData to only contain the resources where the resource id exists in visibleResourceIds. Return the filtered array and fullcalendar will only add the desired resources for you.

要从视图中删除资源，只需从 visibleResourceIds 和refetchResources中删除资源ID.要重新添加资源，请将ID添加到 visibleResourceIds 和refetchResources.完成.

To remove a resource from view, simply remove the resource id from visibleResourceIds and refetchResources. To add the resource back in, add the id to visibleResourceIds and refetchResources. DONE.

JSFiddle

var resourceData = [
  {id: "1", title: "R1"},
  {id: "2", title: "R2"},
  {id: "3", title: "R3"}
];

var visibleResourceIds = ["1", "2", "3"];

// Your button/dropdown will trigger this function. Feed it resourceId.
function toggleResource(resourceId) {
  var index = visibleResourceIds.indexOf(resourceId);
  if (index !== -1) {
    visibleResourceIds.splice(index, 1);
  } else {
    visibleResourceIds.push(resourceId);
  }
  $('#calendar').fullCalendar('refetchResources');
}

$('#calendar').fullCalendar({
  defaultView: 'agendaDay',

  resources: function(callback) {
    // Filter resources by whether their id is in visibleResourceIds.
    var filteredResources = [];
    filteredResources = resourceData.filter(function(x) {
      return visibleResourceIds.indexOf(x.id) !== -1;
    });
    callback(filteredResources);
  }
});

这篇关于动态切换资源列可见性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！