如何在导航栏 jqgrid 上添加第二个自定义删除按钮？

Question

我已经在使用默认删除按钮进行自定义操作，在服务器端它在删除之前复制行。我想知道如何创建第二个删除按钮，将删除操作发送到不同的 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>

Answer 1

你需要指定需要删除的行的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);
    }
}