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

编程 · 发表于 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" ，显示为列表框（没有下拉按钮，直接显示列表）

<select size=N>…</select> , N是大于1的数，指定显示行数，显示1行时为下拉列表，显示多行列表框
<select type=“select”>…</select> 注意这里即使size=1也会显示为select，而不是下拉框（select-dropdown）
<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示例：

import win.ui;
/*DSG{{*/
var winform = ..win.form( bottom=399;parent=...;right=599;text="HTMLayout 列表框" )
winform.add( )
/*}}*/
import web.layout;
var wbLayout = web.layout(winform)
wbLayout.html = /**
<HTML>
<HEAD>
<STYLE>
body { font:10pt verdana; }
#report
{
width:*;
height:*;
}
#report th
{
background-color: threedhighlight threedhighlight threedlightshadow threedlightshadow;
border:1px solid threedlightshadow;
padding:4px;
}
#report td
{
context-menu: selector(menu#menuId); /*selector函数的参数是指定右键菜单的CSS选择器*/
border:1px solid threedlightshadow;
padding:4px;
}
#report tr:nth-child(even) /* every even row */
{
background-color: mintcream;
}
#report tr:current td /* current row */
{
background-color: highlight;
color: highlighttext;
}
</STYLE>
</HEAD>
<BODY>
<widget type="select" id="report" >
<table border=1 width=100%% cellspacing=-1px>
<tr><th>标题字段</th><th>值</th></tr>
<tr role="option" value=1> <td>测试</td> <td> <INPUT type="checkbox" name="cb" />复选框 </td> </tr>
<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>
<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>
<menu.context id="menuId">
<li id="i1">菜单项</li>
<li id="i2">菜单项</li>
<hr/>
<li>子菜单
<menu>
<li id="i5">子菜单项</li>
<li id="i6">子菜单项</li>
</menu>
</li>
</menu>
</BODY>
</HTML>
**/
//改变选项时触发此事件
wbLayout.onSelectSelectionChanged = {
report = function (ltTarget,ltEle,reason,behaviorParams) {
winform.text = ltTarget.value ;//ltTarget.value获取被选中行的值
}
}
//右键菜单触发下面的函数
wbLayout.onMenuItemClick = function (ltTarget,ltEle,reason,behaviorParams) {
var elOption = wbLayout.queryEle("#report tr:current");
winform.msgbox("你点击了菜单 " + ltTarget.innerText + ' \n当前选中行:' + elOption.outerHTML )
}
winform.show();
win.loopMessage();

复制代码

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

在HTML源码中</BODY>前面添加下面的代码

<menu.context id="menuId">
<li id="i1">菜单项</li>
<li id="i2">菜单项</li>
<hr/>
<li>子菜单
<menu>
<li id="i5">子菜单项</li>
<li id="i6">子菜单项</li>
</menu>
</li>
</menu>

复制代码

然后修改CSS中表格样式，使用context-menu属性为表格指定右键菜单, 如下：

#report td
{
context-menu: selector(menu#menuId); /*selector函数的参数是指定右键菜单的CSS选择器*/
border:1px solid threedlightshadow;
padding:4px;
}

复制代码

最后添加下面的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是好东西

qqmmcc · 发表于 2012-10-28 00:47:51

配上图片让大家看看效果，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

超版图片很强大

学习一下

51ak · 发表于 2012-10-28 20:29:04

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。。努力学习

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

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

谢谢分享了。

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

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

评分