1

我有一个 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
    });

感谢您的帮助。

4

3 回答 3

2

虽然我没有看到任何让 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 元素检查器（或其任何等效项）查看确切名称。

于 2013-01-10T12:33:16.510 回答
1

jqGridclick在主网格上注册事件<table>，但它onCellSelect并不总是调用。首先（见这里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
});

PS 在旧答案中描述了网格的许多其他元素。描述不完整，但可能会有所帮助。

于 2013-03-15T18:52:43.193 回答
0

这里很少实现这个问题，我是 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/

于 2015-01-14T09:43:39.940 回答