用XML对层级数据和HTML表格排序

最近，一位IT同事询问我如何使用JavaScript的方式来创建一个具备排序能力的文件夹/文件的层级浏览视图。他希望这个视图看上去和以下的样式相似： 

项目1

项目２

项目３

文件夹1

　　项目1

　　项目２

项目４

文件夹２

项目１

项目２

项目５

… 

使用xml数据绑定的表格 

我建议的方法是使用绑定到xml的嵌套表格，这种解决方案很简单，我可以使用DOM方法来安排涉及到的xml，而表格将反映这些改变。（注意：这种解决方案是设计用于Internet Explorer 5.0及以上版本的，IE具有与表格的数据绑定功能，而其它的浏览器没有同样的功能。）在此处可使用样本对浏览器进行检测。 

如果您以前曾在IE中使用过xml数据绑定表格，您一定知道xml的格式的重要性，在根元素下的每一个子节点都代表了表格中的一行，嵌套表格可以绑定到行节点内的嵌套节点等等。列表A包含了这种绑定的一个梗概示例。 

列表A

<xml id="xmlMain">

<root>

    <row>

        <item1/>

        <item2/>

        <row>

            <item1/>

            <item2/>

        </row>

    </row>

</root>

</xml> 

<table dataSrc="#xmlMain">

<tbody>

<tr>

    <td><span dataFld="item1"></span></td>

</tr>

<tr>

    <td>

        <table dataSrc="#xmlMain" dataFld="row">

        <tbody>

        <tr>

            <td><span dataFld="item2"></span></td>

        </tr>

        </tbody>

        </table>

    </td>

</tr>

</tbody>

</table> 

在xml数据岛xmlMain中，行是由位于第一层级中的行节点表示的，单独的字段是由项目节点表示的，在表格HTML中，您可以通过指定TABLE元素的dataSrc属性来创建一个绑定，该数值使用磅的符号（#）和xml数据岛的标识符属性来表示。行的数量反映在xml文件行节点的数量上，数据项目绑定在表格节点的行节点上，这意味着，如果一个TR在父节点包含了绑定到字段的元素，那么该行将成为在xml文件中该层级绑定到重复节点的数量。 

在这个例子中，第一行只显示了一次，因为在xml中根元素下只有一个行节点，然而，另一个TR元素是专门指定到表格的，该行包含了一个嵌套的表格，该表格中的行将绑定到xml中的嵌套行节点，这个表格和父表格唯一的区别在于TABLE定义中dataFld属性的不同。