How to get cell information for mouseover event in jqGrid

Question

This question is specific to jqGrid. I found out that we can use the .jqgrow element with the mouseover event to get string information like this:

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

My question is how can we get information about the columns, information about the name of the cell, and information about the contents of the cell in such an event. Thanks in advance.

Answer 1

First of all, you do not need to bind a mouseover to each line. This is enough to connect the event once with the whole body of the grid. The event parameter e has the target property, which is initialized to the object, which is the start of the mouseover event. So you can use jQuery.closest to find the <td> and <tr> elements that are in the current context. In how you save memory and slightly improve the performance of the solution.

The demo shows how everything works in jqGrid. Code used

 var cm = $grid.jqGrid('getGridParam', 'colModel'); $grid.mouseover(function(e) { var $td = $(e.target).closest('td'), $tr = $td.closest('tr.jqgrow'), rowId = $tr.attr('id'), ci; if (rowId) { ci = $.jgrid.getCellIndex($td[0]); // works mostly as $td[0].cellIndex if (console) { console.log('You rolled over the row with id="' + rowId + '" in the column ' + cm[ci].name); } } }); 

The result to be produced by the demo is as follows

 LOG: You rolled over the row with id="10" in the column note LOG: You rolled over the row with id="10" in the column ship_via LOG: You rolled over the row with id="9" in the column ship_via LOG: You rolled over the row with id="8" in the column ship_via LOG: You rolled over the row with id="8" in the column total LOG: You rolled over the row with id="7" in the column total LOG: You rolled over the row with id="7" in the column tax LOG: You rolled over the row with id="6" in the column tax LOG: You rolled over the row with id="6" in the column amount LOG: You rolled over the row with id="5" in the column amount LOG: You rolled over the row with id="4" in the column amount LOG: You rolled over the row with id="4" in the column invdate LOG: You rolled over the row with id="3" in the column invdate LOG: You rolled over the row with id="3" in the column name LOG: You rolled over the row with id="2" in the column name LOG: You rolled over the row with id="1" in the column name 

Answer 2

It has nothing to do with the .jqgrow class.

This is due to the event that sets this to the dom element in which the event occurred.

So if this is HTML:

 <div class="jqgrow" data-id="232" id="blabla">Text</div> 

Then this will be what HTML is on the mouse. What can you do with anyone.

 $('.jqgrow').mouseover(function(e) { var id = $(this).attr('id'); var dataId = $(this).data('id'); var html = this; }); 

Answer 3

Edit

OK, I didn’t see that you are using the jQuery grid plugin .

All columns have the role="gridcell" attribute, so you can use the attribute-based selector to select all cells:

 // untested $('td[role*="gridcell"]').hover(); 

First answer

This answer is more like a universal answer to the problem.

I assume you have a table like this:

 <table> <tr class="jqgrow"> <td>1</td> <td>2</td> <td>3</td> </tr> </table> 

Than you can get information about the columns inside the hanging line with:

 $('.jqgrow').mouseover(function(e) { // get all child elements (td, th) in an array var cols = $(this).children(); console.log('All cols: ' + cols); // to retrieve a single column as a jQuery object use '.eq()' - it like every array redo-indexed console.log('HTML from col 2: ' + cols.eq(1).html()); }); 

This will work for any other structure:

 <div class="jqrow"> <div>1</div> <div>2</div> <div>3</div> </div> 

If you want to hover over each .jqrow , you can attach it directly to the children:

 $('.jqgrow').children().mouseover(function(e) { // gets the current 'column' var $this = $(this); }); 

Answer 4

 var cm = jQuery("#list1″).jqGrid("getGridParam", "colModel"); var colName = cm[iCol]; 

Source: http://www.trirand.com/blog/?page_id=393/help/get-column-index-name-oncellselect-event-after-column-reorder/

Answer 5

if you can get the row id then it is hard to get cell information.

var col = $ ('# grid'). jqGrid ('getCell', rowId, columnName);

this will give data for this column.