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"设置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事件句柄，将新的网址值分配给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
        }
    }
}

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

1 个答案: