如何从xml文件创建动态html表格

Question

我有一个需求来创建一个类似于下面的xml文件中的动态表格，我可以使用xpath或类似的内容在其中显示filesystem内容，具有适当的变量分页，过滤，排序和选择特定的行。

<?xml-stylesheet type="text/xsl" href="csmclientiir.xsl"?> 
<csmclient product="abc" date="4/26/11 2:05 PM"> 
<system> 
    <osname>Linux 
    </osname> 
    <hostname>AbhishekNix 
    </hostname> 
    <release>2.6.18-128.el5 
    </release> 
    <filesystem> 
     <file mount='/home/hp1' home='(innfs2:/vol/home/shome/home/hp1)' total='1717567488' free='644306780' used='1073260708' percentage='62' /> 
     <file mount='/home/par21' home='(innfs2:/vol/home/shome/home/par21)' total='1717567488' free='644306780' used='1073260708' percentage='62' /> 
     <file mount='/home/h231' home='(innfs2:/vol/home/shome/home/h231)' total='1717567488' free='644306780' used='1073260708' percentage='62' /> 
     <file mount='/home/avallin1' home='(innfs2:/vol/home/shome/home/avallin1)' total='1717567488' free='644306780' used='1073260708' percentage='62' /> 
     <file mount='/home/park' home='(innfs2:/vol/home/shome/home/park)' total='1717567488' free='644306780' used='1073260708' percentage='62' /> 
     <file mount='/home/sp1' home='(innfs2:/vol/home/shome/home/sp1)' total='1717567488' free='644306780' used='1073260708' percentage='62' /> 
     <file mount='/home/ganga1' home='(innfs2:/vol/home/shome/home/ganga1)' total='1717567488' free='644306780' used='1073260708' percentage='62' /> 
     <file mount='/home/nbp1' home='(innfs2:/vol/home/shome/home/nbp1)' total='1717567488' free='644306780' used='1073260708' percentage='62' /> 
    </filesystem> 
</system> 
<product> 
    <showtime>Tue Apr 26 14:05:23 2011 
    </showtime> 
</product> 
</csmclient> 

编辑

这是我使用jqGrid

jQuery("#listTable").jqGrid({ 
    url: cpath, 
    datatype: "xml", 
    colNames:["Total Space","Free Space","Used Space", "Used Percentage"], 
    colModel:[ {name:"Total Space",index:"Total Space", width:90, xmlmap:"system>filesystem>file>@total"}, 
       {name:"Free Space",index:"Free Space", width:120, xmlmap:"system>filesystem>file>@free"}, 
       {name:"Used Space",index:"Used Space", width:180,xmlmap:"system>filesystem>file>@used"}, 
       {name:"Used Percentage",index:"Used Percentage", width:100, align:"right",xmlmap:"system>filesystem>file>@percentage", sorttype:"float"} 
      ], 
    height:250, 
    pager: '#pager', 
    rowNum:10, 
    rowList:[10,20,30], 
    viewrecords: true, 
    gridview: true, 
    loadonce: true, 
    xmlReader: { 
     root : "csmclient", 
     row: "system>filesystem", 
     repeatitems: false, 
     id: "ASIN" 
     }, 
    caption: "Disk Usage" 
    }); 

那只能说明没有任何数据的标题

注意使用：我的XML文件结构是固定的

Answer 1

最近我使用jqGrid作为项目，但我使用JSON而不是XML作为数据。 但是这个插件也接受XML类型的数据。它非常具有动态性，并具有您想要的所有功能。您可能需要检查demo here。有一个名为数据映射的部分介绍了如何映射XML文件。

评论的编辑
我会这样更改代码：

xmlReader: { 
    root : "filesystem", 
    row: "file", 
    repeatitems: false, 
} 

因为我想这是对文件属性要在一个单行显示。还要确保colModelname映射到您的节点的名称。我还是不知道你是否能映射节点属性，但假设你做的事：

colModel:[ {name:"total",index:"total", width:90}, 
      {name:"free",index:"free", width:120}, 
      {name:"used",index:"used"}, 
      {name:"percentage",index:"percentage", width:100, sorttype:"float"} 
     ] 

这wiki也是它可以帮助你开始与jqGrid的有用。