Скрытие столбцов с помощью начальной загрузки с помощью углового ui.grid

Question

Мне нужно использовать ui-grid в угловых js, и я делал небольшой тест, чтобы скрыть столбцы, основанные на классах начальной загрузки. Например, рассмотрите возможность иметь таблицу с 100 столбцами, но на мобильном вы хотите показать только 3 из них.

Это плункер

http://plnkr.co/edit/9TGp1vPZeOfKLjzezgUv?p=preview

Я использую:

cellClass:"hidden-sm",headerCellClass:"hidden-sm"

Как видите, столбец не показан, но сетка все еще занимает все пространство.

Любая помощь?

Answer 1

UI Grid, похоже, не поддерживает изменение размера с помощью CSS. Вы должны использовать свои собственные методы, чтобы установить видимость.

    function setColumnVisibility() {
        if (($(window).width()) <= 768) {
            $scope.gridOptions.columnDefs[1].visible = false;
            $scope.gridOptions.columnDefs[2].visible = false;
            $scope.gridOptions.columnDefs[4].visible = false;
        }

        if (($(window).width()) <= 992) {
            $scope.gridOptions.columnDefs[5].visible = false;
            $scope.gridOptions.columnDefs[7].visible = false;
        }
    }

    setColumnVisibility();

    $(window).resize(function() {
        setColumnVisibility();
    });

Answer 2

Вы можете использовать visible:false свойство столбца, чтобы он полностью скрылся.

http://plnkr.co/edit/Cj4yvmEEnrcziKl6FdyX?p=preview