如何在navbar jqgrid上添加第二个自定义删除按钮? [英] How to add a second custom delete button on navbar jqgrid?

问题描述

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

I am already using the default delete button for custom action where on server side it copies row before deleting. I was wondering how I could create second delete button that sends delete operation to a different url for deleting on the table on the database. I do not want to change anything on my current server side code and simply want to create a new code for delete operation sent from this button. The solution I seek will look like this(it is the x delete icon):

这里我到目前为止拥有的代码无法正常工作，我还希望有一个自定义窗口在删除操作开始之前进行确认.任何帮助表示赞赏:

Heres the code I have so far its is not working.I also want a custom window to confirm before delet action started. Any help appreciated:

   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>

推荐答案

您需要指定要删除的行的rowid作为

You need specify the rowid of the row which need be deleted as the first parameter of delGridRow method. So the code of onclickSubmit should be about the following

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

这篇关于如何在navbar jqgrid上添加第二个自定义删除按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！