将当前行值获取到 jQuery 事件处理程序中而不循环

Question

我知道如何使用自定义格式化程序并在 jqGrid 中调用 JavaScript 函数。我也知道我可以使用 gridComplete 函数来绑定一个 jQuery 事件。我的问题类似于以下问题——但不一样。 Custom formatter in jqGrid which calls jQuery function

好的，在上面问题中提到的方法中，我们可以对格式化程序返回的元素的点击事件使用 jQuery 函数——但它需要遍历所有行。

在jqGridjqGrid 中是否有更好的方法可以在不循环的情况下将当前行值放入jQuery event handler？

注意：请注意，我需要调用 jQuery event handler 来处理当前行值——而不是简单的 javascript 函数。

我的代码如下。

<script type="text/javascript">
    function clickme(rowID) {
        alert("hi");
    }
    $(document).ready(function() {
        $("#grid").jqGrid({
            url: "GamesList.aspx/GetMyGames",
            mtype: 'POST',
            postData: {
                gameSearch: $('#txtGameName').val(),
                ownerSearch: $('#txtOwner').val(),
                createdDateFrom: $('#txtCreatedFrom').val(),
                createdDateTo: $('#txtCreatedTo').val(),
                liquidAmountFrom: $('#txtLmiquidAmountFrom').val(),
                liquidAmountTo: $('#txtLmiquidAmountTo').val()
            },
            datatype: "local", //json if want to load initially
            ajaxGridOptions: {
                contentType: 'application/json; charset=utf-8'
            },
            serializeGridData: function(postData) {
                return JSON.stringify(postData);
            },
            jsonReader: {
                repeatitems: false,
                root: function(obj) {
                    return obj.d;
                }
            },
            colNames: ['GameID', 'GameName', 'GameOwner', 'PlannedCloseDate', 'CreatedOnDate', 'GameLiquidAmount', 'Join'],
            colModel: [{
                name: 'GameID',
                index: 'GameID'
            }, {
                name: 'GameName',
                index: 'GameName'
            }, {
                name: 'GameOwner',
                index: 'GameOwner'
            }, {
                name: 'PlannedCloseDate',
                index: 'PlannedCloseDate',
                formatter: 'date',
                formatoptions: {
                    srcformat: 'm/d/Y',
                    newformat: 'm/d/Y'
                }
            }, {
                name: 'CreatedOnDate',
                index: 'CreatedOnDate',
                formatter: 'date',
                formatoptions: {
                    srcformat: 'm/d/Y',
                    newformat: 'm/d/Y'
                }
            }, {
                name: 'GameLiquidAmount',
                index: 'GameLiquidAmount'
            }, {
                name: 'Join',
                index: 'GameID',
                width: 30,
                formatter: function(cellvalue, options, rowObject) {
                    return '<span class="ui-icon ui-icon-folder-open app-custom-button-join"  title="click to open" onclick="clickme(' + options.rowId + ') ;"></span>';
                }
            }],
            rowNum: 10,
            /*rowList: [10, 20, 30],*/
            pager: '#pager2',
            sortname: 'id',
            viewrecords: true,
            sortorder: "desc",
            caption: "Games",
            gridview: true,
            height: "auto",
            loadonce: true,
            recordtext: "Records {0} - {1} of {2}",
            emptyrecords: "No records to view",
            loadtext: "Loading...",
            pgtext: "Page {0} of {1}",
            gridComplete: function() {
                //Assign a click event to custom button [after gridComplete]
                $(".app-custom-button-join").click(function() {
                    alert("HELLO");
                });
            }
        });
        $("#btnSearch").click(function(e) {
            $("#grid").jqGrid('setGridParam', {
                datatype: 'json'
            }).trigger('reloadGrid');
            e.preventDefault();
        });
    });
</script>

参考资料：

1. jqgrid custom formatter button click event not working
2. jqGrid gridComplete:- getRowData - get row cell value from array
3. Issue with jqGrid and jquery click event
4. Custom formatter in jqGrid which calls jQuery function

Answer 1

你是对的。您当前的代码为Join 列的每个span.app-custom-button-join 绑定单独 (多个) click 处理程序。为了使代码更有效，可以在整个网格上注册 one click 处理程序。标准事件处理使冒泡（从内到外）。 jqGrid 已经注册了一个click 处理程序，它有beforeSelectRow 和onCellSelect，它们将在click 处理程序内部调用。因此，您可以将gridComplete 替换为更有效的beforeSelectRow 回调代码。对应的实现如下所示

beforeSelectRow: function (rowid, e) {
    var $self = $(this),
        $td = $(e.target).closest("tr.jqgrow>td"),
        rowid = $td.parent().attr("id"),
        rowData = $self.jqGrid("getLocalRow", rowid),
        // or rowData = $self.jqGrid("getRowData", rowid)
        iCol = $td.length > 0 ? $td[0].cellIndex : -1,
        colModel = $self.jqGrid("getGridParam", "colModel");
    if (iCol >= 0 && colModel[iCol].name === "Join" &&
            $(e.target).hasClass("app-custom-button-join")) {
        alert("HELLO");
        return false;
    }

    return true;
}

上面的代码展示了如何获取点击行的rowid。从beforeSelectRow 返回的布尔值允许您通过单击图标拒绝选择行（如果需要的话）。只需从beforeSelectRow 返回false 以防止选择。

Answer 2

好吧，我不太确定解决方案的效率，但您可以让行中的数据具有如下事件处理程序：

$(document).on("click", "#id", function(){});

然后你可以使用$(this).val(); 来查找元素的值。

这能回答你的问题吗？？？