JqGrid gets "th" and "thead" using jQuery

How can I get theader in jqGrid using jQuery?

+7
jquery jqgrid
Aug 11 '10 at 7:28 a.m.
source share
3 answers

My short answer is: instead of selecting the DOM elements that match the <th> elements you are looking for, you should use

 $("#list")[0].grid.headers 

It returns an array of these DOM elements, corresponding to <th> . There should be a long description of my answer.

I understand the reason for your question. If you, for example, defined the base part of jqGrid as

 <table id="list"></table> <div id="pager"></div> 

then $("#list") gives you <table> with only the "data" portion of the grid without headers . The bulk of the "data" data will be placed inside some divs. Other jqGrid elements will be placed in the div as tables. The jqGrid structure (not complete) will look like this:

 div.ui-jqgrid#gbox_list div.ui-jqgrid-view#gview_list div.ui-jqgrid-titlebar - caption div.ui-userdata#t_list - optional top toolbar div.ui-jqgrid-toppager#list_toppager - optional top pager div.ui-jqgrid-hdiv - all grid headers div.ui-jqgrid-hbox - (div.ui-jqgrid-hbox-rtl) if direction:"rtl" table.ui-jqgrid-htable thead tr.ui-jqgrid-labels - row with column headers (labels) th#list_rn - optional column header with row numbers th#list_Col1 - column header for the column name:"Col1" ... th#list_level - optional column header for some other special columns in case of usage TreeGrid the hidden columns of TreeGrid are: level, parent, isLeaf, expanded, loaded, icon tr.ui-search-toolbar - row for toolbar searching th th ... div.frozen-div.ui-jqgrid-hdiv - optional frozen headers table.ui-jqgrid-htable - table with frozen columns headers only ... div.ui-jqgrid-bdiv - div with the main grid data div table#list - table with the main grid data div.frozen-bdiv.ui-jqgrid-bdiv - optional div with the main grid data div table#list_frozen - table with the main grid data div.ui-userdata#tb_list - optional bottom toolbar div.ui-jqgrid-resize-mark#rs_mlist div.ui-jqgrid-pager#pager - the div with the pager 

(here in the table I used rownumbers: true , so there is th#list_rn , the first column is named "Col1", so there is th#list_Col1 , etc.)

You can see that the table header table.ui-jqgrid-htable can contain two child <tr> subelements: one tr.ui-jqgrid-labels for column headers and one tr.ui-search-toolbar for filterToolbar .

My suggestion for you does not use this relatively complex hierarchy, but use another short hidden way that exists in jqGrid. The code

 var gridDom = $("#list")[0]; 

get the DOM element of the table element. This element has some important extension that jqGrid creates. These are gridDom.p which contain all jqGrid parameters. Another important extension is gridDom.grid with important properties bDiv , cDiv , hDiv , fbDiv , fhDiv , uDiv , as well as cols , footers , topDiv and topDiv suggest you use the array gridDom.grid.headers as the best way to get a list of <th> elements <th> from the headers of the grid columns (from the correct row <tr> ).

+15
Aug 11 '10 at 21:30
source share

If a thead and th exist in the DOM, you can select it. Do you have an example of what you are trying to do?

0
Aug 11 '10 at 19:31
source share

Try:

 jQuery("thead", "#mygrid") 
0
Aug 11 '10 at 19:32
source share



All Articles