搜索
查看: 4967|回复: 4

[教程] 使用fixedrows属性固定表格标题行

[复制链接]

43

主题

679

帖子

3805

积分

版主

Rank: 7Rank: 7Rank: 7

积分
3805
发表于 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><font color="brown">capital</font> A <font color="green">with</font> grave = <font color="brown">capital</font> A grave</td></tr>
  <tr><td>á<td>á<td><font color="brown">capital</font> A with acute</td></tr>
  <tr><td>&#194;<td>&#194;<td><font color="brown">capital</font> A with circumflex</td></tr>
  <tr><td>&#195;<td>&#195;<td><font color="brown">capital</font> A with tilde</td></tr>
  <tr><td>&#196;<td>&#196;<td><font color="brown">capital</font> A with diaeresis</td></tr>
  <tr><td>&#197;<td>&#197;<td><font color="brown">capital</font> A with ring above = <font color="brown">capital</font> A ring</td></tr>
  <tr><td>&#198;<td>&#198;<td><font color="brown">capital</font> AE = <font color="brown">capital</font> ligature AE</td></tr>
  <tr><td>&#199;<td>&#199;<td><font color="brown">capital</font> C with cedilla</td></tr>
  <tr><td>è<td>è<td><font color="brown">capital</font> E with grave</td></tr>
  <tr><td>é<td>é<td><font color="brown">capital</font> E with acute</td></tr>
  <tr><td>ê<td>ê<td><font color="brown">capital</font> E with circumflex</td></tr>
  <tr><td>&#203;<td>&#203;<td><font color="brown">capital</font> E with diaeresis</td></tr>
  <tr><td>ì<td>ì<td><font color="brown">capital</font> I with grave</td></tr>
  <tr><td>í<td>í<td><font color="brown">capital</font> I with acute</td></tr>
  <tr><td>&#206;<td>&#206;<td><font color="brown">capital</font> I with circumflex</td></tr>
  <tr><td>&#207;<td>&#207;<td><font color="brown">capital</font> I with diaeresis</td></tr>
  <tr><td>D<td>D<td><font color="brown">capital</font> ETH</td></tr>
  <tr><td>&#209;<td>&#209;<td><font color="brown">capital</font> N with tilde</td></tr>
  <tr><td>ò<td>ò<td><font color="brown">capital</font> O with grave</td></tr>
  <tr><td>ó<td>ó<td><font color="brown">capital</font> O with acute</td></tr>
  <tr><td>&#212;<td>&#212;<td><font color="brown">capital</font> O with circumflex</td></tr>
  <tr><td>&#213;<td>&#213;<td><font color="brown">capital</font> O with tilde</td></tr>
  <tr><td>&#214;<td>&#214;<td><font color="brown">capital</font> O with diaeresis</td></tr>
  <tr><td>×<td>×<td>multiplication sign</td></tr>
  <tr><td>&#216;<td>&#216;<td><font color="brown">capital</font> O with stroke = <font color="brown">capital</font> O slash</td></tr>
  <tr><td>ù<td>ù<td><font color="brown">capital</font> U with grave</td></tr>
  <tr><td>ú<td>ú<td><font color="brown">capital</font> U with acute</td></tr>
  <tr><td>&#219;<td>&#219;<td><font color="brown">capital</font> U with circumflex</td></tr>
  <tr><td>ü<td>ü<td><font color="brown">capital</font> U with diaeresis</td></tr>
  <tr><td>Y<td>Y<td><font color="brown">capital</font> Y with acute</td></tr>
  <tr><td>T<td>T<td><font color="brown">capital</font> THORN</td></tr>
  <tr><td>&#223;<td>&#223;<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>&#227;<td>&#227;<td>small a with tilde</td></tr>
  <tr><td>&#228;<td>&#228;<td>small a with diaeresis</td></tr>
  <tr><td>&#229;<td>&#229;<td>small a with ring above = small a ring</td></tr>
  <tr><td>&#230;<td>&#230;<td>small ae = small ligature ae</td></tr>
  <tr><td>&#231;<td>&#231;<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>&#235;<td>&#235;<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>&#238;<td>&#238;<td>small i with circumflex</td></tr>
  <tr><td>&#239;<td>&#239;<td>small i with diaeresis</td></tr>
  <tr><td>e<td>e<td>small eth</td></tr>
  <tr><td>&#241;<td>&#241;<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>&#244;<td>&#244;<td>small o with circumflex</td></tr>
  <tr><td>&#245;<td>&#245;<td>small o with tilde</td></tr>
  <tr><td>&#246;<td>&#246;<td>small o with diaeresis</td></tr>
  <tr><td>÷<td>÷<td>division sign</td></tr>
  <tr><td>&#248;<td>&#248;<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>&#251;<td>&#251;<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>&#255;<td>&#255;<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();

回复

使用道具 举报

117

主题

1237

帖子

6592

积分

六级会员

Rank: 9Rank: 9Rank: 9

积分
6592
发表于 2012-7-14 14:04:42 | 显示全部楼层

不错的效果

不错的效果
回复

使用道具 举报

1

主题

29

帖子

170

积分

一级会员

Rank: 2

积分
170
发表于 2013-1-27 13:12:45 | 显示全部楼层

实验了一下,确实是效果不错哟!

实验了一下,确实是效果不错哟!
回复

使用道具 举报

8

主题

43

帖子

358

积分

培训班

积分
358
发表于 2017-12-26 15:45:15 | 显示全部楼层
请问有没有对应的fixedcols,可以让纵向最左边的几列可以固定的 ?

点评

没有,有就会写在教程、范例里  发表于 2017-12-26 15:46
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

手机版|未经许可严禁引用或转载本站文章|站长邮箱|aardio.com|aardio官方社区 ( 皖ICP备09012014号 )

GMT+8, 2018-12-15 21:18 , Processed in 0.062500 second(s), 23 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表