jqGrid get "th" and "thead" using jQuery

How can I get theader on a jqGrid using jQuery?

Solution 1:

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

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

It returns the array of this DOM elements, corresponds the <th>. The long description of my answer follows.

I understand the reason of your question. If you have 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" part of the grid without headers. The main "data" part of the table will be placed inside some divs. Other elements of jqGrid will be placed in the divs as a tables. The structure of jqGrid (not full) will looks like following:

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 are th#list_rn, the first column has the name 'Col1', so there are th#list_Col1 and so on)

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

My suggestion for you don't use this relatively complex hierarchy, but use another short hidden way existing in jqGrid. The code

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

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