Kendo UI网格示例不起作用

我正在尝试学习Kendo UI和jQuery。我一直在关注Kendo UI网站上的视频，了解数据源和绑定等。我试图使用我自己的JSON数据，但它并没有真正发挥作用。Kendo UI网格示例不起作用

我复制了视频中的内容，无法显示数据。我所得到的是表格格式。

我的HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Shows</title> 
    <link href="styles/kendo.common.min.css" rel="stylesheet" /> 
    <link href="styles/kendo.default.min.css" rel="stylesheet" /> 
    <script src="js/jquery.min.js"></script> 
    <script src="js/kendo.web.min.js"></script> 
</head> 
<body> 
<div id="example"> 

    <div id="shows-grid"> 
     <table id="shows"> 
      <tr> 
       <th data-field="name">Show Title</th> 
       <th data-field="season">Total Seasons</th> 
       <th data-field="id">Rage TV ID</th> 
      </tr> 
     </table> 
    </div> 
</div>  
    <script> 
     $(function() { 
      dataSource = new kendo.data.DataSource({ 
       transport: { 
        read: { 
         url: "include/shows.json" 
        } 
       } 
      }); 

      $("#shows").kendoGrid({ 
       dataSource:dataSource 
      }); 
     }); 
    </script> 

</body> 
</html>

我的JSON数据：

{"data":[ 
    {"id":"4628","name":"NCIS","season":"11"}, 
    {"id":"21934","name":"NCIS: Los Angeles","season":"5"}, 
    {"id":"24591","name":"The Real NCIS","season":"1"}, 
    {"id":"34498","name":"NCIS: Red","season":"1"}, 
    {"id":"38017","name":"NCIS: New Orleans","season":"1"}, 
    {"id":"3039","name":"Charmed","season":"8"}, 
    {"id":"6125","name":"The Real World","season":"28"}, 
    {"id":"32724","name":"Da Vinci's Demons","season":"2"}, 
    {"id":"27924","name":"The Franchise","season":"2"}, 
    {"id":"6218","name":"The Streets of San Francisco","season":"5"}, 
    {"id":"3253","name":"Da Vinci's Inquest","season":"7"}, 
    {"id":"6862","name":"Da Vinci's City Hall","season":"1"}, 
    {"id":"32034","name":"Oddities: San Francisco","season":"2"}, 
    {"id":"14884","name":"San Francisco International Airport","season":"1"}, 
    {"id":"2616","name":"Animal Cops: San Francisco","season":"1"}, 
    {"id":"5208","name":"Sir Francis Drake","season":"1"}, 
    {"id":"29590","name":"Easy Chinese","season":"2"}, 
    {"id":"5583","name":"The Arlene Francis Show","season":"1"}, 
    {"id":"26665","name":"Jancis Robinson's Wine Course","season":"1"}, 
    {"id":"17968","name":"Foul Play","season":"1"} 
    ]}

来源

2013-09-28 Peter Sun

你似乎已经离开了模式和列在初始化脚本属性。

这里是你可以做的一个样本：

$("#shows").kendoGrid({ 
       dataSource: { 
        transport: { 
         read: "include/shows.json" 
        }, 
        schema: { 
         model: { 
          id: "IssueId", 
          fields: { 
           id: { editable: false, nullable: false }, 
           name: { validation: { required: true } }, 
           season: { validation: { required: true } } 
          } 
         } 
        } 
       }, 
       columns: [ 
          { field: "name", title: "Name" }, 
          { field: "season", title: "Season" } 
         ] 
        });

来源

2013-10-30 10:04:55 nouptime

Kendo UI网格示例不起作用

回答

相关问题