kendo ui - grid 數據表格系列

kendo-ui 官網： https://www.telerik.com/documentation

初始化 grid:

引入文件：

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.mobile.all.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.2.516/js/kendo.messages.zh-CN.min.js"></script>　　　　<!-- 漢化表格 -->

創建表格盒子：

<div id="grid"><div>

1. 數據源 --  本地數據　　

$("#grid").kendoGrid({
　　　　　height: 500, // 表格高度 (單位px)
        dataSource: {
            data: [
                { id: 1, name: "張三", age: 30, sex: "男", birthDate: "2018-01-01" },
                { id: 2, name: "李四", age: 33, sex: "女", birthDate: "2018-01-01" },
                { id: 3, name: "王五", age: 28, sex: "男", birthDate: "2018-01-01" },
                { id: 4, name: "趙四", age: 22, sex: "女", birthDate: "2018-01-01" },
                { id: 5, name: "錢六", age: 24, sex: "男", birthDate: "2018-01-01" }
            ],
            schema: {
                model: {
                    id: "id",
                    fields: {
                        "id": { type: "number" },  //數據類型為 數字
                        "birthDate": { type: "date" }  //數據類型為 日期
                    }
                }
            },
            pageSize: 2        //定義分頁每頁幾條數據
        },
        toolbar: ["create", "excel", "pdf"],    // create(創建) excel(導出當前表格格式為excel) pdf(導出當前表格格式為pdf)
        columns: [
            { field: "id", title: "用戶編號", width: 150 },    // field 綁定dataSource數據源的關鍵字 
            { field: "name" },                                // title 當前關鍵字的標題名稱， 如果不寫默認就是field關鍵字名
            { field: "age" },    // width 當前表格列的寬度 默認單位px
            { field: "sex" },
            { field: "birthDate", format: "{0:yyyy-MM-dd}" },    // format 定義時間格式
            { command: ["edit", "destroy"] }            // command  edit(編輯) destroy(刪除)  
        ],
        pageable: {        //表格分頁
            refresh: true, //刷新
            pageSizes: true, //打開按鈕分頁    
            buttonCount: 5 //分頁數量
        },
        editable: "popup", // 數據編輯方式 inline(行內) popup(彈出)
        edit: function(e) {
            if (!e.model.isNew()) {
                  // 使 id 列不能編輯當其編輯的時候 ( 但是新建時可編輯 )
                  var numeric = e.container.find("input[name=id]").data("kendoNumericTextBox");
                  numeric.enable(false);
            }
        }
    });

2.  數據源 --  后台數據

var dataSource = new kendo.data.DataSource({
    transport: {
        read: function(options){
            $.ajax({
                url: url,
                type: "GET",
                dataType: "json",
                success: function(result) {
                    options.success(result)
                },
                error: function (error) {
                   options.success(error)
                }
            })
        }
    }
});

$("#grid").data("kendoGrid").setDataSource(dataSource);  //設置數據源