Kendo UI Grid和组成专栏

onon 发布于 2019-03-09 xml 最后更新 2019-03-09 14:33 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" }
}
我如何呈现'标签'列? 任何帮助将不胜感激!
已邀请:

ieos

赞同来自:

非常感谢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
}
它很棒!!! 我希望这有助于其他朋友。 如果您认为更好或更容易解决方案,欢迎您;-))

dipsam

赞同来自:

您可以通过以下两种方式之一完成此操作: 1)提供“行模板”,在此处演示: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