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

Question

我有一个 jqgrid，它有主行和页脚行（加载了用户数据），然后是一个格式化程序，它将单元格中的数据更改为可链接。可以单击主体中的单元格，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- describeby 的格式，您可以通过 firebug 元素检查器（或其任何等效项）查看确切名称。

Answer 2

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

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

主要的<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
});

附：在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/