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網格示例不起作用

回答

相關問題