jqGrid冷冻标题
我们使用最新版本的free-jqgrid。jqGrid冷冻标题
我们希望为我们所有的网格固定(冻结)标题:verticall滚动条显示网格,它只滚动内容。
据我所知,这可以通过使用固定网格的高度来实现,但如果高度适合用户的屏幕高度,将会非常好。 (可能是我们应该改变页面加载的大小?)
什么是最好的实现方式?
例子:https://jsfiddle.net/qrxkuvfz/1/
设置width: 400
做不好的工作。 我只想把滚动放在网格中。和高度 - 最大可用。
如果我正确理解你的要求,那么你只需要添加``选项的jqGrid。例如,修饰的演示https://jsfiddle.net/OlegKi/qrxkuvfz/2/使用
rowNum: 15,
maxHeight: 330,
的maxHeight
是大到足以显示在rowNum
指定的所有15行,但如果用户增加。
或者您可以使用onPaging
回调(见the wiki article),其中使用setGridHeight
方法的jqGrid的height
选项设置为一些数字值或"auto"
取决于options
参数的newRowNum
和currentRowNum
性质。
是的,唯一的问题是可以将'maxHeight'或'height'设置为浏览器的窗口大小吗?因此,在第一次加载时,整个页面将适合网格,就像我们使用'auto'时一样。如果不是,我们只会选择一些常见的高度。 – freeek
@freeek:在创建jqGrid和使用相应的'rowNum','maxHeight'或'height'之前,您可以获得widow height *。 'window.innerHeight'是基值,可以使用。该页面可能具有其他元素,例如导航栏,可降低“rowNum”,“maxHeight”或“height”的最佳值。你应该减少'window.innerHeight'的值并设置'rowNum','maxHeight'或'height'的相应值。 – Oleg
好吧,只是想可能已经有一些内置的方法了。现在很明显。 – freeek
基本上,您可以使用您的CSS来修复您的标题(冻结),并使用一点javascript/jquery将高度分配给tbody
,以便表格适合屏幕。
还要添加一个overflow
属性来启用在特定高度后的CSS中的滚动条。
参考代码:
$("tbody").height($(window).innerHeight() + "px");
table {
position: relative;
width: 700px;
background-color: #aaa;
overflow: hidden;
border-collapse: collapse;
}
/*thead*/
thead {
position: relative;
display: block;
/*seperates the header from the body allowing it to be positioned*/
width: 700px;
overflow: visible;
}
thead th {
background-color: #99a;
min-width: 120px;
height: 36px;
min-height: 36px;
border: 1px solid #222;
}
thead th:nth-child(1) {
/*first cell in the header*/
position: relative;
display: block;
background-color: #88b;
}
/*tbody*/
tbody {
display: block;
width: 700px;
overflow-y: auto;
}
tbody td {
background-color: #bbc;
min-width: 120px;
border: 1px solid #222;
height: 36px;
min-height: 36px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Town</th>
<th>County</th>
<th>Age</th>
<th>Profession</th>
<th>Anual Income</th>
<th>Matital Status</th>
<th>Children</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Smith</td>
<td>Macelsfield</td>
<td>Cheshire</td>
<td>52</td>
<td>Brewer</td>
<td>£47,000</td>
<td>Married</td>
<td>2</td>
</tr>
<tr>
<td>Jenny Jones</td>
<td>Threlkeld</td>
<td>Cumbria</td>
<td>34</td>
<td>Shepherdess</td>
<td>£28,000</td>
<td>Single</td>
<td>0</td>
</tr>
<tr>
<td>Peter Frampton</td>
<td>Avebury</td>
<td>Wiltshire</td>
<td>57</td>
<td>Musician</td>
<td>£124,000</td>
<td>Married</td>
<td>4</td>
</tr>
<tr>
<td>Simon King</td>
<td>Malvern</td>
<td>Worchestershire</td>
<td>48</td>
<td>Naturalist</td>
<td>£65,000</td>
<td>Married</td>
<td>2</td>
</tr>
<tr>
<td>Lucy Diamond</td>
<td>St Albans</td>
<td>Hertfordshire</td>
<td>67</td>
<td>Pharmasist</td>
<td>Retired</td>
<td>Married</td>
<td>3</td>
</tr>
<tr>
<td>Austin Stevenson</td>
<td>Edinburgh</td>
<td>Lothian</td>
<td>36</td>
<td>Vigilante</td>
<td>£86,000</td>
<td>Single</td>
<td>Unknown</td>
</tr>
<tr>
<td>Wilma Rubble</td>
<td>Bedford</td>
<td>Bedfordshire</td>
<td>43</td>
<td>Housewife</td>
<td>N/A</td>
<td>Married</td>
<td>1</td>
</tr>
<tr>
<td>Kat Dibble</td>
<td>Manhattan</td>
<td>New York</td>
<td>55</td>
<td>Policewoman</td>
<td>$36,000</td>
<td>Single</td>
<td>1</td>
</tr>
<tr>
<td>Henry Bolingbroke</td>
<td>Bolingbroke</td>
<td>Lincolnshire</td>
<td>45</td>
<td>Landowner</td>
<td>Lots</td>
<td>Married</td>
<td>6</td>
</tr>
<tr>
<td>Alan Brisingamen</td>
<td>Alderley</td>
<td>Cheshire</td>
<td>352</td>
<td>Arcanist</td>
<td>A pile of gems</td>
<td>Single</td>
<td>0</td>
</tr>
</tbody>
</table>
</body>
@奥列格,欢迎您! – freeek
1)如果你想写信给我,那么你应该给我的**旧回答**写评论“@Oleg”。只有在这种情况下,计算器才能将名称“Oleg”映射到我的用户标识[315935](http://*.com/users/315935/oleg)。你应该明白,有几乎2000名其他用户的名字奥列格(见[这里](http://*.com/search?q=Oleg))。 2)我必须先做我的主要工作。你不应该期望我的直接答案。 3)请张贴更详细的描述你做什么和你需要什么。图片和JavaScript代码可能会非常有帮助。 – Oleg
我不确定您是否正确使用当前免费的jqGrid。您所描述的问题在使用正确的jqGrid的情况下根本不存在。它真的需要你发布你使用的JavaScript代码。你使用简单的网格或TreeGrid,带有子网格的网格,数据分组... ...?我用本地数据填充网格('datatype:“local”')或者使用服务器端分页?你使用pager/toppager吗?哪个值具有'rowNum'和'height'参数? – Oleg