想與在線添加，編輯，創建的jqGrid，保存沒有任何按鈕

Question

下面是我的要求：

1. 最初的jqGrid應該是空的

2. 在jqGrid的的點擊一個新的行必須添加帶自動ID

3. 在一行數據失去重心應該被保存到DB

4. 在行用戶的點擊應該能夠編輯和在失去焦點數據應保存到DB

   var lastsel; 
   jQuery("#list").jqGrid({ 
       url: "/TransactionType/GetGridData/", 
       datatype: 'json', 
       mtype: 'GET', 
       height: "300", 
   
       colNames: ['Customer ID', 'Contact Name', 'Address', 'City', 'Postal Code'], 
       colModel: [ 
        { name: 'CustomerID', index: 'CustomerID', width: 100, align: 'left' }, 
        { name: 'ContactName', index: 'ContactName', width: 150, align: 'left', editable: true }, 
        { name: 'Address', index: 'Address', width: 300, align: 'left', editable: true }, 
        { name: 'City', index: 'City', width: 150, align: 'left', editable: true }, 
        { name: 'PostalCode', index: 'PostalCode', width: 100, align: 'left', editable: true } 
       ], 
   
       pager: jQuery('#pager'), 
       rowNum: 10, 
       rowList: [1, 3, 5, 10, 20, 30, 40, 50], 
       recordpos: 'right', 
       viewrecords: true, 
       sortorder: "desc", 
       sortname: "CustomerID", 
       sorttype: "integer", 
       multiselect: false, 
       caption: "Manipulating JSON Data", 
       emptyrecords: "No records found.", 
       loadtext: "Loading...", 
       loadonce: true, 
       pgtext: "Page {0} of {1}", 
       jsonReader: { 
        repeatitems: true, 
        cell: "cell" 
       }, 
   
       onSelectRow: function (id) { 
        if (id) { 
         if (id !== lastsel) { 
          jQuery('#list').jqGrid('restoreRow', lastsel); 
          jQuery('#list').jqGrid('editRow', id, true); 
          lastsel = id; 
         } else { 
          jQuery('#list').jqGrid('restoreRow', lastsel); 
          lastsel = ""; 
   
   
          debugger; 
          var rows = jQuery("#list").jqGrid('getRowData'); 
          var paras = new Array(); 
          for (var i = 0; i < rows.length; i++) { 
           var row = rows[i]; 
           paras.push($.param(row)); 
          } 
          var rids = $('#list').jqGrid('getDataIDs'); 
          var n = rids.length; 
          var nth_row_id = rids[n - 1]; 
   
          jQuery("#list").addRow(n + 1, parameters = { 
           edit: true, 
           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: {} 
          });      
   
   
         } 
        } 
   
   
   
   
       }, 
       editurl: "/TransactionType/GetTotalCount", 
   
   
   }); 
   

這是我的jqGrid在那裏我能夠加入該行，但不支持自動生成的ID，我不能夠調用控制器方法後，失去行或Enter鍵的焦點。

Answer 1

的jqGrid包括inlineNav方法，其允許添加到導航欄（由navGrid與add: false, edit: false選項通常被稱爲創建的，見the answer）添加，編輯，保存和取消按鈕。如果用戶點擊按鈕中的一個，則會調用相應的內聯編輯方法。可以使用editParams和addParams.addRowParams指定內聯編輯方法的任何其他選項（例如，請參閱here）。

您目前的代碼直接使用addRow。第二個選項（parameters =）包含錯誤的語法。如果您需要生成唯一的ID，我建議您使用$.jgrid.randId()而不是用法n + 1。 addRow的第一個也是唯一的參數是帶有選項的對象。如果直接使用adRow，則可以使用rowID選項指定新添加的行的標識。如果沒有指定rowID選項，則jqGrid會自動使用$.jgrid.randId()來生成新行的唯一rowid。

所有內聯編輯按鈕的id都是基於網格的id和後綴「_iladd」，「_iledit」，「_ilsave」，「_ilcancel」設置的。例如，網格有id="list"，那麼保存按鈕的ID將是"list_ilsave"。如果需要，您可以禁用任何按鈕的編號（例如$("#list_ilsave").removeClass('ui-state-disabled'); - 啓用保存按鈕和$("#list_ilsave").addClass('ui-state-disabled'); - 禁用它）。以同樣的方式，您可以使用jQuery.click來模擬點擊任何按鈕。例如$("#list_ilsave").click();將模擬點擊保存按鈕。

如果用戶點擊添加按鈕，新行（<tr>）將獲得額外的類"jqgrid-new-row"。您可以使用該事實查找由addRow添加的行。

您可以使用editoptions.dataEvents註冊blur或focusout。 The answer和the answer可能會提供一些可幫助您的代碼碎片。

成功保存後，使用數據庫中生成的值刷新網格的ID可能很重要。有很多方法可以實現這一點。最簡單的方法之一是成功保存行後重新加載網格。請參閱the answer中的代碼。另一種方法是從editurl（代碼中的「/ TransactionType/GetTotalCount」）中指定的web方法返回新的ID。使用aftersavefunc回調，您可以獲得editurl的響應並修改網格中的ID。以the answer中的aftersavefunc的較長代碼爲例。