在鼠标悬停时从jqgrid获取数据

时间:2010-05-10 20:22:17

标签: javascript jquery jqgrid dataset mouseover

我正在尝试为jquery执行鼠标悬停,当鼠标悬停在某一行上时,我可以从该行获取id并填充信息并显示图像。但是,我一直在努力这么做。

这就是我想要发生的事情

就像在onSelectRow中,我使用以下代码获取数据

var ret = $('#list').jqGrid('getRowData', Id);

我想在鼠标悬停时使用。但是,我没有看到这样做的方法。我在gridComplete下尝试了以下内容

gridComplete: function() {'.jqgrow').mouseover(function(e) {
 var rowId = $('.jqgrow').parent(tr:first).attr('id');
 alert("You rolled over " + rowId.Id);
});
}

但它只给了我jqgrid中该表行的ide号,我需要来自该行的数据。

例如,在我的数据中,我有Id,FirstName,LastName,FullName,Title,SortID

我想通过将Id传递到HTML页面并通过数组查询,在我的HTML页面右侧显示图片时悬停在某些行上。如果我可以获得一些如何获得我的数据集中的实际Id,我可以完成其余的工作。

任何帮助都很可爱。

我在底部给出了jqGrid的全部代码供参考。

jQuery("#list").jqGrid({
url: '/Providers/DynamicGridData/',
datatype: 'json',
mtype: 'GET',
colNames: ['Id', 'LastName', 'FirstName', 'FullName', 'Title', 'Url', 'SortId'],
colModel: [
{ name: 'Id', index: 'Id', width: 30, align: 'left', hidden: true },
{ name: 'LastName', index: 'LastName', width: 30, align: 'left', hidden: true },
{ name: 'FirstName', index: 'FirstName', width: 30, align: 'left', hidden: true },
{ name: 'FullName', index: 'FullName', width: 100, align: 'left' },
/*{ name: 'FirstName', index: 'FirstName', width: 100, align: 'left' },*/
{name: 'Title', index: 'Title', width: 200, align: 'left' },
{ name: 'Url', index: 'Url', width: 30, align: 'left', hidden: true },
{ name: 'SortId', index: 'SortId', width: 30, align: 'left', hidden: true}],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'Id',
scrollOffset: 0,
width: '425',
altRows: 'true',
altClass: 'ui-priority-secondary',
autowidth: 'true',
height: '300',
altRows: 'true',
altClass: 'ui-priority-secondary',
viewrecords: true,
caption: 'Clinical Providers',
onSelectRow: function() {
var Id = $("#list").jqGrid('getGridParam', 'selrow');
if (Id) {
var ret = $('#list').jqGrid('getRowData', Id);
var url = ret.Url;
url.split(' ').join('');
//alert("id=" + ret.Id + "FullName=" + ret.FullName + "...");
window.location = "/" + url;
}
else { alert("Please select a row"); }
},
gridComplete: function() {
$('.jqgrow').mouseover(function(e) {
var rowId = $('.jqgrow').
alert("You rolled over " + rowId.Id);
});
}
});

3 个答案:

答案 0 :(得分:3)

我正在尝试使用此代码并且工作正常:

gridComplete: function() {
    $('.jqgrow').mouseover(function(e) {
        var rowId = $(this).attr('id');
        alert('You rolled over ' + rowId);
    });
}

答案 1 :(得分:0)

我很困惑 - 当你说:

var rowId = $('.jqgrow').parent(tr:first).attr('id');

那应该返回行的ID。然后,您可以将rowID传递给getRowData方法,以检索该行的其他数据。

答案 2 :(得分:0)

试试这段代码..这段代码工作...... 此代码检索jqgrid行对象..

$('.jqgrow').mouseover(function(e) {
 var rowId = $(this).attr('id');
 var dataFromTheRow = jQuery("#list").jqGrid('getRowData',rowId);// this is your jqgrid row object;
 alert('your jqgrid row object id = ' + dataFromTheRow.id);
               });