Jqgrid自定义格式化程序按钮单击不起作用

Question

我创建了一个网格，我的一列在每一行都有一个自定义按钮。当我单击按钮时，不会调用我的单击事件。

我的 jqgrid：

$('#QuoteLineTable').jqGrid({
        url: $('#url').val(),
        datatype: 'json',
        type: 'POST',
        postData: { Id: $("#Id").val() },
        colNames: ['Id', 'Quote Number', 'Valid Until Date','View Line Item'],
        colModel: [
            { name: "QuoteLineId", index: "QuoteLineId", hidden: false, hidedlg: true },
            { name: 'QuoteNumber', index: "QuoteNumber" },
            { name: 'ValidUntil', formatter: "date", formatoptions: { newformat: "d/m/Y" }, width: '100px' },
            { name: 'View Line Item', formatter: viewLineBtn }

        ],
        multiselect: true,
        emptyrecords: "No Quote Line to view",
        gridview: true,
        autoencode: true,
        loadtext: "Loading...",
        loadonce: true,
        rowNum: 3,
        rowList: [10, 20, 30],
        pager: '#LinePager',
        height: '100%',
        caption: "Quote List",
        autowidth: true,
        sortname: 'QuoteNumber',
        ajaxGridOptions: { type: 'POST', contentType: "application/json; charset=utf-8" },
        jsonReader: {
            repeatitems: false,
            root: "rows",
            page: "page",
            total: "totalPages",
            records: "totalRecords",
            id: "QuoteLineId"
        },
        serializeGridData: function(postData) {
            return JSON.stringify(postData);
        },
        onCellSelect: function(rowid,e) {

                alert("rowid=" + rowid );

        },

        ondblClickRow: function(rowid) {

            var $model = $('#LineItemMyModal');

            $.ajax({
                type: "GET",
                url: $('#urlItemDetails').val(),
                data: { LineId: rowid },
                success: function(r) {
                    $model.html(r);
                    $model.modal('show');
                }
            });


        }
    }).navGrid('#QuoteLinePager', { edit: false, add: false, del: false, search: true });


    function viewLineBtn(cellvalue, options, rowObject) {
        return "<button class=\"viewLineItem\">View Line Item</button>"
    };


$('.viewLineItem').click(function (rowId) {
   alert("hi");
    alert(rowId);
});

基本上我不知道如何调用按钮 class= viewLineItem 的点击事件。

我尝试使用 onCellSelect 或 beforeSelectRow 事件，但我还需要使用 ondblClickRow 来填充模式。所以我正在寻找不使用 oncellSelect 的其他选项。

Answer 1

试试这样的。

    $('#QuoteLineTable').jqGrid({
            url: $('#url').val(),
            datatype: 'json',
            type: 'POST',
            postData: { Id: $("#Id").val() },
            colNames: ['Id', 'Quote Number', 'Valid Until Date','View Line Item'],
            colModel: [
                { name: "QuoteLineId", index: "QuoteLineId", hidden: false, hidedlg: true },
                { name: 'QuoteNumber', index: "QuoteNumber" },
                { name: 'ValidUntil', formatter: "date", formatoptions: { newformat: "d/m/Y" }, width: '100px' },
                { name: 'View Line Item', formatter: viewLineBtn }

            ],
            multiselect: true,
            emptyrecords: "No Quote Line to view",
            gridview: true,
            autoencode: true,
            loadtext: "Loading...",
            loadonce: true,
            rowNum: 3,
            rowList: [10, 20, 30],
            pager: '#LinePager',
            height: '100%',
            caption: "Quote List",
            autowidth: true,
            sortname: 'QuoteNumber',
            ajaxGridOptions: { type: 'POST', contentType: "application/json; charset=utf-8" },
            jsonReader: {
                repeatitems: false,
                root: "rows",
                page: "page",
                total: "totalPages",
                records: "totalRecords",
                id: "QuoteLineId"
            },
            serializeGridData: function(postData) {
                return JSON.stringify(postData);
            },
            onCellSelect: function(rowid,e) {

                    alert("rowid=" + rowid );

            },

            ondblClickRow: function(rowid) {

                var $model = $('#LineItemMyModal');

                $.ajax({
                    type: "GET",
                    url: $('#urlItemDetails').val(),
                    data: { LineId: rowid },
                    success: function(r) {
                        $model.html(r);
                        $model.modal('show');
                    }
                });


            }
        }).navGrid('#QuoteLinePager', { edit: false, add: false, del: false, search: true });


        function viewLineBtn(cellvalue, options, rowObject) {
            var rowid= options.rowid;
            var button = "<button class=\"viewLineItem\" id="+ rowid+">View Line   Item</button>"
         $('#' + rowid).die();
         $('#' + rowid).live('click', function (rowId) {
            alert("hi");
            alert(rowId);
         });
       };

Answer 2

它对我有用：

 $('#QuoteLineTable').jqGrid({
    ....
    colModel: [
        ...
        { name: 'View Line Item', formatter: viewLineBtn }
    ]
    loadComplete: function (data) {
        console.log(data); // You can view the object
        let rowDataArray = data.rows;
        for (let i = 0, j = rowDataArray.length; i < j; i++)
        {
            let temp = rowDataArray[i];
            $("#btn_" + temp.id).click(() => {
                 m_alert(temp.content);
            });
        }
    }
    });

    function viewLineBtn(cellvalue, options, rowObject) 
    {
        return "<button id='btn_" + rowObject.id + "'>View Line Item</button>"
    }