javascript - 在 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

您可以删除格式选项:

, 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>';
}

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

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