jqGrid 使用 jQuery 获取“th”和“thead”答案

【问题标题】：jqGrid get "th" and "thead" using jQueryjqGrid 使用 jQuery 获取“th”和“thead”
【发布时间】：2011-03-28 14:02:50
【问题描述】：

如何使用 jQuery 在 jqGrid 上获取 theader？

【问题讨论】：

标签： jquery jqgrid jqgrid-asp.net

【解决方案1】：

我的简短回答是：与其选择与您正在寻找的 <th> 元素相对应的 DOM 元素，不如使用

$("#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、headers7 和@98765434@7@7 .我建议您使用gridDom.grid.headers 数组作为从网格列标题（从正确的<tr> 行）接收<th> 元素列表的最佳方式。

【讨论】：

【解决方案2】：

试试：

jQuery("thead", "#mygrid")

【讨论】：

【解决方案3】：

如果 DOM 上存在 thead 和 th，则可以选择它。你有一个你想要做什么的例子吗？

【讨论】：