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

时间:2014-06-14 23:00:07

标签: javascript php jquery yii cgridview

我想知道如何使用向上和向下箭头按钮在Yii’s CGridView中移动选定的行。我的情况是我有一个带有pagination = false(没有分页)的CGridView。我希望在加载页面时自动选择第一行。然后,当用户移动向下箭头时,它将选择第二行。关键是移动选择行而不是上下移动行。

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

2 个答案:

答案 0 :(得分:1)

我发现使用jquery更容易,因为yii CGridView javascript getSelection将返回模型的id,而id在我的情况下没有显示在CGridView(表格)的任何地方。

这是我的解决方案

<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');
        }
    }
}

答案 1 :(得分:0)

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

我不认为有一个Yii解决方案可以做到(也许在其中一个扩展中)。

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

我认为你需要编写一个javascript函数,将类"selected"添加到网格的下一行(并将其从前一行中删除),以获得你想要的东西。

也许你可以使用Yii的一些builtin jquery functions to manipulate a CGridView。我已经写了一些关于这件事的文章,但这是一篇未完成的帖子,对不起。