How can I get theader
on a jqGrid using jQuery?
问题:
回答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).
回答2:
If a thead
and th
exists on the DOM, it can be selected. Do you have an example of what you\'re trying to do?
回答3:
Try:
jQuery(\"thead\", \"#mygrid\")