jqgridのクライアント側のデータ操作

Question

私はJQGridでいくつかの成功を収めてきましたが、データを一度ロードしてクライアント側ですべてのクラッシュ操作を実行する必要がある状況になっています。完全に固まった。 私はスタックオーバーフローとグーグルを行ってきましたが、シンプルなclientside jqgrid操作の良い例は見つけられないようです（私は間違っているかもしれませんが、公式のjqgridドキュメントでクライアントサイドのものを見つけることはできませんでした）。 は、私がここでの例を利用することを試みた：

http://www.ok-soft-gmbh.com/jqGrid/LocalFormEditing.htm

が、私はまだアヤックス/ javaxcript/jQueryを使って初心者だし、それはやや圧倒的だったと私はちょうど私のグリッドに機能し、それを得ることができませんでした。 チュートリアルへのヒントやリンクは本当にありがたいです。次のように私のコードと私は、これまでのプロセスについて収集した は次のとおりです。

私は私のグリッドを持っている：

editSettings = { 
       jqModal: false, 
       reloadAfterSubmit: false, 
       closeOnEscape: true, 
       savekey: [true, 13], 
       closeAfterEdit: true, 
       onclickSubmit: editSubmit, 
       height: 200, 
       width: 400 
      }, 
      addSettings = { 
       jqModal: false, 
       reloadAfterSubmit: false, 
       savekey: [true, 13], 
       closeOnEscape: true, 
       closeAfterAdd: true, 
       onclickSubmit: addSubmit, 
       height: 200, 
       width: 400 
      }, 
     $('#engineerGrid').jqGrid({ 
     datatype: 'json', 
     colNames: ['Engineer Name', 'Engineer Type', '% Utilization'], 
     colModel: [ 
     {name: 'name', index: 'name', width: 150, align: "left", editable: true, edittype: "select", 
     editoptions: { value: "@(Model.engineerOptions)" }, sorttype: 'string', formatter: 'select' 
    }, 
     { name: 'type', index: 'type', width: 150, align: "left", editable: true, edittype: "select", 
      editoptions: { value: "@(Model.typeOptions)" }, formatter: 'select' 
     }, 
     { name: 'ut', index: 'ut', width: 125, align: "left", editable: true, sorttype: 'number', formatter: 'number' } 
      ], 
     rowNum: 10, 
     rowList: [5, 10, 20], 
     pager: '#pager', 
     gridview: true, 
     rownumbers: true, 
     autoencode: true, 
     ignoreCase: true, 
     sortname: 'invdate', 
     viewrecords: true, 
     sortorder: 'desc', 
     loadonce: true, 
     caption: 'Project Engineers', 
     editurl: 'clientArray', 
     url: '@Url.Action("EditProjectEngineerJQGridData","Project",new{projID = Model.projectID})' 
    }).jqGrid('navGrid', '#pager', {}, editSettings, addSettings, delSettings); 
}); 

私は、サーバーからJSON情報を取得していると私は私が持っているためだと思いますloadonce：true set jsonからlocalにデータ型を切り替える必要があります。これが私が混乱し始めるところです。すべての機能を手作業で記述し、onclickSubmitでそれらにリンクする必要がありますか？そのような場合、誰かがデータを正しく取得/設定する方法を説明してもらえますか？

addSubmit = function(){ 
       //I think something needs to go here? 
       }; 

編集：

は、私はこれを見ている人のために繰り返すだろうと思っていました。私は多くの経験がないので、これは低レベルかもしれませんが、多分初心者の説明から恩恵を受ける他の初心者かもしれません。ローカルデータを使って作業する場合は、フォーム編集を使用することはできません（削除を除く）。行を追加/編集するには、inlineNavを使用します。 私が働いているのは以下の通りですが、細かい部分がありますが、ローカルデータを追加/編集/削除するまでは機能します。

 $(document).ready(function() { 
    var myData = [], 
      editOptions = {}, 
      addOptions = {}, 
      lastSel = -1, 
      parameters = { 
       edit: false, 
       editicon: "ui-icon-pencil", 
       add: true, 
       addicon: "ui-icon-plus", 
       save: true, 
       saveicon: "ui-icon-disk", 
       cancel: true, 
       cancelicon: "ui-icon-cancel", 
       addParams: { useFormatter: false }, 
       editParams: {} 
      }, 
      myDelOptions = { 
       onclickSubmit: function (options, rowid) { 
        var grid = $('#engineerGrid'); 
        // delete the row 
        grid.delRowData(rowid);      
        grid.trigger("reloadGrid", [{ page: 0}]); 
        return true; 
       }, 
       processing: true 
      }; 

    $('#engineerGrid').jqGrid({ 
     datatype: 'json', 
     url: '@Url.Action("CreateProjectEngineerJQGridData", "Project")', 
     colNames: ['Engineer Name', 'Engineer Type', '% Utilization'], 
     colModel: [ 
     { name: 'name', index: 'name', width: 150, align: "left", editable: true, edittype: "select", 
      editoptions: { value: "@(Model.engineerOptions)" }, sorttype: 'string', formatter: 'select' 
     }, 
     { name: 'type', index: 'type', width: 150, align: "left", editable: true, edittype: "select", 
      editoptions: { value: "@(Model.typeOptions)" }, formatter: 'select' 
     }, 
     { name: 'ut', index: 'ut', width: 125, align: "left", editable: true, formatter: 'number', 
      formatoptions: { decimalPlaces: '0', defaultValue: '20'} 
     } 
      ], 
     rowNum: 20, 
     rowList: [5, 10, 20], 
     pager: '#pager', 
     gridview: true, 
     rownumbers: true, 
     autoencode: true, 
     ignoreCase: true, 
     sortname: 'invdate', 
     viewrecords: true, 
     sortorder: 'desc', 
     loadonce: true, 
     width: 750, 
     caption: 'Project Engineers', 
     editurl: 'clientArray', 
     onSelectRow: function (id) { 
     //if selected row changed restore values of previously selected row 
      if (id && id !== lastSel) { 
       jQuery('#engineerGrid').restoreRow(lastSel); 
       lastSel = id; 
      } 
      jQuery('#engineerGrid').editRow(id, true); 
     } 
    }).jqGrid('navGrid', '#pager', { edit: false, add: false, del: true }, editOptions, addOptions, myDelOptions); 
    jQuery("#engineerGrid").jqGrid('inlineNav', '#pager', parameters); 
}); 

とにかく、オレグのおかげで！

Answer 1

The demo私のold answerには、本当に長くハードなコアコードが含まれています。内部パラメータprocessing: trueで再生することに基づいています。初心者にとっては難しいことに同意しますが、今までjqGridはローカルフォームの編集をまだサポートしていません。

delSettingsのコードの部分はあまり複雑ではありません。だからあなたはそれを使うことができます。新しい行の行の編集と挿入には、インライン編集を使用できます。私は個人的に編集モードが最も快適だと思うのは、ユーザーが元の場所にあるすべてのデータをまだ見ているからです。したがって、フォーム編集の代わりに使用することができます。あなたが編集のために使用されていないテーブルを必要とする場合は、データの表示のために、私はondblClickRowコールバックを使用して編集を開始します。グリッドだけを編集する必要がある場合は、行選択の編集を開始することができます：onSelectRow。

navigator toolbarが好きな場合は、「削除」操作の場合はnavGrid、「追加」および「編集」操作の場合はinlineNavを使用できます。方法inlineNavはまだ比較的新しいものであり、まだ完璧ではないかもしれませんが、それを使うことができます。

ナビゲータツールバーの代わりに、「編集」と「del」ボタンが付いた追加の列にフォーマッタ： 'actions'を使用することができます。あなたは上記のすべての方法をあなたの好みに合わせて組み合わせることもできます。

the official demoページには、すべての方法の例があります。