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

Question

我的 jqGrid 脚本：

<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

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

Somme 符合代码。首先应该明白，formatter: "actions" 在带有编辑图标的 div 上设置 onclick 属性，其值为jQuery.fn.fmatter.rowactions.call(this,'formedit'); 或jQuery.fn.fmatter.rowactions.call(this,'edit'); 取决于editformbutton 属性的值（请参阅the source code）。因此必须删除该属性（.prop("onclick", null) 的使用似乎最好的方式对应于the jQuery documentation）并绑定新的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
        }
    }
}