在JQGrid的其中一列中添加超链接，然后单击“超链接”应调用Jquery函数

Question

我有一个JQgrid，其中包含只有5列..我正在粘贴我在下面尝试过的代码。

 jQuery("#grdAnn6InvstDetails").jqGrid({
        url: RootUrl + 'FDIAS/Ann6InvDtlsGridData',
        datatype: 'json',
        mtype: 'POST',           
        colNames: ['id', 'Name Of Investor', 'Amount Of Inflow', 'Currency Of Inflow', 'Amount Of Inflow(Inr)','Link'],
        colModel: [
                    { name: 'id', index: 'id', width: 30, sorttype: "int", editable: false,hidden:true },                       
                    { name: 'NameOfInvestor', index: 'NameOfInvestor', width: 200, editable: true, editoptions: { size: "22", maxlength: "100" }, editrules: { required: true} },

                     { name: 'AmountOfInflow', index: 'AmountOfInflow', align: "right", width: 120, editable: true,
                         editoptions: { size: "13", maxlength: "18", dataInit: function (element) {
                             $(element).keypress(function (e) {
                                 if (e.which != 8 && e.which != 0 && e.which != 46 && (e.which < 48 || e.which > 57)) {
                                     return false;
                                 }
                                 var charCode = (e.which) ? e.which : e.keyCode;
                                 if (charCode == 46 && this.value.split('.').length > 1)
                                     return false;
                             });
                         }
                         }, editrules: { required: true }
                     },
                    { name: 'CurrencyOfInflow', index: 'CurrencyOfInflow', width: 120, editable: true, edittype: "select",  stype: 'select', 
                    edittype: "select", formatter: "select",editoptions: {value: Currencies},editrules: { required: true} },
                     { name: 'AmountOfInflowInr', index: 'AmountOfInflowInr', align: "right", width: 130, editable: true,
                         editoptions: { size: "13", maxlength: "18", dataInit: function (element) {
                             $(element).keypress(function (e) {
                                 if (e.which != 8 && e.which != 0 && e.which != 46 && (e.which < 48 || e.which > 57)) {
                                     return false;
                                 }
                                 var charCode = (e.which) ? e.which : e.keyCode;
                                 if (charCode == 46 && this.value.split('.').length > 1)
                                     return false;
                             });
                         }
                         }, editrules: { required: true }
                     },
                     { name: 'Site_Name', index: 'Site_Name', width: 130,editable: true, sortable: false,formatter: addLink, formatoptions: {onClick: function (rowid, iRow, iCol, cellText, e) {Link();  } } },

                 ],

        cellEdit: true,
        rowNum: 100,
         gridview: true,
        rownumbers: true,
        autoencode: true,           
        height: 130,
         width: 600,
        cellsubmit: 'clientArray',
        caption: "Investor Details",
        multiselect: true,
        postData: {
            "FDIASId": "@Model.Id",
            "data": "@Model.Ann6InvstDetails"
        },           
        afterSaveCell : function() 
        {      
            var grid = $("#grdAnn6InvstDetails"),
                sum = grid.jqGrid('getCol','AmountOfInflow', false, 'sum');
          $("#TotalAmountInflowAnnx6").val(sum);           
        } 

    });
     $(window).on("resize", function () {
        var newWidth = $("#grdAnn6InvstDetails").closest(".ui-jqgrid").parent().width();
        if(newWidth>600)
        {
        jQuery("#grdAnn6InvstDetails").jqGrid("setGridWidth", 600, true);

        }
        else{
         jQuery("#grdAnn6InvstDetails").jqGrid("setGridWidth", newWidth, true);
        }
    });
    $("#btnAddNewAnn6InvstDetails").click(function () {
        if (ValidateRow($("#grdAnn6InvstDetails"))) {
            var idAddRow = $("#grdAnn6InvstDetails").getGridParam("reccount")
            emptyItem = [{ id: idAddRow + 1, NameOfInvestor: "",AmountOfInflow: "", CurrencyOfInflow: "", AmountOfInflowInr: ""}];
            jQuery("#grdAnn6InvstDetails").jqGrid('addRowData', 0, emptyItem);
        }
    });


    $("#btnDeleteAnn6InvstDetails").click(function () {
        $("#grdAnn6InvstDetails").jqGrid("editCell", 0, 0, false);
        var gr = jQuery("#grdAnn6InvstDetails").jqGrid('getGridParam', 'selarrrow');
        if (gr != "") {
            for (var i = 0; i <= gr.length; i++) {
                jQuery("#grdAnn6InvstDetails").jqGrid('delRowData', gr[i]);
            }
            for (var i = 0; i <= gr.length; i++) {
                jQuery("#grdAnn6InvstDetails").jqGrid('delRowData', gr[i]);
            }
        }
        else
            alert("Please Select Row(s) to delete!");

    });

最后一列是链接，如果单击链接按钮，则我想调用Jquery函数。

function addLink(cellvalue, options, rowObject)   
{
    return '<a href="#" class="actionButton" data-id="124" >Click Me!  </a>';
}

如果我单击“单击我！” 按钮，然后我要调用以下函数。 我以多种方式捆绑它，但没有任何解决方案，因此请任何人帮助我。

   function Link() {
              alert('aslam');
            // window.open(url);
        }

Answer 1

您可以删除format选项：

, formatoptions: {onClick: function (rowid, iRow, iCol, cellText, e) {Link();  } }  

您可以使用以下代码：

function addLink(cellvalue, options, rowObject)   
{
    return '<a href="#" class="actionButton" onclick="Link();" data-id="124" >Click Me!  </a>';
}

尽管内联事件被认为是不好的做法 ，所以您可以将事件委托用作：

jQuery("#grdAnn6InvstDetails").on('click', '.actionButton', Link);

Answer 2

我非常重要的要知道，您使用的是哪个版本的jqGrid以及哪个版本的jqGrid（ 免费的jqGrid ， Guriddo jqGrid JS或版本<= 4.7的某些旧jqGrid）。

免费的jqGrid是我开发的许可协议是在jqGrid的4.7.1改变和产品更名为Guriddo jqGrid的JS（参见后叉后 ）。 它在formatter: "showlink"包含一些增强功能formatter: "showlink" 。 您可以在formatoptions使用onClick回调：

formatter: "showlink",
formatoptions: {
    onClick: function (options) {
        // options is object which have the following
        // properties:
        //  cmName, cellValue, rowid, cm, iCol, iRow, a, event.
    }
}

看到答案 。

如果您无法迁移到免费的jqGrid，则可以使用formatter: "dynamicLink" ，我最初在答案中进行了描述，并已在GitHub上发布了它 。