虛表庫經過我本人（光慶）的不斷升級，已經成為了一個非常好用的庫，特別是對于aardio來說，沒有典型的表格組件，我這個虛表就顯得比較有用了。

上一個版本的虛表，只支持文字處理，不支持圖片，整體效果偏素凈。

這個版本，進行了全面升級，內核做了全面修改，著重加強了對圖片的支持、文字圖片混合排版。

這個版本，效果偏靚麗。

庫文件下載安裝:

http://chengxu.online → 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();

總結

以上是生活随笔為你收集整理的aardio - 虚表库全新升级，支持图片系列专题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。