jqGrid는 jQuery를 사용하여 "th"와 "thead"를 얻습니다.

Question

jQuery를 사용하여 jqGrid에서 theader을 얻으려면 어떻게해야합니까?

Answer 1

thead 및 th이 DOM에있는 경우 선택할 수 있습니다. 당신이하려는 일의 모범이 있습니까?

Answer 2

시도 :

jQuery("thead", "#mygrid") 

Answer 3

내 짧은 대답은 : 대신 당신이

$("#list")[0].grid.headers 

를 사용해야합니다 당신은 그것은이의 배열을 반환 찾고 <th> 요소에 해당하는 DOM 요소의 선택 DOM 요소는 <th>에 해당합니다. 내 답변에 대한 자세한 설명이 이어집니다.

귀하의 질문에 대한 이유를 알고 있습니다. 당신은 예를 들어

<table id="list"></table> 
<div id="pager"></div> 

로있는 jqGrid의 기본 부분을 정의한 경우 $("#list") 헤더없이 그리드 만 "데이터" 부분 당신에게 <table>을 제공합니다. 테이블의 주요 "데이터"부분은 일부 div에 배치됩니다. jqGrid의 다른 요소는 div로 테이블로 배치됩니다. 있는 jqGrid (완전하지 않음)의 구조는 뜻은 다음과 같습니다 : (여기에 내가 rownumbers: true을 사용하는 테이블에

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 

, 그래서 th#list_rn있다, 첫 번째 열에는 이름이 'COL1'을 가지고, 그래서 거기에 th#list_Col1 등 하나의 열 머리글에 대한 tr.ui-jqgrid-labels과 filterToolbar 하나 tr.ui-search-toolbar :

)에 당신은 헤더 테이블 table.ui-jqgrid-htable 캔 두 아이 <tr> 하위 요소를 가지고 있음을 볼 수 있습니다.

내게는이 비교적 복잡한 계층 구조를 사용하지 말고 jqGrid에있는 또 다른 숨겨진 숨겨진 방법을 사용하십시오. 코드

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

당신은 테이블 요소의 DOM 요소를 얻을 수 있습니다. 이 요소에는 jqGrid에 의해 만들어지는 몇 가지 중요한 확장이 있습니다. 이것은 gridDom.p이며 jqGrid의 모든 매개 변수를 포함합니다. 또 다른 중요한 확장은 중요한 속성 bDiv, cDiv, hDiv, fbDiv, fhDiv, uDiv 또한 cols, footers, topDiv 및 headers와 gridDom.grid입니다. 그리드 열 머리글 (<tr> 행)의 <th> 요소 목록을받는 가장 좋은 방법은 gridDom.grid.headers 배열을 사용하는 것입니다.