在JQGrid中的一列中添加一个超链接，单击“超链接”将调用Jquery函数

Add a hyperlink in one of the columns in JQGrid and clicking on Hyperlink should call a Jquery function

本文关键字：超链接 单击 调用 函数 Jquery JQGrid 一列 添加 一个      更新时间：2023-09-26

我有一个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);
        }

您可以删除格式化选项：

, 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);

我很重要的一点是要知道，你使用的是哪个版本的jqGrid，以及jqGrid的哪个分支（免费jqGrid、Guriddo jqGrid JS或一些版本<=4.7的旧jqGrid）。

Free jqGrid是我在jqGrid 4.7.1中更改许可协议后开发的分叉，产品更名为Guriddo jqGrid JS（见帖子）。它包含了CCD_ 1中的一些增强。您可以在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上发布了它。

相关文章：