在Yii Framework中切换列可见性 [英] Toggle Column visibility in Yii Framework

问题描述

我正在使用CGridView小部件从模型中获取数据(39列)，但是Table的方式变大了，我需要添加一个按钮来切换一些可见或不可见的列(比如说20)，也许jQuery，但我不知道从哪里开始，任何想法都将不胜感激！

I'm using the CGridView widget to get data (39 columns) from a model, but the Table its way to large, i need to add a button to toggle some columns visible or not (lets say 20), maybe with jQuery, but i have no idea where to start, any ideas would be appreciated!

<?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'
    ),
)); ?>

推荐答案

要捕获"您的列，必须以某种方式对其进行标识.例如.您可以添加课程.代替

To „catch" your columns they must be identified in some way. E.g. you can add class. To do so instead of

'zipcode',

你可以写

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

然后，您需要注册类似于以下内容的jQuery脚本:

Then you need to register jQuery script similar to:

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

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

And finally CSS – in your stylesheet, or inline:

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

然后添加链接或smth.这将切换折叠:

Then add a link or smth. which will toggle collapse:

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

就是这样. NB代码未经测试，这只是可能的算法.另外，还必须折叠页眉/页脚单元格(如果存在).

Thats's it. NB code is not tested, this is just possible algorithm. Also you must collapse your header/footer cells if they exist.

这篇关于在Yii Framework中切换列可见性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！