Question

我使用这个简单的Javascript代码（作为字符串附加到CGridView.selectionChanged属性）：

'function(id){location.href = update?id="+$.fn.yiiGridView.getSelection(id);}'

捕获点击任意网格视图的行，并将用户重定向到该特定行条目的update操作。

如何更改它以仅在双击时作出反应？ CGridView仅公开selectionChanged个事件，不公开click或dblclick。

编辑：如果我应该在纯jQuery / Javascript中执行此操作，那么要使用哪个选择器，以确保双击事件将正确绑定到所有CGridView的行和使用什么样的jQuery代码来获取构建路由所需的ID。

Answer 1

正如我的问题所述，CGridView仅公开selectionChanged个自己的事件，没有click或dblclick，所以这似乎是一条错误的道路。看来，唯一的方法就是自己捕捉它。

在dblclick上捕获CGridView是一件容易的事：

<script>
    $(document).ready(function()
    {
        $('body').on('dblclick', '#files-grid tbody tr', function(event)
        {
            //Do something...
        });
    });
</script>

其中#files-grid是CGridView的ID，在其配置数组的id项中给出。

获取被点击的模型/行/记录的ID似乎也是一件容易的事：

var rowId = parseInt($.fn.yiiGridView.getSelection('files-grid')[0]);

不幸的是，这种方法不可靠（如果不是：完全错误），因为它是100％基于用户在网格视图中当前所做的选择。如果您将ID丢弃到控制台（console.log(rowId);）并开始在同一网格视图行中反复点击，您很快就会注意到，您正在获得正确的信息仅每秒钟点击一次。在其他所有时间，您都需要NaN。

为什么呢？非常简单。此方法基于选择，每次单击都会从当前行中删除选择。有关详细信息，请查看jquery.yiigridview.js implementation。

因此，我们需要提供更好，更可靠的东西。分析getSelection method in above mentioned jquery.yiigridview.js code给了我一些线索，我带来了类似的东西：

$('body').on('dblclick', '#files-grid tbody tr', function(event)
{
    var
        rowNum = $(this).index(),
        keys = $('#files-grid > div.keys > span'),
        rowId = keys.eq(rowNum).text();

    console.log(rowId);
});

此代码完全与选择无关，您应始终获取rowId的正确值。

现在将其放入网址更改代码：

location.href = '<?php echo Yii::app()->createUrl('files/manage/view'); ?>?id=' + rowId;

并且...... 瞧瞧！您已经重定向到所选操作，使用正确的模型ID ，只需双击任何网格视图行即可。

BTW：您可以将dblclick事件更改为click并使用event.ctrlKey（或event.altKey或event.shiftKey），例如，如果您愿意单击键盘上的Ctrl（或Alt或Shift）键即可做出反应。您可以检查event.which是否等于2（或3），如果您想对中间（或右侧）鼠标按钮单击做出反应（仅在jQuery中对此属性进行规范化） - details）。

以下是整个代码，供参考：

<script>
    $(document).ready(function()
    {
        $('body').on('dblclick', '#files-grid tbody tr', function(event)
        {
            var
                rowNum = $(this).index(),
                keys = $('#files-grid > div.keys > span'),
                rowId = keys.eq(rowNum).text();

            location.href = '<?php echo Yii::app()->createUrl('files/manage/view'); ?>?id=' + rowId;
        });
    });
</script>

当然，这是出于学习目的而编写的。对于应用程序的生产版本，您应该编写更通用的代码（因此可以将其附加到任何网格视图），将其迁移到外部.js文件，缩小和限制它并执行其他一些操作。< / p>

捕获双击Yii的CGridView行

1 个答案: