jqGrid的获得“日”和“THEAD”使用jQueryjqGrid的获得“日”和“THEAD”使用

2019-05-11 06:02发布

我怎样才能theader上使用jQuery一个jqGrid的?

Answer 1:

我的答案很简单:不是的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-toolbarfilterToolbar

我对你的建议不使用这种相对复杂的层次结构,而是使用现有的jqGrid中的另一个短隐蔽的方式。 代码

var gridDom = $("#list")[0];

让你的表格元素的DOM元素。 该元素具有通过的jqGrid取得了一些重要延伸。 这是gridDom.p包含的jqGrid的所有参数。 另一个重要的扩展gridDom.grid具有重要的属性bDivcDivhDivfbDivfhDivuDivcolsfooterstopDivheaders 。 我建议您使用gridDom.grid.headers阵列作为最好的方法来接收的列表<th>从电网列标题元素(从正确的<tr>行)。



Answer 2:

如果theadth关于DOM存在,它可以被选择。 你有你想要做什么的例子吗?



Answer 3:

尝试:

jQuery("thead", "#mygrid")


文章来源: jqGrid get “th” and “thead” using jQuery