yii2 gridview 切换栏 [英] yii2 gridview toggle column

问题描述

我是 yii2 的新手.并慢慢学习.我在我的项目中使用 yii2 gridview 我想动态显示隐藏列.需要这样的东西 [https://datatables.net/examples/api/show_hide.html => 演示在此链接中给出] 但不明白如何做到这一点?有人可以帮忙吗?

I am new to yii2. and learning it slowly. I am using yii2 gridview in my project I want to show hide columns dynamically. requires something like this [https://datatables.net/examples/api/show_hide.html =>demo is given in this link] but cant understand how to do this? can anybody help?

代码=>

<?php 

    $gridColumns = [
                     ['class' => 'yiigridSerialColumn'],
                     ['class' => 'yiigridCheckboxColumn'],  
[
                    'header' => '<input type="checkbox"> Name',//onclick of this checkbox show / hide the column 
                    'attribute'=>'name',                                          
                ],   
                    'company_mail', 
                    'no_employees',
                    'email:email', 
                    .
                    .
                    .];
            echo GridView::widget([
            'dataProvider' => $dataProvider,
            'filterModel' => $searchModel,
            'columns' => $gridColumns,
    ]); 
    ?>

也试过这样=> 'visible'=>false,但它永久隐藏...在哪里添加 if() 条件 ??

also tried like this=> 'visible'=>false, but it hides permanently... where to add if() condition ??

如何解决这个问题..有人能解决吗?

how to solve this ..can anyone solve?

还有 [在 Yii 框架中切换列可见性cgridview 我可以在 yii2 中使用这个]

also [Toggle Column visibility in Yii Framework is for cgridview can i use this one in yii2]

推荐答案

这是使用 JavaScript 或 jQuery 完成的.您提供的 example 使用了 jQuery.如果您检查页面，您可以找到使其工作所需的所有代码.

This is done using JavaScript or jQuery. The example you gave uses jQuery. If you inspect the page, you can find all bits of code you need to get this working.

切换列的链接具有 data-column 属性，其中包含列的编号(从 0 开始):

Links that toggle columns have data-column attribute which contains the number of the column (starting with 0):

<a class="toggle-vis" data-column="0">Name</a>

页面包含脚本，它根据列的编号来切换列(使用 DataTables 插件):

The page contains script, which toggles the column by it's number (using DataTables plug-in):

$(document).ready(function() {
    //getting the table that we will be working with
    var table = $('#example').DataTable( {
        "scrollY": "200px",
        "paging": false
    } );

    $('a.toggle-vis').on( 'click', function (e) {
        e.preventDefault();

        // Get the column by number
        var column = table.column( $(this).attr('data-column') );

        // Toggle the visibility
        column.visible( ! column.visible() );
    } );
} );

这是一个简单的脚本，可以处理前面提到的链接(在这种情况下 - 从 1 开始)和任何表(只需将 #example 与您的 gridview 的 id):

Here is a simple script that will work with previously mentioned links (in this case - starting with 1) and any table (just switch #example with your gridview's id):

$(document).ready(function() {
    $('a.toggle-vis').on('click', function(e) {
        var column = $(this).attr('data-column');
        $('#example th:nth-child(' + column + '), #example td:nth-child(' + column + ')').toggle();
    });
});

给 gridview 表 ID:

Give gridview table id:

echo GridView::widget([
       'tableOptions' => ['id' => 'example'],
       'class' => 'table table-striped table-bordered'
])

这篇关于yii2 gridview 切换栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！