搜索
aardio官方社区 门户 查看主题

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

发布者: 编程 | 发布时间: 2012-10-27 22:54| 查看数: 28008| 评论数: 160|帖子模式

在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 很给力!

查看全部评分

最新评论

编程 发表于 2012-10-27 22:55:18

在HTML源码中前面添加下面的代码[code]
  • 在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 )
    }

  • ljtnine 发表于 2012-10-28 00:03:55

    HTMLayout是好东西

    HTMLayout是好东西
    qqmmcc 发表于 2012-10-28 00:47:51

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

    2012-10-28 00 46 48.png

    配上图片让大家看看效果,HTMLayout 确实是做界面的好东西
    wls 发表于 2012-10-28 08:40:31

    fyy 发表于 2012-10-28 11:27:44

    感谢分享 继续学习

    感谢分享 继续学习
    fdk3r6b 发表于 2012-10-28 11:43:36

    @@@@@@@@@@@@@@@@@@@@@@@@@

    @@@@@@@@@@@@@@@@@@@@@@@@@
    xwlzx 发表于 2012-10-28 12:16:34

    谢谢分享,学习一下。

    谢谢分享,学习一下。
    满月星光 发表于 2012-10-28 14:39:50

    超版图片很强大{:3_41:} 学习一下

    超版图片很强大 学习一下
    51ak 发表于 2012-10-28 20:29:04

    HTMLayout 是个好东东

    HTMLayout 是个好东东
    weell 发表于 2012-10-29 19:51:39

    学习下!

    学习下!
    coder 发表于 2012-10-29 21:05:47

    这个要学学

    这个要学学
    ying8jing 发表于 2012-10-29 22:20:43

    好好学习

    好好学习
    cfc77 发表于 2012-10-29 23:37:40

    新手还没开始学习HTMLayout。。努力学习

    新手还没开始学习HTMLayout。。努力学习
    jyb21 发表于 2012-10-30 11:28:40

    多谢分享。我来学习了

    多谢分享。我来学习了
    多多洛 发表于 2012-11-1 22:50:06

    看看神马?

    看看神马?
    hong638 发表于 2012-11-3 06:49:05

    学习

    学习
    xauto 发表于 2012-11-3 20:29:15

    {:victory:}

    lokiey 发表于 2012-11-6 14:09:16

    谢谢分享了。

    谢谢分享了。

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

    GMT+8, 2017-11-23 20:57 , Processed in 0.140625 second(s), 22 queries , WinCache On.

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

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