jqGrid nhận "th" và "thead" bằng cách sử dụng jQuery

Question

Làm cách nào để có được theader trên jqGrid bằng jQuery?

Answer 1

Nếu một thead và th tồn tại trên DOM, nó có thể được chọn. Bạn có một ví dụ về những gì bạn đang cố gắng làm?

Answer 2

Hãy thử:

jQuery("thead", "#mygrid") 

Answer 3

trả lời ngắn gọn của tôi là: thay vì chọn các yếu tố DOM tương ứng <th> yếu tố mà bạn đang tìm kiếm bạn nên sử dụng

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

Nó trả về mảng này Các phần tử DOM, tương ứng với <th>. Mô tả dài của câu trả lời của tôi sau.

Tôi hiểu lý do câu hỏi của bạn. Nếu bạn đã ví dụ xác định một phần cơ sở của jqGrid như

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

sau đó $("#list") mang đến cho bạn <table> chỉ với "dữ liệu" một phần của lưới mà không tiêu đề. Phần "dữ liệu" chính của bảng sẽ được đặt bên trong một số div. Các phần tử khác của jqGrid sẽ được đặt trong các div như một bảng. Cấu trúc của jqGrid (không đầy đủ) sẽ trông giống như sau:

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 

(ở đây trong bảng tôi đã sử dụng rownumbers: true, vì vậy có th#list_rn, cột đầu tiên có tên 'col1', vì vậy có th#list_Col1 và do đó trên)

Bạn có thể thấy, đó là tiêu đề bảng table.ui-jqgrid-htable lon có hai con <tr> các bổ sung: một tr.ui-jqgrid-labels cho các tiêu đề cột và một tr.ui-search-toolbar cho filterToolbar.

Đề xuất của tôi cho bạn không sử dụng cấu trúc phân cấp tương đối phức tạp này, nhưng sử dụng một cách ẩn ngắn khác hiện có trong jqGrid. Mã số

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

cho bạn phần tử DOM của phần tử bảng. Phần tử này có một số phần mở rộng quan trọng được tạo bởi jqGrid. Đây là gridDom.p chứa tất cả các tham số của jqGrid. Một mở rộng quan trọng là gridDom.grid với những đặc tính quan trọng bDiv, cDiv, hDiv, fbDiv, fhDiv, uDiv và cũng cols, footers, topDiv và headers. Tôi khuyên bạn nên sử dụng mảng gridDom.grid.headers làm cách tốt nhất để nhận danh sách các phần tử <th> từ tiêu đề cột lưới (từ hàng chính xác <tr>).