Html 在dojo中显示数据

我有一个包含一组数据的XML文件，它必须在HTML页面的许多dojo内容窗格中的一个中表示。我试过dojox.grid.DataGrid，它可以工作；然而，由于数据网格通常用于表示表格数据，所以我不想使用数据网格

是否有其他方法以简单格式表示此数据

XML文件如下所示：

<Summary>
   <neName>abc</neName>
   <neType>pqr</neType>
   <neRelease>2.0</neRelease>
   <neAddress>10.10.82.105</neAddress>
   <supervisionState>SUPERVISED</supervisionState>
   <operationalState>ENABLED</operationalState>
   <alignmentState>ALIGNED</alignmentState>
   <criticalAlarms>0</criticalAlarms>
   <majorAlarms>0</majorAlarms>
   <minorAlarms>0</minorAlarms>
   <noOfShelves>5</noOfShelves>
</Summary>

abc
pqr
2
10.10.82.105
被监督的
启用
对齐的
0
0
0
5.

我希望这些数据可以这样表示：

<Summary>
   <neName>abc</neName>
   <neType>pqr</neType>
   <neRelease>2.0</neRelease>
   <neAddress>10.10.82.105</neAddress>
   <supervisionState>SUPERVISED</supervisionState>
   <operationalState>ENABLED</operationalState>
   <alignmentState>ALIGNED</alignmentState>
   <criticalAlarms>0</criticalAlarms>
   <majorAlarms>0</majorAlarms>
   <minorAlarms>0</minorAlarms>
   <noOfShelves>5</noOfShelves>
</Summary>

---

根据您希望数据的外观，我选择HTML元素的基本

css

样式，而不是任何小部件

但是你可以用

检查：

---

根据您希望数据的外观，我选择HTML元素的基本

css

样式，而不是任何小部件

但是你可以用

检查：

---

如果您感到兴奋，可以制作一种通用的XML数据小部件。这是我很久以前的一个例子

dojo.declare("foo.XmlDisplay", dijit._Widget, {

    postCreate: function()
    {
        this.inherited(arguments);
        dojo.xhrGet({
            url: this.href,
            handleAs: "xml",
            load: dojo.hitch(this, "setData")
        });

    },

    setData: function(data)
    {
        // All items with a xmldisp-tag attribute should get data
        dojo.query("*[data-xmldisp-tag]", this.containerNode).forEach(
            function(item) {
                var tag   = dojo.attr(item, "data-xmldisp-tag");
                var value = data.getElementsByTagName(tag);
                if(value.length == 1) item.innerHTML = value[0].textContent;
                else console.warn("No data in xml for",tag);
            }
        );
    }
});

然后，您可以在HTML中这样使用它（即，小部件不关心您如何显示数据，它只使用给定的标记名从服务器查找XML中的数据）：

NE名称-
NE型-
警报-
小调-

下面是一个经过修改的JSFIDLE，您可以尝试：

---

不确定这是否适合您的任务，但因为我有非常相似的代码，所以我想我会与您分享。

如果您感到兴奋，可以制作一种通用的XML数据小部件。这是我很久以前的一个例子

dojo.declare("foo.XmlDisplay", dijit._Widget, {

    postCreate: function()
    {
        this.inherited(arguments);
        dojo.xhrGet({
            url: this.href,
            handleAs: "xml",
            load: dojo.hitch(this, "setData")
        });

    },

    setData: function(data)
    {
        // All items with a xmldisp-tag attribute should get data
        dojo.query("*[data-xmldisp-tag]", this.containerNode).forEach(
            function(item) {
                var tag   = dojo.attr(item, "data-xmldisp-tag");
                var value = data.getElementsByTagName(tag);
                if(value.length == 1) item.innerHTML = value[0].textContent;
                else console.warn("No data in xml for",tag);
            }
        );
    }
});

然后，您可以在HTML中这样使用它（即，小部件不关心您如何显示数据，它只使用给定的标记名从服务器查找XML中的数据）：

NE名称-
NE型-
警报-
小调-

下面是一个经过修改的JSFIDLE，您可以尝试：

不确定这是否适合您的任务，但由于我有非常相似的代码，我想我会与大家分享