0

1 セットのデータを含む XML ファイルがあり、これを HTML ページの多くの Dojo コンテンツ ペインの 1 つに表示する必要があります。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>

このデータを次のように表現したい：

ここに画像の説明を入力

4

2 に答える 2

2

データをどのように見せたいかということから、cssウィジェットではなく、HTML 要素の基本的なスタイル設定を行います。

ただし、dgridは使用できますが、

小切手：

https://github.com/SitePen/dgrid/

http://www.sitepen.com/blog/category/dgrid/

于 2012-06-04T08:42:50.067 に答える
1

気が狂ったように感じる場合は、一種の一般的な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内のデータを検索します）。

<div data-dojo-type="foo.XmlDisplay" href="/MyXmlStuff?id=42">
    <dl>
        <dt>NE name</dt><dd data-xmldisp-tag="nename">-</dd>
        <dt>NE type</dt><dd data-xmldisp-tag="netype">-</dd>
    </dl>
    <dl>
        <dt>Alarms</dt><dd data-xmldisp-tag="majoralarms">-</dd>
        <dt>Minor</dt><dd data-xmldisp-tag="minoralarms">-</dd>
    </dl>
</div>

これがあなたが試すことができる修正されたjsfiddleです：http：//fiddle.jshell.net/K4UnJ/3/

これがあなたのタスクに完全に適合するかどうかはわかりませんが、私は非常によく似たコードを持っていたので、共有したいと思いました。

于 2012-06-04T10:58:08.370 に答える