Yii CGridView使用鍵盤的箭頭向上和向下移動選定的行

Question

我在想如何使用箭頭按鈕向上和向下移動Yii’s CGridView中的選定行。我的情況是，我有一個分頁=假（無分頁）的CGridView。我想要在加載頁面時自動選擇第一行。然後，當用戶移動向下箭頭時，它將選擇第二行。重點是移動選擇行而不是上下移動行。

其主要思想與Excel類似。它將在驗證行時幫助用戶。

Answer 1

我想你必須爲此編寫自定義JavaScript。

我不認爲有一個Yii解決方案准備好了（也許在一個擴展中，也許）。

Yii 告訴你通過在網格中將類"selected"添加到<tr>s中選擇哪一行。

您需要編寫一個javascript函數，將類"selected"添加到網格中的下一行（並將其從前一行中刪除），以獲得您想要的內容。

也許你可以使用一些Yii的builtin jquery functions to manipulate a CGridView。我寫了一些關於這方面的內容，但這是一篇未完成的文章，對不起。

Answer 2

我發現使用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'); 
     } 
    } 
}