0

Kendo UI グリッドを xml が入力されたデータソースにバインドします。

わたしにはできる。

ここで、ネストされたノードのカンマ区切りの「n」個の複数の値を使用して、各行のセルを生成したいと考えています。

xml ファイルの例:

<product id="1">
 Microsoft Office
 <tags><tag>microsoft</tag></tags>
 </product>
<product id="1">
 Ububtu Linux
 <tags><tag>Canonical</tag><tag>OS</tag><tag>Open Source</tag></tags>
 </product>
 <product id="1">
  Windows 8
  <tags><tag>microsoft</tag><tag>OS</tag></tags>
 </product>
 </product>

私が望む結果：

ID     Product              Tags

1      Microsoft Office     microsoft
2      Ubuntu Linux         canonical, OS, Open Source
3      Windows 8            microsoft, OS

最初の 2 列については問題ありません。

  $("#grid").kendoGrid({
        dataSource: {
            type: "xml",
            transport: {
                read: { url: 'some_remote_xml',
                    dataType: "xml"
                }
            },
            schema: {
                type: "xml",
                model: {
                    fields: {
                        id: { field: 'product/@id', type: "number" },
                        Product: { field: 'product/text()', type: "string" } 

                    }

「タグ」列をレンダリングするにはどうすればよいですか??

どんな助けでも感謝します!!

4

2 に答える 2

0

これは、次の 2 つの方法のいずれかで実行できます。

1) ここに示されている「行テンプレート」を提供します: http ://demos.kendoui.c​​om/web/grid/rowtemplate.html

または

template2)グリッドの列設定にカスタムを使用できます。

カスタム テンプレートの場合、グリッドに必要なすべての列を一覧template表示し、カスタム情報を表示する列の設定を指定する必要があります。

これを行う最も簡単な方法templateは、現在のデータ行をパラメーターとして受け取る関数に を設定することです。次に.join、 a でタグを付けて、,それを返すことができます。


$("#grid").kendoGrid({
  dataSource: {
    // ... your data source here
  },

  columns: [
    {field: "id", title: "Product ID"},
    {field: "product", title: "Product Name"},
    {
      title: "Tags",
      template: function(dataRow){
        return dataRow.tags.join(", ");
      }
  ]
});

KendoUI のテンプレート エンジンを使用してこれを行うためのより良い方法がある可能性がありますが、これにより、少なくともカンマで区切られたアイテムのリストが表示されます。

ここで列テンプレートについて読むことができます: http ://docs.kendoui.c​​om/api/web/grid#configuration-columns.template

于 2013-04-11T16:32:05.303 に答える
0

Derik と OnaBai に感謝します。

解決策が剣道テンプレートのようなものから渡されることは知っていますが、そのような解決策を実装するのは困難でした。

私のアプリケーションの実際のコードは非常に複雑です。

上記の例では、wi は「タグ」ノードだけでなく、属性なども管理します。

何かのようなもの：

  <tags>
   <tag id="1">First tag</tag>
   <tag id="2">Second tag</tag>
   ...
  </tags>

スキーマ部分のこのフラグメントが製品 ID (製品の xml id 属性) を返す場合:

id: { field: 'product/@id', type: "number" }

...そして、これは製品テキスト（xmlテキストノード）を返します：

Product: { field: 'product/text()', type: "string" }

返された 1 つまたは複数のタグをテンプレートで管理するにはどうすればよいですか??

Tags: { field: 'product/tags' }

「タグ」子ノードの配列を管理するテンプレートを実装する必要があります。

Ok。

私はこの解決策を見つけました：

列のテンプレート定義:

 //pass the 'Tags' array to a javascript function
 template: '#= myfunction(Tags) #'

...そしてグローバルJavaScript関数：

function myfunction(e) {
var result = '';

//iteration on the 'tags' array
for (var i = 0; i < e.length ; i++) {
    result += '<a href="' + e[i]["@id"] + '">' + e[i]["#text"] + '</a>';

}
return result;  // now in the tags column of the grid we have the 'tags/tag' xml section   of each product, rendered as html anchor

}

それはうまくいきます!!!

これが他の友達に役立つことを願っています。

より良い解決策やより簡単な解決策を考えているなら、大歓迎です ;-))

于 2013-04-16T11:08:04.520 に答える