动态绑定XML数据到剑道ui菜单

我正在尝试使用XML数据动态创建一个剑道菜单。我正在从menu_data.xml读取数据。如何将xml文件中的数据格式化为垂直菜单。这是我下面的代码:

xml-menu.html

<!doctype html>
<html>
<head>
<title></title>
<link href="http://cdn.kendostatic.com/2011.2.804/styles/kendo.common.min.css"
rel="stylesheet"/>
    <link href="http://cdn.kendostatic.com/2011.2.804/styles/kendo.kendo.min.css" rel="stylesheet"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
    <script src="http://cdn.kendostatic.com/2011.2.804/js/kendo.all.min.js"></script>
</head>
<body>
  <div id="menu"></div>
    <script type="text/javascript">
      $(document).ready(function() {
        $("#menu").kendoMenu({
          dataSource:  new kendo.data.DataSource({
            transport: {
             //specify the XML file to read. The same as read: { url: "menu_data.xml" }
               read: "menu_data.xml"
            },
            schema: {
             // specify the the schema is XML
               type: "xml",
             // the XML element which represents a single data record
               data: "/vehicles/vehicle",
             // define the model - the object which will represent a single data record
               model: {
               // configure the fields of the object
                  fields: {
               // the "car" field is mapped to the text of the "car" XML element
                  Name: "car/text()",
               // the "name" field is mapped to the text of the "name" XML element
                  Title: "name/text()",
               // the "color" field is mapped to the text of the "color" XML element
                  Color: "color/text()",
               // the "Price" field is mapped to the text of the "price" XML element
                  Price: "price/text()",
               // the "title" field is mapped to "id" of the "vehicle" XML element
                  Company: "@cover"
               }
             }
           }
        }),
     });
 });
 </script>
 </body>
 </html>

和

menu .xml

<vehicles>
   <vehicle cover="Ford">
       <car>Mustang</car>
       <name>John Smith</name>
       <color>Charcoal</color>
       <price>$20,000</price>
   </vehicle>
</vehicles>

下面是我想要的输出示例。:

https://i.stack.imgur.com/XRn4p.jpg

经过更详细的研究，我发现实现动态生成的剑道UI菜单小部件的唯一方法是使用剑道数据源对其进行初始化。您可以将JavaScript对象数组或远程XML、JSON、JSONP数据绑定到数据源，然后动态初始化Kendo UI Menu。

下面是一个例子:http://jsfiddle.net/D54eM/

下面是一个数据的示例:

var menu1 =
[{
    text: "Company Name",
    cssClass: "ob-blue",
}, {
    text: "Customer's Name",
    cssClass: "light",
    items: [
       { text: "Mike Hunt" },
       { text: "Ben Dover" },
       { text: "Harry Cox" },
       { text: "Jack Goff" }
    ]
}, {
    text: "Color",
    cssClass: "dark",
    items: [
       { text: "Black" },
       { text: "White" },
       { text: "Blue" },
       { text: "Red" }
    ]
}, {
    text: "Prices",
    cssClass: "light",
    items: [
       { text: "$20,000" },
       { text: "$50,000" },
       { text: "$100,000" },
       { text: "150,000" }
    ]
}, {
    text: "Brand",
    cssClass: "dark",
    items: [
       { text: "Ford" },
       { text: "Chevrolet" },
       { text: "Audi" },
       { text: "Honda" }
    ]
}, {
    text: "Year",
    cssClass: "light",
    items: [
       { text: "2008" },
       { text: "2012" },
       { text: "2013" },
       { text: "2014" }
    ]
}, {
    text: "Miles",
    cssClass: "dark",
    items: [
       { text: "10" },
       { text: "10,000" },
       { text: "45,000" },
       { text: "80,000" }
    ]
}];

下面的链接提供了一些关于剑道数据源的有用文档:

http://docs.telerik.com/kendo-ui/getting-started/framework/datasource/overview

这是怎么回事..... .您应该将xml文件转换为StringBuilder，现在字符串生成器转换为html格式，如....

<ul>
<li>...</li>
</ul>

，现在调用字符串作为返回json(str);然后你应该去查看和编写一些Ajax脚本和转换成剑道菜单。它工作得很好。如果有人想知道，然后给这个答复。

相关内容

最新更新

热门标签：