All Components

DataSource / Basic usage

Rank Rating Title Year

HTML5/JavaScript 源码

<!DOCTYPE html>
<html>
 <head> 
  <title>Basic usage</title> 
  <meta charset="utf-8"> 
  <link href="../content/shared/styles/examples-offline.css" rel="stylesheet"> 
  <link href="../../styles/kendo.common.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.rtl.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.default.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.dataviz.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet"> 
  <script src="../../js/jquery.min.js"></script> 
  <script src="../../js/kendo.all.min.js"></script> 
  <script src="../content/shared/js/console.js"></script> 
  <script>
        
    </script> 
 </head> 
 <body> 
  <a class="offline-button" href="../index.html">Back</a> 
  <div id="example"> 
   <div class="demo-section k-content"> 
    <table id="movies" class="metrotable"> 
     <thead> 
      <tr> 
       <th>Rank</th> 
       <th>Rating</th> 
       <th>Title</th> 
       <th>Year</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td colspan="4"></td> 
      </tr> 
     </tbody> 
    </table> 
   </div> 
   <script id="template" type="text/x-kendo-template">
                <tr>
                    <td>#= rank #</td>
                    <td>#= rating #</td>
                    <td>#= title #</td>
                    <td>#= year #</td>
                </tr>
            </script> 
   <script>
                $(document).ready(function() {
                    // create a template using the above definition
                    var template = kendo.template($("#template").html());

                    var movies = [
                        { "rank": 1,  "rating": 9.2, "year": 1994, "title": "The Shawshank Redemption" },
                        { "rank": 2,  "rating": 9.2, "year": 1972, "title": "The Godfather" },
                        { "rank": 3,  "rating": 9,   "year": 1974, "title": "The Godfather: Part II" },
                        { "rank": 4,  "rating": 8.9, "year": 1966, "title": "Il buono, il brutto, il cattivo." },
                        { "rank": 5,  "rating": 8.9, "year": 1994, "title": "Pulp Fiction" },
                        { "rank": 6,  "rating": 8.9, "year": 1957, "title": "12 Angry Men" },
                        { "rank": 7,  "rating": 8.9, "year": 1993, "title": "Schindler's List" },
                        { "rank": 8,  "rating": 8.8, "year": 1975, "title": "One Flew Over the Cuckoo's Nest" },
                        { "rank": 9,  "rating": 8.8, "year": 2010, "title": "Inception" },
                        { "rank": 10, "rating": 8.8, "year": 2008, "title": "The Dark Knight" }
                    ];

                    var dataSource = new kendo.data.DataSource({
                        data: movies,
                        change: function() { // subscribe to the CHANGE event of the data source
                            $("#movies tbody").html(kendo.render(template, this.view())); // populate the table
                        }
                    });

                    // read data from the "movies" array
                    dataSource.read();
                });
            </script> 
   <style>
                .demo-section {
                 overflow: auto;
                }
                .metrotable {
                	width: 100%;
                	border-collapse: collapse;
                }
                
                .metrotable > thead > tr > th 
                {
                	font-size: 1.3em;
                	padding-top: 0;
                	padding-bottom: 5px;
                }
            </style> 
  </div>   
 </body>
</html>