jQgrid：多列行标题 [英] jQgrid: multiple column row headers

问题描述

我正在尝试扩展我的jQGrid以使标题有多行。

它看起来像这样

  ----------------------- 
等级1  - > |应用| 
 ----------------------- 
等级2  - > |代码|名称| 
 ----------------------- 
 | 0002827 |手机1 
 | 0202827 |手机2 
 | 0042827 | Mobile Phon3e 
 | 0005827 |手机4 
 | 0002627 | Mobile Phon5e 
 | 0002877 |手机6 
 | 0002828 |手机7 
  

我想知道如何用jQGrid 3.8做到这一点。 2？有任何想法吗？

解决方案

问题实际上并不像第一眼看上去那么容易。我试图找到一个简单的解决方案，但我发现你能看到的最好的结果是或这个有问题，因为排序和列调整大小的工作不正确。

为了理解：网格移动< thead> 在表格之外并将其置于单独的 位于表格上方（请参阅此处了解更多信息）。它允许包含一些其他信息，例如在表头和表体之间搜索工具栏。 jqGrid代码中的其他位置（如列调整大小和列排序）如果存在其他标题（另外一个< tr> < th> ; 元素）在主列标题上。因此，只有在主列标题下插入 （当然看起来不太好）才会破坏列的排序和大小调整。

更新：请参阅答案在某些限制下解决问题。

I am trying to extend my jQGrid to have multiple rows for the header.

It will look something like this

               -----------------------
Level 1 - >    | Application         |
               -----------------------  
Level 2 - >    |Code    | Name       |  
               -----------------------
               | 0002827| Mobile Phone1
               | 0202827| Mobile Phone2
               | 0042827| Mobile Phon3e
               | 0005827| Mobile Phone4
               | 0002627| Mobile Phon5e
               | 0002877| Mobile Phone6
               | 0002828| Mobile Phone7

I am wondering how to do this with jQGrid 3.8.2? Any ideas?

解决方案

The problem is really not so easy as it looks like at first glance. I tried to find a simple solution, but the best result which I found you can see here:

The order of the headers (level 1 and level 2) is not as one would like to have. Other attempts like this or this are buggy because the sorting and column resizing works not more correct.

For the understanding: the grid moves the <thead> outside of the table and places it inside of separate which are placed above the table (see here for more information). It allows including some additional information like searching toolbar between the table header and the table body. Other places in the jqGrid code like column resizing and column sorting works incorrect if there are exist other headers (one more <tr> with <th> elements) over the main column headers. So only the inserting of additional column headers under the main columns headers (which looks not nice of course) not breaks the sorting and the resizing of columns.

UPDATED: See the answer which do provide the solution of the problem under some restrictions.

这篇关于jQgrid：多列行标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！