aardio

虚表库经过我本人（光庆）的不断升级，已经成为了一个非常好用的库，特别是对于aardio来说，没有典型的表格组件，我这个虚表就显得比较有用了。

上一个版本的虚表，只支持文字处理，不支持图片，整体效果偏素净。

这个版本，进行了全面升级，内核做了全面修改，着重加强了对图片的支持、文字图片混合排版。

这个版本，效果偏靓丽。

库文件下载安装:

→ aardio资源下载 → vlistEx.rar

解压缩后目录放到 /lib/godking/ 目录即可。

注意：需将老版本 /lib/godking/vlistEx.aardio 删除

先看效果：

 动态效果：

 图片调用格式：

<img name="pic1",w=30,h=20,scale=true,full=false>

关键词解释：

<img name="">：嵌入图片标识，分为两部分：以 "<img name=" 开头，以 ">" 结尾，中间为图片参数。

name：图片名称，使用 addImg(name,data) 添加的图片name。

w：图片宽度。大于1为像素值，0到1为比例值，按照单元格有效区域宽高计算，1为100%

h：图片高度。大于1为像素值，0到1为比例值，按照单元格有效区域宽高计算，1为100%

scale：是否按比例进行缩放。如果为 ture 则在w和h范围内，按比例缩放到合适大小。如果为 false 则在w和h范围内拉伸填满。

full：是否填满单元格。如果为 true，则忽略w、h设置，并自动根据单元格宽度、高度、scale设置进行绘制。full时，图片不占用单元格内容宽度。放置于单元格内容的开始（最先绘制），可以当做单元格背景。放置于单元格内容末尾（最后绘制），可以当做单元格前景。

使用文档：

1、使用图片前，先添加图片：

使用图片前，需要先添加指定名称的图片，引用时只需要提供图片名称即可。

图片添加时，可指定图片大小、是否覆盖等设置。

添加方法如下：

// 1、从文件添加一个名称为 “name1” 的图片：
mainForm.listview.addImg( "name1", "~\doc.png", false, 20, 20 );// 2、从内存数据添加一个名称为 “name2” 的图片：
var buffer = ..string.load("/res/doc.png");
mainForm.listview.addImg( "name2", buffer );

2、将图片嵌入单元格内容或表头内容：

只需按图片调用格式，将文本和图片任意混合排版即可，支持单元格内容和表头内容。 

var cellText = "文本<img name='name1',w=20,h=20,scale=true>图片<img name='name2',w=20,h=20,scale=true>混合排版"

效果如下：

其中图片宽度和高度，可以用0-1之间的数值，代表单元格有效（不包含padding）宽度、高度的比例值，如：

var cellText = "<img name='pro',w=0.3,h=20> 60%"

效果如下：

有了图片，就可以将单元格模拟为按钮、进度条等各种非常漂亮的组件了。

3、将图片作为单元格背景或前景：

作为背景图： 

var cellText = "<img name='bk',full=true>我有背景图";

 将图片放到单元格文本的开头位置，并设置 full=true 就作为单元格的背景图了。

背景图不需要设置w和h，需要的话设置一下 scale 即可。

效果：

 作为前景图：

var cellText = "<img name='bk',full=true>我有背景图和前景图<img name='fk',full=true>";

 将图片放到单元格文本末尾位置，并设置 full=true 就作为单元格的前景图了。

设置方法跟背景图一致。

效果如下，第一张为按比例缩放的心形png透明图，第二张为拉伸的左右渐变的透明图，第三张为拉伸的心形：

 4、将图片作为表头排序图标：

表头排序图标，总是放在表头内容后面。设置方法如下：

mainForm.listview.setSortMark(" <img name='asc',w=10,h=20>" /*升序符号*/,
" <img name='desc',w=10,h=20>" /*降序符号*/,
" <img name='normal',w=10,h=20>" /*默认符号*/)

 效果如下：

5、将图片作为 checkBox 图标：

可以通过设置 checkBox.checkedImg 和 checkBox.unCheckedImg 属性为对应的图片名称，来设置选中和非选中状态下的图片：

mainForm.listview.checkBox.checkedImg = "checked";
mainForm.listview.checkBox.unCheckedImg = "unchecked";

效果如下：

6、将图片作为树形节点图片：

通过设置 tree.nodeImg 属性，为树形节点设置图片。不设置图片时，默认在节点周围画方框。

mainForm.listview.tree.nodeImg = "icon"

效果如下： 

一个比较完整的图片系列调用代码：

import win.ui;
import godking.vlistEx;
/*DSG{{*/
mainForm = win.form(text="vlistEx - table adapter";right=759;bottom=449)
mainForm.add(
listview={cls="vlistEx";left=10;top=10;right=749;bottom=440;acceptfiles=1;aw=1;db=1;dl=1;dr=1;dt=1;hscroll=1;vscroll=1;z=1}
)
/*}}*/mainForm.listview.addImg("icon","E:\图片素材\png\png32_96个蛮实用的png格式图标\Credit card.png")
mainForm.listview.addImg("alert","E:\图片素材\png\png32_常用图标\alert.png")
mainForm.listview.addImg("on","C:\Users\Administrator\Desktop\on.png")
mainForm.listview.addImg("off","C:\Users\Administrator\Desktop\off.png")
mainForm.listview.addImg("pro","C:\Users\Administrator\Desktop\pro.png",,50,20)
mainForm.listview.addImg("bk","E:\图片素材\png\png_花边纸底纹\花边\frame3_bc_happytime.png",,50,20)mainForm.listview.addImg("1","E:\图片素材\png\png32_96个蛮实用的png格式图标\copy doc.png")
mainForm.listview.addImg("2","E:\图片素材\png\png32_96个蛮实用的png格式图标\Picture Cast.png")
mainForm.listview.addImg("3","E:\图片素材\png\png32_96个蛮实用的png格式图标\splash green.png")
mainForm.listview.addImg("4","E:\图片素材\png\png32_96个蛮实用的png格式图标\window.png")
mainForm.listview.addImg("5","E:\图片素材\png\png32_96个蛮实用的png格式图标\unread mail.png")mainForm.listview.headerAlign = 1 
mainForm.listview.checkBox.show = true
mainForm.listview.headerBkcolor = 0xDDEEFF;
var t = {}
var tree = 0;
for(i=1;10000;1){..table.push(t,{"[@rowindex]","文本<img name='alert',w=20,h=20,scale=true>图片<img name='icon',w=20,h=20,scale=true>混合排版","<img name='pro',w="+i/100*0.6+",h=20,scale=0> "++i++"%","<img name='off',w=50,h=20,scale=1>","<img name='bk',full=true>我有背景图","[@treeLevel]" =tree; })//使用行索引标识符if tree ==0 tree=math.random(0,1);elseif tree==5  tree=math.random(4,5);else  tree=math.random(tree-1,tree+1);
}
mainForm.listview.setTable(t)
mainForm.listview.tree.show = 1
mainForm.listview.tree.nodeSize=16
mainForm.listview.tree.nodeImg = "3"
mainForm.listview.refreshTree();
mainForm.listview.setColumns({"<img name='1',w=20,h=20,scale=1> 编号","<img name='2',w=20,h=20,scale=1> 文本 + 图片","<img name='3',w=20,h=20,scale=1> 模拟进度","<img name='4',w=20,h=20,scale=1> 开关","<img name='5',w=20,h=20,scale=1> 背景图"},{180,180,100,70,130},{0,0,0,1,1})
mainForm.show();
mainForm.listview.onClick = function(row/*行*/,col/*列*/){/*鼠标左键点击项目事件*/if col==4{if mainForm.listview.getCellImg(row,col)=='on' mainForm.listview.setCellImg(row,col,'off');else  mainForm.listview.setCellImg(row,col,'on');}
}
win.loopMessage();