jqGrid 重定向(而不是内联/表单编辑)时单击编辑图标

Question

My jqGrid script：

<script type="text/javascript">
var delete_task_url = "/controller/deleteRecordAction";
var gr = jQuery("#grid").jqGrid('getGridParam','selrow');
jQuery("#grid").jqGrid({
    url:call_url,
        datatype: "json",
    height: 'auto',
    rowNum: 20,
    rowList: [20,30],
    colNames:['Task#','Project ID','Task Name', 'Start Date', 'End Date', 'Created By', 'Created Date', 'Status', 'Action'],
    colModel:[
        {name:'USER_ID',index:'TASK_ID', align:'center',search:false },
        {name:'USER_NAME',index:'TASK_NAME', search:false},
        {name:'ACTION',index:'link', search:false,align:'center',sortable:false, formatter: 'actions',
        formatoptions: {
            keys: true,
            editformbutton: true,
            delOptions: { url: delete_task_url}
        }},
    ],
    pager: "#page",
    shrinkToFit :true,
    autowidth: true,
    viewrecords: true,
    sortname: 'TASK_ID',
    caption: "Task List",
    gridComplete: function () {
                    var recs = $("#grid").getGridParam("records");
                    $( ".mycontent" ).remove();
                    if (recs == 0 || recs == null) {
                        $('#grid').after("<div class='mycontent' style='color:red;text-align:center'>No Record Found</div>");
                    }
                }
}).navGrid('#page',{ edit:false,add:false,del:true,search:false,cloneToTop:true,refresh:false},
            {
             },{
             //add options

             },{
                        //msg: "do you really want delete this keyword? This delete affect on Eqms filter"
                });
                jQuery("#grid").jqGrid('filterToolbar', { autosearch: true  });
            var topPagerDiv = $('#grid_toppager')[0]; 
            jQuery("#grid_toppager_center", topPagerDiv).remove();
</script>

上面的脚本给了我编辑和删除图标。删除操作按预期工作，但对于编辑，我既不想editformbutton: true进行form编辑，也不想editformbutton: false内联编辑。

相反，当用户单击编辑图标时，应将其重定向到自定义URL。

我怎样才能做到这一点？

谢谢。

Answer 1

我觉得这个问题很有趣，所以我创建了演示来演示相应的实现。

索姆对代码进行了注释。首先，应该了解，formatter: "actions"带有值jQuery.fn.fmatter.rowactions.call(this,'formedit');或jQuery.fn.fmatter.rowactions.call(this,'edit');值的编辑图标在div 上设置onclick属性取决于editformbutton属性的值（请参阅源代码）。因此，必须删除该属性（.prop("onclick", null)的用法似乎是与jQuery文档相对应的最佳方法），并绑定新的click事件句柄，该句柄将新的URL值分配给location.href。gridComplete的代码是这样做的：

gridComplete: function () {
    var $self = $(this), rows = this.rows, i, iAction, tr,
        colModel = $self.jqGrid("getGridParam", "colModel"),
        idPrefix = $self.jqGrid("getGridParam", "idPrefix"),
        newOnClick = function (e) {
            var rowid = $(this).closest(".jqgrow").attr("id");
            e.stopPropagation();
            // an example of redirection
            window.location.href = "http://www.google.com/#q=" +
                encodeURIComponent($.jgrid.stripPref(idPrefix, rowid));
        };
    // find the index of the column with formatter: "actions"
    for (i = 0; i < colModel.length; i++) {
        if (colModel[i].formatter === "actions") {
            iAction = i;
            break;
        }
    }
    if (iAction === undefined) {
        return;
    }
    for (i = 0; i < rows.length; i++) {
        tr = rows[i];
        if ($(tr).hasClass("jqgrow")) {
            $(tr.cells[iAction]).find(".ui-inline-edit")
                .click(newOnClick)      // register new click event handler
                .prop("onclick", null); // remove standard behavior of Edit button
        }
    }
}