Jquery 在Yii框架中切换列可见性

我正在使用CGridView小部件从一个模型中获取数据（39列），但是表太大了，我需要添加一个按钮来切换一些列是否可见（比如说20列），可能是jQuery，但我不知道从哪里开始，任何想法都会很感激

<?php $this->widget('zii.widgets.grid.CGridView', array(
    'id'=>'contacts-grid',
    'itemsCssClass' => 'table table-striped table-bordered table-hover table-checkable table-responsive ',
    'dataProvider'=>$model->search(),
    'filter'=>$model,
    'columns'=>array(

         'patient_id',
         'first_name',
         'last_name',
         'sex',
         'birth_date',
         'home_phone',
         'work_phone',
         'city',
         'email_address',
         'patient_balance',
         'last_date_seen',
         'date_entered',
         'first_visit_date',
         'charges_mtd',
         'charges_ytd',
         'status',

         /* Hide/Show this ones */
         'next_regular_appointment',
         'next_preventive_appointment',
         'cancelled_appointments',
         'failed_appointments',
         'address_1',
         'address_2',
         'state',
         'zipcode',
         'responsible_party',
         'compute_0013',
         'compute_0014',
         'marital_status',
         'responsible_party_status',
         'prim_employer_id',
         'sec_employer_id',
         'policy_holder_status',
         'patient_status',
         'next_recall_date',
         'salutation',
         'receive_email',
         'ortho_patient',
         'preferred_name',
         'middle_initial'
    ),
)); ?>

---

要“捕获”您的列，必须以某种方式标识它们。例如，您可以添加类。要这样做，而不是

'zipcode',

你可以写

array (
    'name' => 'zipcode',
    'cssClassExpression' => '"collapsable"',
),

然后需要注册jQuery脚本，类似于：

Yii::app()->clientScript->registerScript( 'collapse-table-columns', '
    $("#your_clickable_element").click(function(e){
        e.preventDefault();
        $("table .collapsable").toggleClass("collapsed");
    });
', CClientScript::POS_READY );

最后是CSS–在样式表或内联中：

Yii::app()->clientScript->registerCss( 'collapsable-columns', '
    table .collapsed {display:none}
' );

然后添加链接或smth。这将切换到折叠：

<a id="your_clickable_element" href="#">toggle</a>

---

就是这样。NB代码没有经过测试，这只是可能的算法。如果页眉/页脚单元格存在，您还必须折叠它们。

太棒了！因为页眉和过滤器最终使用的是

数组（'name'=>'zipcode'，'csclassexpression'=>''collapsable'，'headerHtmlOptions'=>数组）（'class'=>'collapsable'），'filtertmloptions'=>array（'class'=>'collapsable'），），