Как я могу получить theader
в jqGrid с помощью jQuery?
jqGrid получить th и thead с помощью jQuery
Ответы (3)
Мой короткий ответ: вместо выбора элементов DOM, которые соответствуют <th>
элементам, которые вы ищете, вы должны использовать
$("#list")[0].grid.headers
Он возвращает массив этих элементов DOM, соответствующий <th>
. Далее следует подробное описание моего ответа.
Я понимаю причину вашего вопроса. Если вы, например, определили базовую часть jqGrid как
<table id="list"></table>
<div id="pager"></div>
тогда $("#list")
дает вам <table>
только с "данными" части сетки, без заголовков. Основная «информационная» часть таблицы будет размещена внутри некоторых div. Остальные элементы jqGrid будут размещены в div в виде таблиц. Структура jqGrid (не полная) будет выглядеть следующим образом:
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
(здесь в таблице я использовал rownumbers: true
, поэтому есть th#list_rn
, первый столбец имеет имя Col1, поэтому есть th#list_Col1
и так далее)
Вы можете видеть, что таблица заголовков table.ui-jqgrid-htable
может иметь два дочерних <tr>
подэлемента: один tr.ui-jqgrid-labels
для заголовков столбцов и один tr.ui-search-toolbar
для filterToolbar
.
Я предлагаю вам не использовать эту относительно сложную иерархию, а использовать другой короткий скрытый способ, существующий в jqGrid. Код
var gridDom = $("#list")[0];
получить элемент DOM элемента таблицы. У этого элемента есть важные расширения, сделанные jqGrid. Это gridDom.p
, которые содержат все параметры jqGrid. Другое важное расширение - gridDom.grid
с важными свойствами bDiv
, cDiv
, hDiv
, fbDiv
, fhDiv
, uDiv
, а также cols
, footers
, topDiv
и headers
. Я предлагаю вам использовать массив gridDom.grid.headers
как лучший способ получить список из <th>
элементов из заголовков столбцов сетки (из правильной строки <tr>
).
Если thead
и th
существуют в DOM, их можно выбрать. У вас есть пример того, что вы пытаетесь сделать?
Пытаться:
jQuery("thead", "#mygrid")