建立可用性更强的ListView控件

将HTML元素捆绑到XML数据岛的功能展现了为最终用户提供信息的可能性。其中最好的一点就是元素<TABLE>可以作为一个模板在基于一行的基础上得到多行。同样的，嵌套的<TABLE>能够与XML层中的嵌套节点捆绑在一起。这样与其他边界元素联合就为通过快速编码解决方案打开了大门。

通过以下的XML代码，就可以建立一个ListView控件来为用户提供一个有伴随图片的选择列表：

<root>
    <product>
        <product_id>001</product_id>
        <product_name>Widget1</product_name>
        <price>.99</price>
        <product_img>images/widget1.gif</product_img>
    </product>
    <product>
        <product_id>002</product_id>
        <product_name>Widget2</product_name>
        <price>.99</price>
        <product_img>images/widget2.gif</product_img>
    </product>
    <product>
        <product_id>003</product_id>
        <product_name>Widget3</product_name>
        <price>.99</price>
        <product_img>images/widget3.gif</product_img>
    </product>
</root>

首先，通过以上代码段，我们在HTML页上设置一个XML数据岛。这是通过用XML元素标识填充XML来完成的。然后我们在开放的<XML>标识中加入ID和NAME属性以便引用。例如下面例子：

<XML ID="xmlProducts" NAME="xmlProducts">
. . .
</XML>

然后为TABLE建立HTML部分代码：

<DIV style="width:250px;height:300px;overflow:auto;border:2px menu solid;">
<TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0" DATASRC="#xmlProducts"
 ID="tblProducts" NAME="tblProducts">
    <TR>
        <TD><IMG DATAFLD="product_img" BORDER="0"></TD>
        <TD><SPAN DATAFLD="product_name"></TD>
        <TD><SPAN DATAFLD="price"></TD>
    </TR>
</TABLE>
</DIV>

在<TABLE>元素中的DATASRC属性将XML 数据岛中的行约定为<TABLE>元素内容。包含有DATAFLD属性的单独元素是与当前行中的相应的字段捆绑在一起。请注意在DATASRC的名字前要有一个“#”号。

“product_img”字段被定为<IMG>标识中的SRC属性。这就为每行的单个产品提供了对应的图像。“product_name”字段被定为<SPAN>标识中innerText的内容。在<TABLE>周围的<DIV>元素仅仅意味着包含<TABLE>元素。