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

问题描述

我是yii2的新手。并慢慢学习。
我在我的项目中使用yii2 gridview我想显示动态隐藏列。
需要类似这样的内容[ https://datatables.net/examples/api/show_hide .html =>演示在这个链接中给出]，但不知道如何做到这一点？任何人都可以帮忙吗？

code =>

 <？php 
 
 $ gridColumns = [
 ['class'=> 'yii\grid\SerialColumn']，
 ['class'=> 'yii\grid\CheckboxColumn']，
 [
'header'=> '< input type =复选框> Name'，// onclick this checkbox show / hide the column 
'attribute'=>'name'，
]，
'company_mail'，
'no_employees'， 
'电子邮件：电子邮件'，
。 
。 
。]; 
 echo GridView :: widget（[
'dataProvider'=> $ dataProvider，$ b $'filterModel'=> $ searchModel，
'columns'=> $ gridColumns， 
]）; 
？> 
  

也尝试过这样=> 'visible'=> false，
，但它永久隐藏...在哪里添加if（）条件??

如何解决这个问题..任何人都可以解决？

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

解决方案

使用JavaScript或jQuery。
您提供的示例使用jQuery。
如果你检查页面，你可以找到所有你需要的代码。

切换列的链接有

 < / code>属性包含列的数量（从0开始） a class =toggle-visdata-column =0>名称< / a> 
  

该页面包含脚本，通过它的编号切换列（使用DataTables插件）：

  $（document）.ready（function（）{
 //获取我们要使用的表b $ b var table = $（'＃example'）。DataTable（{$ b $scrollY：200px，
paging：false 
}）; 
 $ （'click'，function（e）{
 e.preventDefault（）; 
 
 //按列编号获取列
 var column = table.column（$（this）.attr（'data-column'））; 
 
 //切换可见性
 column.visible（！column。 visible（））; 
}）; 
}）; 
  

这是一个简单的脚本，可以与之前提到的链接一起使用（在这种情况下 - 起始与1 ）和任何表（只需切换 #example 与您的gridview的ID）：



<$ p $ on（'click'，function（e）{
var（$ document）.ready（function（）{
$（'a.toggle-vis'）。 （'+ column +'），#example td：nth-​​child（'+ column +'） '）'）。toggle（）;
}）;
}）;


给gridview表id：

  echo GridView :: widget（[
'tableOptions'=> ['id'=>'example']，
'class'=>'table table 
]）
  

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?

code=>

<?php 

    $gridColumns = [
                     ['class' => 'yii\grid\SerialColumn'],
                     ['class' => 'yii\grid\CheckboxColumn'],  
[
                    '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,
    ]); 
    ?>

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

how to solve this ..can anyone solve?

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

解决方案

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.

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>

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

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

Give gridview table id:

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

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