jqGrid получает "th" и "thead", используя jQuery - PullRequest
Новая
       19

jqGrid получает "th" и "thead", используя jQuery

7 голосов
/ 11 августа 2010

Как я могу получить theader на jqGrid с помощью jQuery?

Ответы [ 3 ]

15 голосов
/ 12 августа 2010

Мой краткий ответ: вместо выбора элементов 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>).

0 голосов
/ 11 августа 2010

Попробуйте: 

jQuery("thead", "#mygrid")
0 голосов
/ 11 августа 2010

Если в DOM существуют thead и th, его можно выбрать.У вас есть пример того, что вы пытаетесь сделать?

...