編集機能付きのJQGrid

Question

Jqridについてのstackoverflowスレッドは非常に優れていますが、私はいくつか質問があります。

1-add、edit、delete、cancel機能を持つ編集可能な列のグリッドが必要です。

2つ後、私はいくつかのイベントバインディングを必要とします：行を選択してその子をロードするためのイベント
レコード。

3つで、私がサブミットをクリックすると、レコード全体をページに保存しているのと同じように、他にも のエンティティの詳細があります。

私は何かしましたが、別の解決方法を検索しましたが、今までできませんでした。ここで

は私の少しの努力である:)

function JSMethod() { 
     var grid = $("#table"); 
     var ids = grid.getDataIDs(); 
     for (var i = 0; i < ids.length; i++) { 
      grid.editRow(ids[i], true); 
     }; 
    } 

    $.ajax({ 
     type: "GET", 
     url: '<%= ResolveClientUrl("~/WebService.asmx/GetLookup") %>', 
     dataType: "text", 
     success: function (result) { 
      alert('Success'); 
      lookup = result; 


     }, 
     async: false 
    }); 

    $(function() { 


     var lookup = ""; 



     $("#table").jqGrid({ 
      datatype: function (pdata) { getData(pdata); }, 
      height: 250, 
      editurl: 'default.aspx', 
      gridview: true, 
      colNames: ['ID', 'First Name', 'Last Name', 'Buttons'], 
      colModel: [ 
      { name: 'ID', width: 60, sortable: false, hidden: true }, 
      { name: 'FirstName', width: 200, sortable: false }, 
      { name: 'LastName', width: 200, sortable: false, editable: true, edittype: 'select', stype: 'select', formatter: 'select', editoptions: { value:GetData, size: 30, maxlength: 20} }, 
      { name: 'Buttons', width: 200, sortable: false } 

     ], 
      onSelectRow: function (rowId) { 
       if (rowId && rowId !== lastRowId) { 
        if (lastRowId != null) { 
         var a = $('#list').saveRow(lastRowId, false, 'clientArray'); 
         changedRows[lastRowId] = $('#list').getRowData(lastRowId); 
        } 
        jQuery('#list').editRow(rowId, true); 
       } 
       lastRowId = rowId; 
      }, 
      imgpath: '<%= ResolveClientUrl("~/styles/redmon/images") %>', 
      caption: "Sample JSON data retrieved from ASMX web services" 
     }); 
    }); 
    function getData(pData) { 
     $.ajax({ 
      type: 'POST', 
      contentType: "application/json; charset=utf-8", 
      url: '<%= ResolveClientUrl("~/WebService.asmx/GetListOfPersons") %>', 
      data: '{}', 
      dataType: "json", 
      success: function (data, textStatus) { 
       if (textStatus == "success") 
        ReceivedClientData(JSON.parse(getMain(data)).rows); 
      }, 
      error: function (data, textStatus) { 
       alert('An error has occured retrieving data!'); 
      } 
     }); 
    } 
    function ReceivedClientData(data) { 
     var thegrid = $("#table"); 
     thegrid.clearGridData(); 
     for (var i = 0; i < data.length; i++) 
      thegrid.addRowData(i + 1, data[i]); 
    } 
    function getMain(dObj) { 
     if (dObj.hasOwnProperty('d')) 
      return dObj.d; 
     else 
      return dObj; 
    } 

Answer 1

私はあなたがこのリンクを通過する場合、私はあなたが編集可能なグリッドを作成することができます確信して答え http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing を得ました。