jqgrid中的页脚行是否可选择/单击?
我有一个jqgrid,它有一个主行和一个页脚行(加载了userdata),然后是一个格式化程序,它将单元格中的数据更改为可链接的。可以单击主体中的单元格,onCellSelect事件将捕获单击。但是,单击页脚行中的数据似乎不会触发onCellSelect事件。如何在页脚行中捕获选择/单击事件?下面是jqgrid的脚本jqgrid中的页脚行是否可选择/单击?,jqgrid,user-data,Jqgrid,User Data,我有一个jqgrid,它有一个主行和一个页脚行(加载了userdata),然后是一个格式化程序,它将单元格中的数据更改为可链接的。可以单击主体中的单元格,onCellSelect事件将捕获单击。但是,单击页脚行中的数据似乎不会触发onCellSelect事件。如何在页脚行中捕获选择/单击事件?下面是jqgrid的脚本 $('#jqgSummaryResults').jqGrid({ datatype: 'json', mtype: 'GET', u
$('#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
});
感谢您的帮助。虽然我没有看到任何方法让jqGrid响应select(甚至似乎无法选择页脚)或单击。页脚行由
ui jqgrid sdiv
类指定。您可以附加一个click事件处理程序,如下所示
$('.ui-jqgrid-sdiv').click(function() {alert('Bong')});
编辑:针对Gill Bates提出的添加页脚事件(但仅在单个单元格上)的问题,选择器为:
$('.ui-jqgrid-sdiv').find('td[aria-describedby="GridName_ColumnName"]').click(function() { alert("Bong");});
GridName\u ColumnName是所有描述的页脚的格式,您可以通过firebug元素检查器(或其任何等价物)看到确切的名称 jqGrid registers
在网格的main
上单击事件,但它并不总是调用onCellSelect
。首先(请参阅),它测试一些附加条件,如果条件失败,则返回(忽略单击事件)。例如,如果单击网格的分组标题,则不会处理回调onCellSelect
页脚行存在问题,因为它位于网格之外。主
元素位于div.ui-jqgrid-bdiv
的内部,但页脚位于另一个表的内部,该表位于div.ui-jqgrid-sdiv
的内部。可以使用Internet Explorer、Google Chrome、Firebug或其他开发工具检查jqGrid的HTML结构。我们将看到以下几点
主
元素(
在上图中,获取类“ui jqgrid btable”)和另一个带有页脚的表元素(获取类“ui jqgrid ftable”)是独立的
所以马克对你问题的第一个回答是正确的。如果页面上有多个网格,可以使用
var$grid=$('jqgSummaryResults');//一个特定的网格
.... // 这里将创建网格
$grid.closest(“.UIJQGrid视图”)。查找(“.UIJQGrid sdiv”)。单击(函数(){
//单击页脚时执行。
var$td=$(e.target),
iCol=$.jgrid.getCellIndex($td);//或仅$td[0].cellIndex,
colModel=$grid.jqGrid(“getGridParam”,“colModel”);
//$td-表示单击的单元格
//iCol-单击单元格页脚中列的索引
//colModel[iCol].name-是单击单元格的列的名称
});
在网格的许多其他元素中描述了p.S。这些描述并不完整,但可能会有所帮助。这里是这个问题的一个小实现,我是jquery和jqgrid的新手,但我也遇到了同样的问题,感谢上面两篇@Oleg和@Mark的帖子,我实现了类似的东西:
//Raport1Grid-我的jqgrid的名称
//endusers、adminusers、decretusers—colModel中我的行的名称
//Raport1Grid\u终端用户-GridName\u 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);
这里演示
您解决了这个问题吗?如果您的问题已经解决,请您将答案标记为正确。@Gill Bates:对答案写一些评论是礼貌的。@Oleg抱歉,我只是没有足够的时间,我的注意力目前超出了这个问题的范围,但我会尽快查看帖子。onCellSelect
set one单击jqGrid主体所有元素上的事件处理程序。同样,可以使用原始构造$('.ui jqgrid sdiv')。单击(函数(e){…})
替换整个页脚上的onCellSelect
<代码>变量$td=$(e.target)代码>获取页脚已单击单元格的
<代码>var iCol=$.jgrid.getCellIndex($td)代码>或只是var-iCol=$td[0]代码>获取单击单元格的列索引。列名是$('#jqgSummaryResults').jqGrid(“getGridParam”,“colModel”)[iCol]。名称
。所以我仍然认为即使是原始的$('.ui jqgrid sdiv')。单击
提供正确的答案。@Oleg Cool,我将不得不检查选择器jQuery最近的
,因为我从来没有机会使用它。Oleg再次感谢您对答案的深度,因为它为我提供了进一步研究概念、学习和提高的背景和面包屑。欢迎您,或提供所述方法的示例。所以我仍然认为您最初的答案是正确的,尽管它没有更多的实现细节。致以最良好的祝愿@吉尔贝茨:不客气!如果你对我的答案给予赏金,你可以接受马克的答案,因为他的答案是正确的,但没有足够的细节。我不是问题的作者,我只是加了赏金:)