jqGrid得到"th"个和"thead"使用jQuery [英] jqGrid get "th" and "thead" using jQuery

问题描述

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

How can I get theader on a jqGrid using jQuery?

推荐答案

我的简短答案是:不要选择与您要使用的<th>元素相对应的DOM元素

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

它返回此DOM元素的数组，对应于<th>.我的答案的详细说明如下.

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

我了解您提出问题的原因.例如，如果您将jqGrid的基础部分定义为

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>

然后$("#list")为您提供<table>，其中只有网格的数据" 部分，没有标题.该表的主要数据"部分将放置在某些div内. jqGrid的其他元素将作为表格放置在div中. jqGrid的结构(不完整)如下所示:

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

(在表中，我使用的是rownumbers: true，所以有th#list_rn，第一列的名称是'Col1'，所以有th#list_Col1，依此类推)

(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)

您会看到，标题表table.ui-jqgrid-htable可以具有两个子<tr>子元素:一个tr.ui-jqgrid-labels用于列标题，一个tr.ui-search-toolbar用于filterToolbar.

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.

我对您的建议不使用这种相对复杂的层次结构，而是使用jqGrid中存在的另一种简短的隐藏方法.代码

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];

获取表元素的DOM元素.该元素具有jqGrid所做的一些重要扩展.这是gridDom.p，其中包含jqGrid的所有参数.另一个重要的扩展是具有重要属性bDiv，cDiv，hDiv，fbDiv，fhDiv，uDiv以及cols，footers，topDiv和headers的gridDom.grid .我建议您使用gridDom.grid.headers数组作为从网格列标题(来自正确的<tr>行)接收<th>元素列表的最佳方法.

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).

这篇关于jqGrid得到"th"个和"thead"使用jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！