All Components

DataSource / Remote data operations

Configure

    HTML5/JavaScript 源码

    <!DOCTYPE html>
    <html>
     <head> 
      <title>Remote data operations</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="box wide"> 
        <h4>Configure</h4> 
        <ul class="options"> 
         <li> <label for="page">Page:</label> <input type="text" value="1" id="page" class="k-textbox"> </li> 
         <li> <label for="order">Order by:</label> <select id="order"> <option value="ProductID">ID</option> <option value="ProductName">Name</option> <option value="UnitPrice">Price</option> </select> </li> 
         <li> <label for="dir">Direction:</label> <select id="dir"> <option value="asc">Ascending</option> <option value="desc">Descending</option> </select> </li> 
         <li> <button class="k-button" id="apply" style="margin-left: 74px;">Apply</button> </li> 
        </ul> 
       </div> 
       <div class="demo-section k-content wide"> 
        <ul id="products"></ul> 
       </div> 
       <script id="template" type="text/x-kendo-template">
                    <li class="product">
                        <img src="../content/web/foods/${ProductID}.jpg" alt="${ProductName} image" />
                        <h3>#:ProductName#</h3>
                        <p>#:kendo.toString(UnitPrice, "c")#</p>
                    </li>
                </script> 
       <script>
                    $(document).ready(function() {
                        // create a template using the above definition
                        var template = kendo.template($("#template").html());
    
                        var dataSource = new kendo.data.DataSource({
                            type: "odata",
                            serverPaging: true,
                            serverSorting: true,
                            pageSize: 12,
                            transport: {
                                read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
                            },
                            change: function() { // subscribe to the CHANGE event of the data source
                                // update the max attribute of the "page" input
                                $("#page").attr("max", this.totalPages());
    
                                $("#products").html(kendo.render(template, this.view()));
                            }
                        });
    
                        // read data from the remote service
                        dataSource.read();
    
                        $("#apply").on("click", function() {
                            var page = parseInt($("#page").val(), 10);
    
                            // validate the page - it must be a number within the allowed range
                            if (isNaN(page) || page < 1 || page > dataSource.totalPages()) {
                                alert(kendo.format("Page must be a number between 1 and {0}", dataSource.totalPages()));
                                return;
                            }
    
                            // query the remote service
                            dataSource.query({
                                page: page,
                                pageSize: 10,
                                sort: {
                                    field: $("#order").val(),
                                    dir:$("#dir").val()
                                }
                            });
                        });
    
                        //initialize dropdownlist components
                        $("#order").kendoDropDownList();
                        $("#dir").kendoDropDownList();
                    });
                </script> 
       <style>
                    .options label {
                        display: inline-block;
                        width: 70px;
                    }
                    .product {
                        float: left;
                        position: relative;
                        width: 111px;
                        height: 170px;
                        margin: 0;
                        padding: 0;
                        list-style:none;
                    }
                    .product img {
                        width: 110px;
                        height: 110px;
                    }
                    .product h3 {
                        margin: 0;
                        padding: 3px 5px 0 0;
                        max-width: 96px;
                        overflow: hidden;
                        line-height: 1.1em;
                        font-size: .9em;
                        font-weight: normal;
                        text-transform: uppercase;
                        color: #999;
                    }
                    .product p {
                        visibility: hidden;
                    }
                    .product:hover p {
                        visibility: visible;
                        position: absolute;
                        width: 110px;
                        height: 110px;
                        top: 0;
                        margin: 0;
                        padding: 0;
                        line-height: 110px;
                        vertical-align: middle;
                        text-align: center;
                        color: #fff;
                        background-color: rgba(0,0,0,0.75);
                        transition: background .2s linear, color .2s linear;
                        -moz-transition: background .2s linear, color .2s linear;
                        -webkit-transition: background .2s linear, color .2s linear;
                        -o-transition: background .2s linear, color .2s linear;
                    }
                    #products:after {
                        content: ".";
                        display: block;
                        height: 0;
                        clear: both;
                        visibility: hidden;
                    }
                </style> 
      </div>   
     </body>
    </html>