如何使用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>行).