Kendo UI Grid和組合列

我將Kendo UI網格綁定到使用xml填充的數據源。Kendo UI Grid和組合列

它適用於我。

現在我想用'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" } 

        }

我怎樣才能使「標籤'列？

任何幫助將不勝感激！

1）提供了一個「行模板」，這是在這裏證明：

來源

2013-04-11 treep

您可以通過以下兩種方式之一進行http://demos.kendoui.com/web/grid/rowtemplate.html

或者

2）您可以使用自定義template用於網格中的列設置。

對於自定義模板，您需要在網格中列出所需的所有列，然後爲應顯示自定義信息的列提供template設置。

最簡單的方法是將template設置爲一個函數，該函數接收當前數據行作爲參數。然後你可以.join標籤與,並返回。


$("#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.com/api/web/grid#configuration-columns.template

來源

2013-04-11 16:32:05

它也可以使用'schema.parse'來解決與合併'Tags'的內容創建_virtual_列。 – OnaBai 2013-04-11 20:06:00

很想看到作爲答案張貼的示例:) – 2013-04-12 11:52:25

你在挑戰我嗎？ :-)是因爲它不可能或完整性問題？ – OnaBai 2013-04-12 12:19:31

非常感謝Derik和OnaBai。

我知道該解決方案可以通過類型的劍道模板...但困難是實現這樣的解決方案。

我的應用程序的真實代碼有很多複雜性。

在上面的例子中，wi不僅會管理'tag'節點，還會管理屬性等....

喜歡的東西：

<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" }

如何在模板中管理一個或多個返回的標記？

Tags: { field: 'product/tags' }

我必須實現一個管理'tag'子節點數組的模板。

好的。

我發現這個解決方案：

模板定義爲列：

//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 

}

它的偉大工程！！

我希望這可以幫助其他朋友。

如果你想更好或者你mutch更容易的解決方案歡迎;-)）

來源

2013-04-16 11:08:04 treep

Kendo UI Grid和組合列

回答

相關問題