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

我想在我的JqGrid下面创建Add Edit Save And Delete按钮。

  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" } }); });  

通过使用上面的代码，我的网格显示了名为Add Edit Save和Delete按钮。
但是，当我点击这些按钮时，没有任何问题。

我的意思是我想创建一个事件，当我单击添加或编辑按钮时将触发该事件。

我发现的大多数示例都是关于使用模态forms添加新行。 但我必须使用的是内联网格行添加样式。

您的建议将不胜感激。

Answer 1

首先，没有回调函数addRowData 。 如果你想修改方法 addRowData以支持’afterSelected’或’beforeSelected’，你应该按照我的答案或演示中的 这个建议。

现在谈谈你的主要问题。 inlineNav方法在内部使用addRow和editRow方法。 因此，如果用户点击inlineNav添加的“添加”或“编辑”按钮，将调用addRow或editRow 。 您可以使用addParams和editParams选项来更改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."); } } }); 

另外，如果需要使用inlineNav编辑”按钮，则应该删除onSelectRow回调的代码。