Is a Footer row in a jqgrid selectable/clickable?

问题

I have a jqgrid that has main rows and a footer row (with userdata loaded) and then a formatter that alters the data in the cells to be linkable. The cells in the main body can be clicked and the onCellSelect event will capture the click. However, clicking on data in the footer row does not seem to fire off the onCellSelect event. How do I capture a select/click event in the footer row? Below is the script for the 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
    });

Thanks for the assistance.

回答1:

While I didn't see any way to have jqGrid respond to select (doesn't even seem that that footer is selectable) or a click. The footer row is specified by a ui-jqgrid-sdiv class. You could attach a click event handler as below.

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

Edit: In response to Gill Bates question to add a footer event but only on a single cell the selector would be:

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

GridName_ColumnName is the format for all the footer td aria-describedby, and you can see the exact name via firebug element inspector (or any of it's equivalents).

回答2:

jqGrid registers click event on main <table> of the grid, but it calls onCellSelect not always. First of all (see here) it tests some additional conditions and then returns (ignore click event) if the conditions failed. For example if one clicks on grouping headers of the grid the callback onCellSelect will not be processed.

The problem with footer row because it exists outside of the grid. The main <table> element are placed inside of div.ui-jqgrid-bdiv, but the footer is inside of another table which is inside of div.ui-jqgrid-sdiv. One can examine the HTML structure of jqGrid using Developer Tools of Internet Explorer, Google Chrome, Firebug or other. One will see about the following

The main <table> element (<table id="list"> in the picture above and which get the class "ui-jqgrid-btable") and another table element with the footer (which get the class "ui-jqgrid-ftable") are separate.

So the fist answer of Mark on your question was correct. If one has multiple grids on the page one could specify footer of specific grid using

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. In the old answer are described many other elements of the grid. The descriptions are not full, but it could be probably helpful.

回答3:

Here little implementation of this problem, i'm new in jquery and jqgrid, but i had same problem and thanks two posts above of @Oleg and @Mark, Im implemented something like that:

//Raport1Grid - name of my jqgrid
//endusers, adminusers,decretusers - name of my rows in 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');    
});

//Also can get value of selectedCell

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

Demo here http://jsfiddle.net/Tobmai/5ju3py83/

来源：https://stackoverflow.com/questions/14245061/is-a-footer-row-in-a-jqgrid-selectable-clickable