动态切换资源列可见性

Posted 2021-04-07

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

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

答案

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

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

要从视图中删除资源，只需从visibleResourceIds和refetchResources中删除资源ID。要重新添加资源，请将id添加到visibleResourceIds和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);
  }
});

另一答案

我遇到了同样的挑战。我使用复选框而不是下拉列表，但工作方式是相同的。

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

/*retireve 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();

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

干杯

另一答案

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