将Yii CGridView的可选行限制为复选框列

Restricting selectable row of Yii CGridView to checkbox column

本文关键字：复选框 Yii CGridView      更新时间：2023-09-26

我使用Yii，这里有一个CGridView，其中有一个CCheckBoxColumn作为定义列的一部分。

this->widget('zii.widgets.grid.CGridView', array(
    'dataProvider' => $dataProvider,
    'filter' => $model,
    'columns' => $columns
    ),
    'selectableRows'=>2
));

将selectableRows设置为2会使单击网格视图中行的任何部分也"选中/取消选中"该行。这是一个有用的功能，因此用户将不再需要勾选复选框图标，特别是在复选框图标很小的情况下。

不幸的是，我需要将复选框勾选限制为仅在单击复选框图标/输入元素本身或至少在中的列时切换，而不在行的任何其他列中。这个功能似乎还没有或不会实现，我想以某种方式覆盖Js来实现这一点，但我不知道从哪里开始。谢谢

在'columns'中，您应该添加新的数组作为第一个元素，如下所示：

    array(
        'class' => 'CCheckBoxColumn',
        'id'=>'selectableColumn',
        'selectableRows'=>2,
    ),

并从数组索引'selectableRows'中删除。这个数组是列的配置，里面有复选框。所以，基本上，你应该添加到上面给出的$columns变量数组中。以下是示例：

$this->widget('zii.widgets.grid.CGridView', array(
   'dataProvider' => $dataProvider,
   'filter' => $model,
   'columns' => array( // <- this is your $columns variable!
        array( // <- just add this array to your $columns var
            'class' => 'CCheckBoxColumn',
            'id'=>'selectableColumn',
            'selectableRows'=>2,
        ),
        'columnName1',
        'columnName2',
        ...
   ),
));

您可以在代码中覆盖js，请参阅下面的示例：

停止点击事件在网格tr 上传播的代码

Yii::app()->clientScript->registerScript('tr-event-propagation', '$(".grid-view tr").click(function(event){
    event.stopPropagation();
});');

要在行中添加复选框的列阵列的代码

array(
   'class' => 'CCheckBoxColumn',
   'selectableRows' => null,
   'htmlOptions' => array(
                         'onclick' => 'js: $(this).find("input").trigger("click")'
                    ),
   'checkBoxHtmlOptions' => array(
                             'onclick' => 'js: $(this).trigger("click")'
                            ),
   'selectableRows' => 2
),

希望这个解决方案能帮助你

注意：使用event.stopPropagation();可能会中断与tr或tr 的其他元素的其他javascript绑定

相关文章：