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

前端之家收集整理的这篇文章主要介绍了jqGrid使用jQuery获取“th”和“thead”前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如何使用jQuery在jqGrid上获取头?

解决方法

我的简短回答是:而不是选择对应于第一个的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,所以有#list_rn,第一列的名字叫’Col1′,所以有#list_Col1等等)

你可以看到,表头table.ui-jqgrid-htable可以有两个子< tr>子元素:列标题的一个tr.ui-jqgrid标签和filterToolbar的一个tr.ui-search-toolbar.

我的建议不要使用这个相对复杂的层次结构,而是使用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>行).

原文链接:https://www.f2er.com/jquery/177771.html

猜你在找的jQuery相关文章