动态切换资源列可见性

Question

>我在Web应用程序上有一个FullCalendar调度程序，它具有用于资源和事件的2路数据绑定，都运行良好。 我希望能够向用户显示一个下拉列表，使他们能够切换列的可见性，理想情况下完全是客户端。

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

Answer 1

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

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

要从视图中删除资源，只需从 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);
  }
});

Answer 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();

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

干杯

Answer 3

您可以使用resourceColumns选项。在列对象中，可以将 width 属性设置为像素数或百分比。如果在此处传递函数，则可以轻松地在其他地方处理 width 属性。然后，隐藏/显示函数可以将宽度设置为 0 以隐藏列。之后，您可以触发reinitView来更新视图：$('#calendar').fullCalendar("reinitView");