Jqgrid在inlineNav樣式中添加新的空行

Question

我想在我的JqGrid下面創建AddEditSave和Delete按鈕。

<script type="text/javascript"> 
jQuery(document).ready(function() { 
    var lastSel = 0; 
    jQuery("#list").jqGrid({ 
     url: '/SpeakerJqgrid/GridData/', 
     editurl: "/SpeakerJqgrid/MyEdit/", 
     datatype: 'json', 
     mtype: 'GET', 
     colNames: ['SpeakerID', 'SpeakerName'], 
     colModel: [ 
         { name: 'SpeakerID', index: 'SpeakerID', width: 40, align: 'left', editable: true, edittype: "text", editoptions: { size: "35", maxlength: "50"} }, 
         { name: 'SpeakerName', index: 'SpeakerName', width: 200, align: 'left', editable: true, edittype: "text", editoptions: { size: "35", maxlength: "50"} } 
       ], 
     onSelectRow: function (id) { 
      if (id && id !== lastSel) { 
       jQuery('#list').restoreRow(lastSel); 
       lastSel = id; 
      } 
      jQuery('#list').editRow(id, true); 
     }, 
     loadComplete: function() { 
      //alert("Load Complete"); 
     }, 
     addRowData: function (rowid, rdata, pos, src) { 
      alert("addRowData"); 
      if (pos === 'afterSelected' || pos === 'beforeSelected') { 
       if (typeof src === 'undefined' && this[0].p.selrow !== null) { 
        src = this[0].p.selrow; 
        pos = (pos === "afterSelected") ? 'after' : 'before'; 
       } else { 
        pos = (pos === "afterSelected") ? 'last' : 'first'; 
       } 
      } 
      return oldAddRowData.call(this, rowid, rdata, pos, src); 
     }, 

     pager: jQuery('#pager'), 
     rowNum: 10, 
     rowList: [5, 10, 20, 50], 
     sortname: 'SpeakerName', 
     sortorder: "desc", 
     viewrecords: true,    
     autowidth: true, 
     autoheight: true, 
     imgpath: '/scripts/themes/black-tie/images', 
     caption: 'My first grid' 
    }) 
    $("#list").jqGrid('navGrid', '#pager', {edit:false,add:false,del:false,refresh:false,search:false}); 
    $("#list").jqGrid('inlineNav', '#pager', { 
     edittext: "Edit", 
     addtext: "Add", 
     savetext: "Save", 
     canceltext: "Cancel", 
     addParams: { position: "afterSelected" } 
    }); 
    }); 
</script> 

用上邊的代碼，我的網給我看的按鈕稱爲AddEditSave和Delete。
但是當我點擊這些按鈕時什麼問題都沒有發生。

我的意思是我想創建事件，當我點擊添加或編輯按鈕時會觸發。

我發現的大多數例子都是關於使用 modal form添加新行的。但我必須使用的是內聯網格行添加樣式。

您的建議將不勝感激。

Answer 1

首先沒有回調函數addRowData。如果你想修改方法addRowData以支持'afterSelected'或'beforeSelected'，你應該按照我的建議從the answer或this one與the demo。

現在談談你的主要問題。內部使用的inlineNav方法addRow和editRow方法。因此，如果用戶點擊添加inlineNav添加或編輯按鈕addRow或editRow將被調用。您可以使用addParams和editParams選項inlineNav更改默認參數addRow或editRow。如果你只需要指定自己的回調函數將被調用時，在用戶點擊添加或編輯按鈕，您可以使用下面的代碼：

$("#list").jqGrid('inlineNav', '#pager', { 
    edittext: "Edit", 
    addtext: "Add", 
    savetext: "Save", 
    canceltext: "Cancel", 
    addParams: { 
     position: "afterSelected", 
     addRowParams: { 
      // the parameters of editRow used to edit new row 
      keys: true, 
      oneditfunc: function (rowid) { 
       alert("new row with rowid=" + rowid + " are added."); 
      } 
     } 
    }, 
    editParams: { 
     // the parameters of editRow 
     key: true, 
     oneditfunc: function (rowid) { 
      alert("row with rowid=" + rowid + " is editing."); 
     } 
    } 
}); 

另外，你或許應該刪除onSelectRow回調，如果你的代碼需要使用inlineNav的編輯按鈕。