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

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

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

在jqGrid中有没有更好的方法将当前行值放入jQuery事件处理程序而不进行循环?

注意:请注意,我需要调用一个jQuery事件处理程序,它将处理当前行值 – 而不是一个简单的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',{
                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>

参考文献:

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

解决方法

你是对的.您当前的代码为列Join的每个span.app-custom-button-join绑定单独的(多个)单击处理程序.为了使代码更有效,可以在整个网格上注册一个单击处理程序.标准事件处理使冒泡(从内到外). jqGrid已经注册了一个单击处理程序,它具有beforeSelectRow和onCellSelect,它将在单击处理程序内部调用.因此,您可以使用更有效的beforeSelectRow回调代码替换gridComplete.相应的实现如下所示
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以防止选择.

相关文章

1.第一步 设置响应头 header(&#39;Access-Control-Allow...
$.inArray()方法介绍 $.inArray()函数用于在数组中搜索指定的...
jquery.serializejson.min.js的妙用 关于这个jquery.seriali...
JS 将form表单数据快速转化为object对象(json对象) jaymou...
jQuery插件之jquery.spinner数字智能增减插件 参考地址:http...