动态切换资源列可见性答案

【问题标题】：Dynamically toggle resource column visibility动态切换资源列可见性
【发布时间】：2018-01-24 16:44:52
【问题描述】：

我在一个 webapp 上有一个 FullCalendar 调度程序，它有 2 路数据绑定资源和事件，所有工作都很好。我希望能够向用户展示一个下拉菜单，使他们能够切换列的可见性，最好是完全客户端。

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

【问题讨论】：

“重新渲染日历（例如，添加新事件时）然后显示之前删除的资源”。你能显示重现这个的代码吗？我做不到 - 请参阅jsfiddle.net/toytd26b/10 的演示 - 单击“删除资源”按钮以使用 fullcalendar 的 removeResource 删除资源，然后在日历上拖动以添加事件。被移除的资源保持被移除。您的页面是否在创建活动时发回？
@ADyson 如果refetchResourcesOnNavigate 为真，它将再次添加资源。不确定 OP 是否设置了该选项，但这是我目前遇到的问题。

标签： fullcalendar fullcalendar-scheduler

【解决方案1】：

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

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

要从视图中删除资源，只需从 visibleResourceIds 中删除资源 id 并重新获取资源。要重新添加资源，请将 id 添加到 visibleResourceIds 并重新获取资源。完成。

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);
  }
});

【讨论】：

对于使用 FullCalendar 5 的用户：将 resources: function(callback) { 更改为：resources: function(fetchInfo, successCallback, failureCallback) { 和 callfack(filteredResources) 更改为 successCallback(filteredResources);

【解决方案2】：

我也有同样的挑战。我使用复选框而不是下拉菜单，但工作原理是一样的。

我的资源存储在一个变量中，当我取消选中某个框时，该资源被删除，该资源的对象被添加到另一个以resourceId为键的数组中，并添加到对象中的索引以恢复相同的对象列原来的样子。重新选中该框时，将对象添加到资源数组并重新获取资源。

/* retrieve the resources from the server */
var planningResources;
var removedResource = [];

$.ajax({
    url: '/planning/resources/',
    method: 'get',
    success: function (response) {
        planningResources = response;
        showCalendar();
    }
    , error: function () {
        if (typeof console == "object") {
            console.log(xhr.status + "," + xhr.responseText + "," + textStatus + "," + error);
        }
    }
});

/* create the calendar */
showCalendar = function () {
    $('#calendar').fullCalendar({
        ...
    });
}

/* checkbox on click */
$('.resource').click(function() {
    var resourceId = $(this).val();
    var hideResource = !$(this)[0].checked;
    $('.status:checkbox:checked').each(function () {
    });
    if(hideResource) {
        $.each(planningResources, function(index, value){
            if( value && value.id == resourceId ) {
                value.ndx = index;
                removedResource[resourceId] = value;
                planningResources.splice(index,1);
                return false;
            }
        });
        $('#planningoverview').fullCalendar(
            'removeResource',
            resourceId
        );
    }
    else {
        planningResources.splice(removedResource[resourceId].ndx, 0, removedResource[resourceId]);
        $('#planningoverview').fullCalendar('refetchResources');
    }
});

showCalendar();

它可能不会在选美比赛中获得第一名，但它对我有用......

干杯

【讨论】：

【解决方案3】：

您可以为此使用resourceColumns 选项。在列对象中，您可以将width 属性设置为像素数或百分比。如果你在这里传递一个函数，你可以很容易地在其他地方处理 width 属性。然后，您的隐藏/显示功能可以将 width 设置为 0 以隐藏该列。之后可以触发reinitView更新视图：$('#calendar').fullCalendar("reinitView");

【讨论】：