2012-02-20 34 views
0

編集可能な特定の列のみを持つjqGridがあり、Tabキーを押して入力するとExcelと同様の機能を実装できるようにしたいと考えています。これらの列は、loadCompleteのすべての行でeditRowを呼び出すため、最初から編集できます。ユーザーはこれらの列のセルのいずれかをクリックして情報を変更できます。タブを押すと、現在の行の次の編集可能なセルに移動し、最後に移動し、タブをもう一度押すと、次の行の最初の編集可能なセルに移動します。 Enterキーを押すと、前の行のどのセルに関係なく、次の行の最初の編集可能なセルに移動します。セルのフォーカスが変更されるたびに、データがサーバーに保存されます。既に編集可能なセルのjqgridにExcelのような機能を追加する

私はかなりの研究を行ってきましたが、それほど効果がありませんでした。私は、どのボタンが押されたのかを確認し、適切なコードを実行するkeydownイベントとして、editoptionsおよびdataEventsの下のcolModelの各キー押しに対して機能を持っています。私が試した最初のことは、jqGridのeditCellメソッドを使って、次のセルの行と列を渡したところで、カーソルを移動したいのですが、それはうまくいかず、私はすでにeditRowすべての行に私はまた、$ .click()または$ .focus()を使用して移動しようとしているセルにフォーカスを変更しようとしましたが、それはどちらもうまくいきませんでした。

これらの列がぼやけている場合は、クライアント側で列の合計を再計算することに注意してください。私はsetTimeoutの中でフォーカスを変更しようとしたさまざまなものを入れてみましたが、どちらもうまくいきませんでした。

基本的には、編集可能にしたい列のセルはいつでも編集可能です。ユーザーはその特定のセルまたはタブをクリックするか、編集するために入力してください。これは、明確化のためにどのように見えるかです:助けを

http://cl.ly/2W3E1U3i1k3K0W2Y0r0n

ありがとう!

答えて

1

私はそれを理解することができました。なぜ私が理解するのがなぜか分かりませんでした。タブは、次の列に移動しますと入力しますが、常に最初の列が表示されますように

{ 
    type: 'keydown', 
    fn: function(e) { 
     var key = e.charCode || e.keyCode; 
     //TAB 
     if(key == jq.ui.keyCode.TAB) { 
      setTimeout(function() { 
       jq('#' + currentRowId + '_nextColName').focus(); 
       jq('#' + currentRowId + '_nextColName').select(); 
      }, 500); 
     } 
     //ENTER 
     else if (key == jq.ui.keyCode.ENTER) { 
      var nextRow = parseInt(currentRowId) + 1; 
      jq('#' + currentRowId + '_thisColName').blur(); 
      jq('#' + nextRow + '_firstColName').select(); 
     } 
    } 
} 

これは、それを作る:加工さ提供jqgridと私はjQueryのからの多くの異なるものを試していたと私は最終的に働く何かを見つけた何もありませんすべてのセルが常に編集可能であり、編集可能なセルをいつでもクリックすることができます。

関連する問題