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。有一个名为Data Mapping的部分解释了如何映射XML文件。

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

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

因为我猜这是你要在一行中显示的文件属性。另外，请确保colModel name映射到您的节点名称。我仍然不知道你是否可以映射节点属性，但假设你这样做：

    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开始。

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

1 个答案: