Question

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

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

在jQuery event handler中，是否有更好的方法将当前行值转换为jqGrid而不使用循环？

注意：请注意，我需要调用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>

参考文献：

Answer 1

你是对的。您当前的代码会为列click的每个span.app-custom-button-join绑定单独的（多个）Join处理程序。为了使代码更有效，可以在整个网格上注册一个 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返回的布尔值允许您通过单击图标拒绝选择行（如果需要原因）。只需从false返回beforeSelectRow即可阻止选择。

Answer 2

嗯，我不太确定解决方案的效率，但是你可以让行中的数据有一个事件处理程序，如：

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

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

这会回答你的问题???

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

2 个答案: