如何在navbar jqgrid上添加第二个自定义删除按钮?

我已经使用默认删除按钮进行自定义操作,在服务器端,它在删除之前复制行。 我想知道如何创建第二个删除按钮,将删除操作发送到另一个URL以便在数据库的表上删除。 我不想更改当前服务器端代码上的任何内容,只想创建一个新代码,用于从此按钮发送的删除操作。 我寻求的解决方案看起来像这样(它是x删除图标):

在此处输入图像描述

inheritance了我到目前为止它没有工作的代码。我还想在delet动作开始之前确认一个自定义窗口。 任何帮助赞赏:

script src="js/jquery-1.9.0.min.js" type="text/javascript">      $(function(){ $("#list").jqGrid({ url:'request.php', editurl: "jqGridCrud.php", datatype: 'xml', mtype: 'GET', height: 530, width: 850, scrollOffset:0, colNames:['id','Project', 'Assigned To','Assign Date','Check Date','Due Date','Attached','',], colModel :[ {name:'id', index:'id', width:25}, {name:'name', index:'name', width:250, align:'left',editable:true, editoptions:{ size:60} }, {name:'id_continent', index:'id_continent', width:55, align:'right',editable:true,edittype:'select', editoptions:{value: "Henry:Henry; Ramon:Ramon; Paul:Paul" },mtype:'POST' }, {name:'lastvisit', index:'lastvisit', width:70, align:'right',formatter: 'date',srcformat:'yyyy-mm-dd',newformat: 'm/dd/yy',editable:true, edittype: 'text',mtype:'POST' ,editoptions:{size:10, dataInit:function(elem){$(elem).datepicker({dateFormat:'m/dd/yy'});}}} , {name:'cdate', index:'cdate', width:70, align:'right',formatter: 'date',srcformat:'yyyy-mm-dd',newformat: 'm/dd/yy', edittype: 'text',editable:true ,mtype:'POST' ,editoptions:{size:10, dataInit:function(elem){$(elem).datepicker({dateFormat:'m/dd/yy'});}}} , {name:'ddate', index:'ddate', width:70, align:'right',formatter: 'date',srcformat:'yyyy-mm-dd',newformat: 'm/dd/yy',editable:true, edittype: 'text',editoptions:{size:10, dataInit:function(elem){$(elem).datepicker({dateFormat:'m/dd/yy'});}}} , {name:'email', index:'email', width:40,align:'center',sortable:false,mtype:'POST', formatter:function(cellvalue, options, rowObject){ return 'FILES  ' } }, {name:'act',index:'act',width:20 ,align:'center', sortable:false,formatter: "actions", formatoptions: { keys: true, delbutton: true, editbutton:false, delOptions: { url: 'jqGridCrud.php', msg: "Remove Selected Project?", bSubmit: "Remove", bCancel: "Cancel" } }}, ], pager: '#pager', rowNum:20, rowList:[20,40,80], sortname: 'id', sortorder: 'desc', viewrecords: true, gridview: true, caption: 'Pending Assignments', ondblClickRow: function(rowid) { $(this).jqGrid('editGridRow', rowid, {width:450,Height:400,recreateForm:true,closeAfterEdit:true, closeOnEscape:true,reloadAfterSubmit:false, modal:true,mtype:'post'});} }); $.extend($.jgrid.nav, {delicon: "ui-icon-circle-check"}); $("#list").jqGrid("navGrid", "#pager", { add: false, search: false, edit:false, refresh:false }) .navButtonAdd('#pager',{ caption:"Delete", buttonicon:"ui-icon-closethick", url: 'jqGridCrud-og.php', onclicksubmit:function () { var $self = $(this), rowid; // get id of selected row or array of ids of selected rows if ($self.jqGrid("getGridParam", "multiselect")) { rowid = $self.jqGrid("getGridParam", "selarrrow"); if (rowid.length === 0) { rowid = null; } } else { rowid = $self.jqGrid("getGridParam", "selrow"); } if (rowid === null) { // display error message because no row is selected $.jgrid.viewModal("#" + 'alertmod_' + this.p.id, {gbox: "#gbox_" + $.jgrid.jqID(this.p.id), jqm: true}); $("#jqg_alrt").focus(); } else { $self.jqGrid("delGridRow", rowid); } }, position:"last"}) ; // setup grid print capability. Add print button to navigation bar and bind to click. setPrintGrid('list','pager','Print'); });      

您需要指定需要删除的行的rowid作为delGridRow方法的第一个参数。 所以onclickSubmit的代码应该是以下内容

 onclickSubmit: function () { var $self = $(this), rowid; // get id of selected row or array of ids of selected rows if ($self.jqGrid("getGridParam", "multiselect")) { rowid = $self.jqGrid("getGridParam", "selarrrow"); if (rowid.length === 0) { rowid = null; } } else { rowid = $self.jqGrid("getGridParam", "selrow"); } if (rowid === null) { // display error message because no row is selected $.jgrid.viewModal("#" + 'alertmod_' + this.p.id, {gbox: "#gbox_" + $.jgrid.jqID(this.p.id), jqm: true}); $("#jqg_alrt").focus(); } else { $self.jqGrid("delGridRow", rowid); } }