在Yii Framework中切换列可见性

时间:2014-11-23 02:07:03

标签: jquery yii cgridview

我正在使用CGridView小部件从模型中获取数据(39列),但是Table的方式很大,我需要添加一个按钮来切换一些可见或不可见的列(比方说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'
    ),
)); ?>

1 个答案:

答案 0 :(得分:2)

要“抓住”您的列,必须以某种方式识别它们。例如。你可以添加课程。这样做而不是

'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代码未经过测试,这只是可能的算法。如果它们存在,您还必须折叠页眉/页脚单元格。