Question

我有一个jqgrid，它有主行和一个页脚行（加载了userdata），然后是一个格式化程序，它将单元格中的数据改为可链接。可以单击主体中的单元格，onCellSelect事件将捕获单击。但是，单击页脚行中的数据似乎不会触发onCellSelect事件。如何捕获页脚行中的选择/单击事件？下面是jqgrid的脚本。

$('#jqgSummaryResults').jqGrid({
        datatype: 'json',
        mtype: 'GET',
        url: 'some action',
        postData: { 'criteria': function () {
           some function}},
        rowNum: 100,
        rowList: [],
        pager: '#jqgpSummaryResults',
        viewrecords: true,
        sortorder: 'asc',
        sortname: 'DateField',
        width: 1250,
        height: 350,
        shrinkToFit: true,
        gridview: true,
        footerrow: true,
        userDataOnFooter: true,
        onCellSelect: function (rowid, iCol, cellcontent, e) {
            var selectedDate = rowid;
            savedMailDueDateString = rowid;
            var selectedColumn = iCol;
            ...
        },
        loadComplete: function (data) {
            ...
        },
        colNames: ['DateField',
                    'Total Jobs',
                    ...
                    '% Not Mailed'],
        colModel: [
                    { name: 'DateField', index: 'DateField', align: 'left' },
                    { name: 'TotalJobs', index: 'TotalJobs', align: 'left', formatter: hyperlinkColumnFormatter },
                    ...
                    { name: 'PercentNotMailed', index: 'PercentNotMailed', align: 'left', formatter: hyperlinkColumnFormatter },
                    ]
    }).navGrid('#jqgpSummaryResults', {
        excel: false,
        edit: false,
        add: false,
        del: false,
        search: false,
        refresh: false
    });

感谢您的帮助。

Answer 1

虽然我没有看到任何方法让jqGrid响应选择（看起来甚至看不到该页脚是可选的）或点击。页脚行由ui-jqgrid-sdiv类指定。您可以附加一个单击事件处理程序，如下所示。

$('.ui-jqgrid-sdiv').click(function() {alert('Bong')});

编辑：回应Gill Bates提出的添加页脚事件的问题，但只在单个单元格上，选择器将是：

$('.ui-jqgrid-sdiv').find('td[aria-describedby="GridName_ColumnName"]').click(function() { alert("Bong");});

GridName_ColumnName是所有页脚td aria-describedby的格式，您可以通过firebug元素检查器（或其任何等价物）查看确切的名称。

Answer 2

jqGrid在网格的主click上注册<table>事件，但并不总是调用onCellSelect。首先（参见here）它会测试一些其他条件，然后在条件失败时返回（忽略click事件）。例如，如果单击网格的分组标题，则不会处理回调onCellSelect。

页脚行的问题因为它存在于网格的外部。主<table>元素放在div.ui-jqgrid-bdiv内，但页脚位于另一个表内部，位于div.ui-jqgrid-sdiv内。可以使用Internet Explorer，Google Chrome，Firebug或其他的开发者工具检查jqGrid的HTML结构。人们会看到以下

enter image description here

上图中的主要<table>元素（<table id="list">和获取类“ui-jqgrid-btable”）和带有页脚的另一个表元素（获取类“ui-jqgrid” -ftable“）分开。

所以马克对你问题的第一个答案是正确的。如果页面上有多个网格，则可以使用

指定特定网格的页脚

var $grid = $('#jqgSummaryResults'); // one specific grid

.... // here the grid will be created

$grid.closest(".ui-jqgrid-view").find(".ui-jqgrid-sdiv").click(function() {
    // do in case of the footer is clicked.
    var $td = $(e.target).closest("td"),
        iCol = $.jgrid.getCellIndex($td); // or just $td[0].cellIndex,
        colModel = $grid.jqGrid("getGridParam", "colModel");

   // $td - represents the clicked cell
   // iCol - index of column in footer of the clicked cell
   // colModel[iCol].name - is the name of column of the clicked cell
});

P.S。在the old answer中描述了网格的许多其他元素。描述不完整，但可能有用。

Answer 3

这里很少实现这个问题，我是jquery和jqgrid的新手，但是我有同样的问题，感谢@Oleg和@Mark上面的两个帖子，我实现了类似的东西：

// Raport1Grid - 我的jqgrid的名字
// endusers，adminusers，decretusers - colModel中我的行名称
// Raport1Grid_endusers - GridName_ColumnName

var endUsers = $("[aria-describedby='Raport1Grid_endusers']").click(function(){
    //remove previous style of selection
    $('.ui-jqgrid-ftable').find('.selecteClass').removeClass('selecteClass');
    //set selection style to cell
    $(endUsers).addClass('selecteClass');    
});

//也可以获得selectedCell的值

 var qwer = $("[aria-describedby='Raport1Grid_endusers']").text();
 alert(qwer);

在这里演示 http://jsfiddle.net/Tobmai/5ju3py83/

jqgrid中的页脚行是可选择/可点击的吗？

3 个答案: