aardio-HTMLayout-批量充填数据到table

三个问题，一个是behavior的库要引用，一个是css设置，还有是代码的执行顺序。
一定要先加入DOM再修改属性。这点好像跟js不一样啊。
可以参考 http://www.aardiofans.com/page/3/

源代码：

import win.ui;
/*DSG{{*/
var winform = ..win.form( right=599;bottom=399;text="HTMLayout示例")
winform.add(  )
/*}}*/

import web.layout; 
import web.layout.behavior.grid;
import web.layout.behavior.shellIcon;

var wbLayout = web.layout( winform ) 

import console;

wbLayout.html = /**

<div id="itemList">
        <table>
                <tr class="header">
                        <th>序号</th>
                        <th>图标</th>
                        <th>名称</th>
                        <th>大小</th>
                </tr>
        </table>
</div>
<textarea id="val"></textarea>

**/

wbLayout.css = /**

#itemList
{
        style-set: "item-list";
}
@set item-list
{
        :root
        {
                width:*;
                height: *;
                min-height:100px;
                padding:2px;
        }
        :root table
        {
                behavior:grid column-resizer;
                overflow:auto;
                width:*; height:*; 
                border-collapse:collapse;
                flow: table-fixed;
                assigned!:self.fixedrows=1;
        }

        :root table tr 
        {
                height: 1.8em;
        }

        :root table td 
        {
                white-space:nowrap;
                border-bottom:1px solid silver;
        }

        :root table th
        { 
                height: 1.6em;
                font-weight: bold;
                text-align: left;
        }
        :root table th:hover 
        { 
                border-bottom-color: orange;
        }

        :root table tr:current
        {
                background-color: blue;
                color: white;
        }
}

img.shell-icon 
{
        width:20px;
    height:20px;
    behavior: shell-icon;
    vertical-align:middle;
}

textarea#val
{
        width: *;
        height:200px;
}

**/

// 示例数据，将填充html中的table
data = {
    ["1"] = { SIZE="651";TYPE="doc";NAME="改造方案（精简版）.doc";
    UPDATED_BY="超猪";PATH="D:\dev\aau\HTMLayout";
    UPDATED="02/01/13 17:11:27";CREATED_BY="超猪";CREATED="03/18/13 10:30:01";
    VERSION="0.1";ROWID=1 }
    ["2"] = { SIZE="15.66";TYPE="rar";NAME="修订表.rar";
    UPDATED_BY="超猪";PATH="D:\dev\aau\HTMLayout";UPDATED="01/07/13 17:03:15";
    CREATED_BY="超猪";CREATED="03/18/13 13:20:57";VERSION="0.1";ROWID=2 }
    ["3"] = { SIZE="13";TYPE="ppt";NAME="清单v2-20130105.ppt";
    UPDATED_BY="超猪";PATH="D:\dev\aau\HTMLayout";UPDATED="02/04/13 15:37:59";
    CREATED_BY="超猪";CREATED="03/18/13 13:20:57";VERSION="0.1";ROWID=3 }
}

var list = wbLayout.$1("#itemList table");

// 开始填充
for(k,v in data){
        tr = wbLayout.createEle("tr");
        list.append(tr);
        tr.name = "data";

        var coldata = {
                { innerText = tostring(v.ROWID) };
                { innerHTML = "<img class='shell-icon' filename='."+v.TYPE+"' />" };
                { innerText = v.NAME };
                { innerText = v.SIZE };
        };
        
        for(i, j in coldata){
                var td = wbLayout.createEle("td");
                tr.append(td);
                for(attrName, attrValue in j) { 
                        td[attrName]=attrValue; 
                        //td.innerHTML = "<div>Hello</div>"
                }
        
        }
        

                                        
}

// 显示table的html，可发现图标这栏没填充上
wbLayout.$1("textarea#val").value = wbLayout.$1("#itemList").outerHTML


winform.show() 
win.loopMessage();

原文链接：https://bbs.aardio.com/forum.php?mod=viewthread&tid=10265&extra=page%3D7