我已经在使用默认的删除按钮进行自定义操作,在服务器端它在删除之前复制行。我想知道如何创建第二个删除按钮,将删除操作发送到不同的 url,以便在数据库表上删除。我不想更改当前服务器端代码上的任何内容,只想为从此按钮发送的删除操作创建一个新代码。我寻求的解决方案将如下所示(它是 x 删除图标):
这是我到目前为止的代码,它不起作用。我还想要一个自定义窗口在删除操作开始之前进行确认。任何帮助表示赞赏:
script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
<script 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 '<a href="' + cellvalue + '" target="_blank">FILES </a> '
} },
{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');
});
</script>
</head>
<body>
<script src="js/jquery.printelement.js" type="text/javascript"></script>
<script src="js/printgrid.js" type="text/javascript"></script>