Yii CGridView 使用键盘的箭头上下移动选定的行

Question

我想知道如何使用上下箭头按钮在Yii’s CGridView 中移动选定的行。我的情况是我有一个分页 = false（无分页）的 CGridView。我希望在加载页面时自动选择第一行。然后，当用户移动向下箭头时，它将选择第二行。重点只是移动选择行而不是上下移动行。

主要思想类似于 Excel。它将在验证行时帮助用户。

Answer 1

我发现只使用 jquery 会容易得多，因为 yii CGridView javascript getSelection 将返回模型的 id，而在我的案例中 CGridView（表）中的任何地方都没有显示 id。

这是我的解决方案

<script type="text/javascript">
shortcut.add("Down", function() {
    moveDown();
});

shortcut.add("Up", function() {
    moveUp();
});

function moveDown() {
    var rows = $('#form-detail-grid table tr');
    var currentRow = $("tr.selected").get(0);

    if (rows.length > 2) {
        if (currentRow === undefined) {
            rows.eq(1).addClass('selected');
        } else if ($(currentRow).next('tr').get(0) === undefined) {
            //do nothing
        } else {
            $(currentRow).next('tr').addClass('selected');
            $(currentRow).removeClass('selected');
        }
    }
}

function moveUp() {
    var rows = $('#form-detail-grid table tr');
    var currentRow = $("tr.selected").get(0);

    if (rows.length > 2) {
        if (currentRow === undefined) {
            rows.eq(1).addClass('selected');
        } else if ($(currentRow).prev('tr').get(0) === undefined) {
            //do nothing
        } else {
            $(currentRow).prev('tr').addClass('selected');
            $(currentRow).removeClass('selected');
        }
    }
}

Answer 2

我认为您必须为此编写自定义 javascript。

我认为没有为此准备好的 Yii 解决方案（也许在其中一个扩展中）。

Yii 告诉你通过将"selected" 类添加到网格中的<tr>s 中选择了哪一行。

我认为，您需要编写一个 javascript 函数，将 "selected" 类添加到网格中的下一行（并将其从前一行中删除）以获得您想要的。

也许你可以使用一些 Yii 的builtin jquery functions to manipulate a CGridView。我已经写了一些关于它的文章，但这是一篇未完成的文章，抱歉。