使用fixedrows属性固定表格标题行

编程 · 发表于 2012-6-28 14:55:50

固定表格标题行这在浏览器中可能有些麻烦，但在HTMLayout中非常简单。
table节点(表格) 可使用fixedrows属性指定在滚动时固定位置的标题行数。

例如　 <table fixedrows ="2"> 表示第一行，第二行在滚动表格时固定位置。
需要同时在CSS中指定表格的高度, 并指定CSS属性 overflow: auto;　以启用滚动条。　

示例如下( 粗体字部分为关键代码 )：

import win.ui;

/*DSG{{*/
var winform = ..win.form( bottom=327;parent=...;right=593;text="使用fixedrows属性固定表格标题行" )
winform.add( )
/*}}*/

import web.layout;
wbLayout = web.layout(winform);

wbLayout.html = /**
<body>
table节点(表格) 可使用fixedrows属性指定在滚动时固定位置的标题行数。
<table fixedrows="1" cellspacing="0" >
 <tr><th>Character<th>Entity<th>Description</th></tr>
 <tr><td>à<td>à<td>capital A with grave = capital A grave</td></tr>
 <tr><td>á<td>á<td>capital A with acute</td></tr>
 <tr><td>Â<td>Â<td>capital A with circumflex</td></tr>
 <tr><td>Ã<td>Ã<td>capital A with tilde</td></tr>
 <tr><td>Ä<td>Ä<td>capital A with diaeresis</td></tr>
 <tr><td>Å<td>Å<td>capital A with ring above = capital A ring</td></tr>
 <tr><td>Æ<td>Æ<td>capital AE = capital ligature AE</td></tr>
 <tr><td>Ç<td>Ç<td>capital C with cedilla</td></tr>
 <tr><td>è<td>è<td>capital E with grave</td></tr>
 <tr><td>é<td>é<td>capital E with acute</td></tr>
 <tr><td>ê<td>ê<td>capital E with circumflex</td></tr>
 <tr><td>Ë<td>Ë<td>capital E with diaeresis</td></tr>
 <tr><td>ì<td>ì<td>capital I with grave</td></tr>
 <tr><td>í<td>í<td>capital I with acute</td></tr>
 <tr><td>Î<td>Î<td>capital I with circumflex</td></tr>
 <tr><td>Ï<td>Ï<td>capital I with diaeresis</td></tr>
 <tr><td>D<td>D<td>capital ETH</td></tr>
 <tr><td>Ñ<td>Ñ<td>capital N with tilde</td></tr>
 <tr><td>ò<td>ò<td>capital O with grave</td></tr>
 <tr><td>ó<td>ó<td>capital O with acute</td></tr>
 <tr><td>Ô<td>Ô<td>capital O with circumflex</td></tr>
 <tr><td>Õ<td>Õ<td>capital O with tilde</td></tr>
 <tr><td>Ö<td>Ö<td>capital O with diaeresis</td></tr>
 <tr><td>×<td>×<td>multiplication sign</td></tr>
 <tr><td>Ø<td>Ø<td>capital O with stroke = capital O slash</td></tr>
 <tr><td>ù<td>ù<td>capital U with grave</td></tr>
 <tr><td>ú<td>ú<td>capital U with acute</td></tr>
 <tr><td>Û<td>Û<td>capital U with circumflex</td></tr>
 <tr><td>ü<td>ü<td>capital U with diaeresis</td></tr>
 <tr><td>Y<td>Y<td>capital Y with acute</td></tr>
 <tr><td>T<td>T<td>capital THORN</td></tr>
 <tr><td>ß<td>ß<td>small sharp s = ess-zed</td></tr>
 <tr><td>à<td>à<td>small a with grave = small a grave</td></tr>
 <tr><td>á<td>á<td>small a with acute</td></tr>
 <tr><td>a<td>a<td>small a with circumflex</td></tr>
 <tr><td>ã<td>ã<td>small a with tilde</td></tr>
 <tr><td>ä<td>ä<td>small a with diaeresis</td></tr>
 <tr><td>å<td>å<td>small a with ring above = small a ring</td></tr>
 <tr><td>æ<td>æ<td>small ae = small ligature ae</td></tr>
 <tr><td>ç<td>ç<td>small c with cedilla</td></tr>
 <tr><td>è<td>è<td>small e with grave</td></tr>
 <tr><td>é<td>é<td>small e with acute</td></tr>
 <tr><td>ê<td>ê<td>small e with circumflex</td></tr>
 <tr><td>ë<td>ë<td>small e with diaeresis</td></tr>
 <tr><td>ì<td>ì<td>small i with grave</td></tr>
 <tr><td>í<td>í<td>small i with acute</td></tr>
 <tr><td>î<td>î<td>small i with circumflex</td></tr>
 <tr><td>ï<td>ï<td>small i with diaeresis</td></tr>
 <tr><td>e<td>e<td>small eth</td></tr>
 <tr><td>ñ<td>ñ<td>small n with tilde</td></tr>
 <tr><td>ò<td>ò<td>small o with grave</td></tr>
 <tr><td>ó<td>ó<td>small o with acute</td></tr>
 <tr><td>ô<td>ô<td>small o with circumflex</td></tr>
 <tr><td>õ<td>õ<td>small o with tilde</td></tr>
 <tr><td>ö<td>ö<td>small o with diaeresis</td></tr>
 <tr><td>÷<td>÷<td>division sign</td></tr>
 <tr><td>ø<td>ø<td>small o with stroke = small o slash</td></tr>
 <tr><td>ù<td>ù<td>small u with grave</td></tr>
 <tr><td>ú<td>ú<td>small u with acute</td></tr>
 <tr><td>û<td>û<td>small u with circumflex</td></tr>
 <tr><td>ü<td>ü<td>small u with diaeresis</td></tr>
 <tr><td>y<td>y<td>small y with acute</td></tr>
 <tr><td>t<td>t<td>small thorn</td></tr>
 <tr><td>ÿ<td>ÿ<td>small y with diaeresis</td></tr>
</table>
</body>
**/

wbLayout.css = /**
body{
 font:system;
}
table{
 margin:20px;
 height:200px;
 overflow: auto;
 width:100%;
}
table th {
 color: white;
 font-family:"Century Gothic","Verdana";
 font-size:10pt;
 border:none;
 padding:4px;
 background-color:#666;
}
**/
winform.show();
win.loopMessage();

落伍者 · 发表于 2012-7-14 14:04:42

不错的效果

evanliang · 发表于 2013-1-27 13:12:45

实验了一下，确实是效果不错哟！

daheian · 发表于 2017-12-26 15:45:15

请问有没有对应的fixedcols，可以让纵向最左边的几列可以固定的？

		自动登录	找回密码
密码			注册会员

使用fixedrows属性固定表格标题行

点评