aardio 官方社区

 找回密码
 注册会员

QQ登录

只需一步,快速开始

搜索
查看: 97629|回复: 154

HTMLayout 使用behavior:select 实现列表视图( listview )

 火.. [复制链接]

43

主题

628

回帖

3765

积分

版主

积分
3765
发表于 2012-10-27 22:54:37 | 显示全部楼层 |阅读模式
在HTML里,使用普通的table表格就可以显示出列表视图( listview )的效果,
但是这样并不能具备listview的交互行为,例如按方向箭在列表项间移动等等。
这时候可以使用标准库中提供的 behavior:grid; 需要事先在aardio代码中调用 import web.layout.behavior.grid; 导入该模块。然后在表格的CSS属性中指定 behavior:grid;就可以显示为列表视图了, grid实现listview的一个主要优势是可以实现多选(默认支持按CTRL,SHIFT组合键多选,可以响应 onTableRowClick 等事件, 关于grid 请参考aardio里自带的HTMLayout范例、以及标准库的源码这里暂不多讲。

在HTMLayout里,select控件默认显示为下拉列表框,代码如下:
<select>size属性默认等于1</select> 或者 <widget type="select-dropdown">…</widget>
select控件默认加载的behavior 为"select-dropdown" (下拉框控件),而不是"behavior:select"。

behavior:select-dropdown 类似 behavior: popup-selector 都是用来实现下拉框控件。
而"behavior:select" 则主要是用来显示一个展开的列表框(listbox)、或者列表视图(listview)、也可以用来实现树形视图(treeview) 参考帖子:HTMLayout内置behavior大全

下面的HTML代码会默认加载"behavior:select" ,显示为列表框(没有下拉按钮,直接显示列表)

  1. <select size=N>…</select> , N是大于1的数,指定显示行数,显示1行时为下拉列表,显示多行列表框
  2. <select type=“select”>…</select> 注意这里即使size=1也会显示为select,而不是下拉框(select-dropdown)
  3. <widget type=“select”></widget>
复制代码


举个例子,下面的HTML代码显示为一个简单的列表框( listbox ) :
<widget type="select">
    <OPTION VALUE=0 SELECTED>列表项1</OPTION><OPTION VALUE=1 >列表项2</OPTION>
</widget>
当然比起winform中传统的listbox控件 - 他可以实现更多复杂的显示效果,OPTION节点里还可以写其他的HTML。

有意思的是:
HTMLayout还可以在CSS中使用 flow属性轻松的改变节点的布局、排列方式( 请参考教程:HTMLayout flow布局样式),
下面的代码改变前面列表框的布局为水平流式布局:
<style>
    widget[name=iconview] {
        flow:h-flow;
        width:500px;
    }
    widget[name=iconview] OPTION:nth-child(3n+1)
    {
            clear:left; /*每行显示3列 */
    }
</style>

<widget
type="select" name="iconview">
    <OPTION VALUE=0 SELECTED>列表项1</OPTION><OPTION VALUE=1 >列表项2</OPTION><OPTION VALUE=1 >列表项4</OPTION><OPTION VALUE=1 >列表项4</OPTION><OPTION VALUE=1 >列表项5</OPTION><OPTION VALUE=1 >列表项6</OPTION>
</widget>

这类似于传统窗口控件中的listview控件以图标(icon)模式显示的效果。


列表框中的内容可以是一个表格( table ),每行可以显示多列,实现类似报表视图的效果,
表格的的每行( tr ) 节点指定 role="option" 属性表示列表中的一行,HTML简单示例如下:
<widget type="select" >
    <table>
        <tr><th>标题一</th><th>标题二</th></tr>
        <tr role=
"option" value=3> <td>第一行第一列</td>  <td>第一行第二列</td> </tr>         
        <tr role=
"option" value=4> <td>第二行第一列</td>  <td>第二行第二列</td> </tr>
        <tr role=
"option" value=5> <td>测试</td> <td>测试</td> </tr>
        <tr role=
"option" value=6> <td>测试</td> <td>测试</td> </tr>         
    </table>
</widget>

下面是一个完整的aardio示例:
  1. import win.ui;
  2. /*DSG{{*/
  3. var winform = ..win.form( bottom=399;parent=...;right=599;text="HTMLayout 列表框" )
  4. winform.add(  )
  5. /*}}*/

  6. import web.layout;
  7. var wbLayout = web.layout(winform)
  8.   
  9. wbLayout.html = /**
  10. <HTML>
  11.     <HEAD>
  12.     <STYLE>
  13.     body { font:10pt verdana; }
  14.   
  15.     #report
  16.     {
  17.       width:*;
  18.       height:*;
  19.     }
  20.     #report th
  21.     {
  22.       background-color: threedhighlight threedhighlight threedlightshadow threedlightshadow;
  23.       border:1px solid threedlightshadow;
  24.       padding:4px;
  25.     }
  26.     #report td
  27.     {
  28.       context-menu: selector(menu#menuId); /*selector函数的参数是指定右键菜单的CSS选择器*/
  29.       border:1px solid threedlightshadow;
  30.       padding:4px;
  31.     }
  32.     #report tr:nth-child(even) /* every even row */
  33.     {
  34.       background-color: mintcream;
  35.     }
  36.   
  37.     #report tr:current td /* current row */
  38.     {
  39.       background-color: highlight;
  40.       color: highlighttext;
  41.     }
  42.     </STYLE>
  43.     </HEAD>
  44.     <BODY>
  45.    
  46.     <widget type="select" id="report"  >
  47.         <table border=1 width=100%% cellspacing=-1px> <!-- cell border collapsing hack-->
  48.         <tr><th>标题字段</th><th>值</th></tr>
  49.         <tr role="option" value=1> <td>测试</td> <td> <INPUT type="checkbox" name="cb" />复选框 </td> </tr>
  50.         <tr role="option" value=2> <td>测试</td> <td> <INPUT name="Age" type="number" value="1" size="6" step=1 minvalue=-9 maxvalue=100> </td> </tr>
  51.         <tr role="option" value=3> <td>测试</td>  <td>测试</td> </tr>         
  52.         <tr role="option" value=4> <td>测试</td>  <td>测试</td> </tr>
  53.         <tr role="option" value=5> <td>测试</td> <td>测试</td> </tr>
  54.         <tr role="option" value=6> <td>测试</td> <td>测试</td> </tr>         
  55.         </table>
  56.     </widget>
  57.    
  58.     <menu.context id="menuId">
  59.               <li id="i1">菜单项</li>
  60.               <li id="i2">菜单项</li>
  61.               <hr/> <!-- 分隔线 -->
  62.               <li>子菜单
  63.                  <menu>
  64.                  <li id="i5">子菜单项</li>
  65.                  <li id="i6">子菜单项</li>
  66.                  </menu>  
  67.               </li>
  68.         </menu>
  69.       
  70.     </BODY>
  71. </HTML>
  72. **/

  73. //改变选项时触发此事件
  74. wbLayout.onSelectSelectionChanged = {
  75.     report = function (ltTarget,ltEle,reason,behaviorParams) {
  76.         winform.text =  ltTarget.value ;//ltTarget.value获取被选中行的值
  77.     }
  78. }

  79. //右键菜单触发下面的函数
  80. wbLayout.onMenuItemClick = function (ltTarget,ltEle,reason,behaviorParams) {
  81.     var elOption = wbLayout.queryEle("#report tr:current");
  82.      winform.msgbox("你点击了菜单 " + ltTarget.innerText + ' \n当前选中行:' + elOption.outerHTML )
  83. }

  84. winform.show()
  85. win.loopMessage();
复制代码

评分

参与人数 1 +50 收起 理由
wznjsy + 50 很给力!

查看全部评分

43

主题

628

回帖

3765

积分

版主

积分
3765
 楼主| 发表于 2012-10-27 22:55:18 | 显示全部楼层
在HTML源码中</BODY>前面添加下面的代码
  1.      <menu.context id="menuId">
  2.            <li id="i1">菜单项</li>
  3.            <li id="i2">菜单项</li>
  4.            <hr/> <!-- 分隔线 -->
  5.            <li>子菜单
  6.               <menu>
  7.               <li id="i5">子菜单项</li>
  8.               <li id="i6">子菜单项</li>
  9.               </menu>  
  10.            </li>
  11.      </menu>
复制代码
然后修改CSS中表格样式,使用context-menu属性为表格指定右键菜单, 如下:
  1.      #report td
  2.       {
  3.         context-menu: selector(menu#menuId); /*selector函数的参数是指定右键菜单的CSS选择器*/
  4.         border:1px solid threedlightshadow;
  5.         padding:4px;
  6.       }
复制代码
最后添加下面的aardio代码以响应菜单事件:
//右键菜单触发下面的函数
wbLayout.onMenuItemClick = function (ltTarget,ltEle,reason,behaviorParams) {
   
var elOption = wbLayout.queryEle("#report tr:current");
     winform.msgbox(
"你点击了菜单 " + ltTarget.innerText + ' \n当前选中行:' + elOption.outerHTML )
}

20

主题

294

回帖

1945

积分

新手入门

积分
1945
发表于 2012-10-28 00:03:55 | 显示全部楼层
HTMLayout是好东西

52

主题

1272

回帖

7276

积分

荣誉会员

积分
7276
发表于 2012-10-28 00:47:51 | 显示全部楼层
2012-10-28 00 46 48.png

配上图片让大家看看效果,HTMLayout 确实是做界面的好东西

1

主题

5

回帖

100

积分

一级会员

积分
100
发表于 2012-10-28 08:40:31 | 显示全部楼层

5

主题

118

回帖

1483

积分

四级会员

积分
1483
发表于 2012-10-28 11:27:44 | 显示全部楼层
感谢分享 继续学习

0

主题

9

回帖

84

积分

一级会员

积分
84
发表于 2012-10-28 11:43:36 | 显示全部楼层
@@@@@@@@@@@@@@@@@@@@@@@@@

17

主题

69

回帖

1014

积分

四级会员

积分
1014
发表于 2012-10-28 12:16:34 | 显示全部楼层
谢谢分享,学习一下。

9

主题

86

回帖

630

积分

三级会员

叫我何细尔

积分
630
QQ
发表于 2012-10-28 14:39:50 | 显示全部楼层
超版图片很强大 学习一下

23

主题

381

回帖

2240

积分

五级会员

积分
2240
发表于 2012-10-28 20:29:04 | 显示全部楼层
HTMLayout 是个好东东

6

主题

30

回帖

336

积分

二级会员

积分
336
发表于 2012-10-29 19:51:39 | 显示全部楼层
学习下!

9

主题

193

回帖

1297

积分

四级会员

积分
1297
发表于 2012-10-29 21:05:47 | 显示全部楼层
这个要学学

6

主题

31

回帖

349

积分

二级会员

积分
349
发表于 2012-10-29 22:20:43 | 显示全部楼层
好好学习

0

主题

6

回帖

128

积分

一级会员

积分
128
发表于 2012-10-29 23:37:40 | 显示全部楼层
新手还没开始学习HTMLayout。。努力学习

48

主题

542

回帖

3328

积分

五级会员

积分
3328
发表于 2012-10-30 11:28:40 | 显示全部楼层
多谢分享。我来学习了

16

主题

41

回帖

527

积分

培训班

积分
527
发表于 2012-11-1 22:50:06 | 显示全部楼层
看看神马?

0

主题

5

回帖

125

积分

一级会员

积分
125
发表于 2012-11-3 06:49:05 | 显示全部楼层
学习

12

主题

651

回帖

4023

积分

荣誉会员

子非魚、安知魚之樂

积分
4023
发表于 2012-11-3 20:29:15 | 显示全部楼层

0

主题

5

回帖

61

积分

一级会员

积分
61
发表于 2012-11-6 14:09:16 | 显示全部楼层
谢谢分享了。
您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

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

GMT+8, 2024-2-24 11:05 , Processed in 0.075214 second(s), 27 queries .

Powered by Discuz! X3.5

Copyright © 2001-2023 Tencent Cloud.

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