Возможно ли скрыть колонку при помощи js в gridview yii2?

Question

[di]

Хочу скрывать/показывать колонку в gridview без перезагрузки страницы. Нашел вариант здесь, но он не работает
https://overcoder.net/q/804136/%D0%BC%D0%BE%D0%B6%...
Вот как я пытался ее скрыть.

[
         'class' => 'yii\grid\CheckboxColumn',
         'header' => Listing::listingLabel(Listing::ACTIONS),
         'options' => [ 'id' => 'listing-actions', 'style' => 'display:none'],
         'name' => 'actions[]'
]

Есть еще вариант тащить плагин Data Tables - https://stackoverflow.com/questions/46968615/yii2-...
Но уж очень не хочется обмазываться тонной плагинов ради плевого дела казалось бы.
Есть ли какой то легкий и простой способ добиться желаемого эффекта.

Comments

[Дмитрий]

Добрый день.
При клике на кнопку отправлять запрос на сервер.
На сервере проверять, что пришло.
Например, если пришёл "0", то формировать gridview без колонки и возвращать вид при помощи renderAjax(), а если пришла "1", то всё наоборот.

[di]

Дмитрий, я сделал так уже

[
         'class' => 'yii\grid\CheckboxColumn',
         'header' => Listing::listingLabel(Listing::ACTIONS),
         'options' => [ 'id' => 'listing-actions', 'style' => 'display:none'],
         'name' => 'actions[]',
          'contentOptions' => ['class' => 'listing-actions', 'style' => 'display:none'],
         'headerOptions' => ['class' => 'listing-actions', 'style' => 'display:none'],
          'filterOptions' => ['class' => 'listing-actions', 'style' => 'display:none'],
]

let showActions = false;
$("#action-products").click(function(){
    if(!showActions){
        $('.listing-actions').css("display","");
        showActions = true;
    } else {
        $('.listing-actions').css("display", "none");
        showActions = false;
    }
    return false;
});
JS;

Не чересчур костыльно?

[Дмитрий]

di, почему, нормально, только подработать надо немного. Хотел Вам предложить только что и такой вариант, но Вы сами всё решили)))

[Дмитрий]

di, уберите display свойство, а js может быть таким

echo Html::button('hide', ['id' => 'hide-column']);
 $this->registerJs("
    $('#hide-column').on('click', function(){
        $('.listing-actions').toggle(); 
    })
 ")

[Дмитрий]

di, первый вариант, который я предложил, более костыльный))) Не фиг гонять данные лишний раз)))

Answer 1

[Максим]

'headerOptions' => ['class' => 'hidden-xs'],
'filterOptions' => ['class' => 'hidden-xs'],
'contentOptions' => ['class' => 'hidden-xs'],
//'footerOptions' => ['class' => 'hidden-xs'],

Далее на класс навешивайте обработчик JS. В данном случае, при использовании bootstrap 4 будет столбец скрыт на маленьких версиях экрана.