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

【问题标题】：Restricting selectable row of Yii CGridView to checkbox column将 Yii CGridView 的可选行限制为复选框列
【发布时间】：2016-02-03 08:04:14
【问题描述】：

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

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

将 selectableRows 设置为 2 使得单击 gridview 内行的任何部分也可以“选中/取消选中”该行。这是一个有用的功能，因此如果复选框图标非常小，用户将不再需要特别勾选它。

不幸的是，我需要将复选框勾选限制为仅在单击复选框图标/输入元素本身时切换或至少在 它所在的列，而不是在该行的任何其他列。似乎此功能尚未制作或不会制作，我正在寻找以某种方式覆盖 Js 以实现此目的，但我不知道从哪里开始。谢谢。

【问题讨论】：

标签： javascript jquery gridview checkbox yii

【解决方案1】：

您可以在您的代码中覆盖 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 绑定

【讨论】：

我有同样的问题。我应用了您的解决方案，但它给了我too much recursion for ( old = elem; cur; cur = cur.parentNode ) { 错误。我在控制台中检查了它。
@Jazz 您需要检查与网格 tr 绑定的其他事件
没有绑定其他事件。但是如果这个问题通过添加一个 'selectableRows' => 1, 来解决。我不添加其他内容。它完美无缺。合适吗？
@Jazz 我认为使用 'selectableRows' => 1 您将只能选中一个复选框
是的，这也是正确的selectableRows=>1 只能选中一个复选框。但奇怪的是，它也阻止了点击<tr>时的复选框检查。

【解决方案2】：

在'columns' 中，您应该像这样添加新数组作为第一个元素：

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

并从您的数组索引中删除 'selectableRows'。该数组是其中带有复选框的列的配置。因此，基本上，您应该添加到上面显示的 $columnsvariable 数组中。这是一个例子：

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

【讨论】：