KendoUI Table

Table

by JSDavi

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.dataviz.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.dataviz.default.css">
<script src="http://cdn.kendostatic.com/2014.1.416/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.416/js/kendo.all.min.js"></script>
<div id="grid"></div>

JavaScript

var infoUrl = "http://202.121.66.51:8083/api/sql?sql=select * from user";
$.ajax({
    url: infoUrl, //请求的url地址
    dataType: "json", //返回格式为json
    async: true, //请求是否异步，默认为异步，这也是ajax重要特性
    //data:{"id":"value"},    //参数值
    type: "GET", //请求方式
    beforeSend: function () {
        //请求前的处理
    },
    success: function (req) {
        //请求成功时处理
        $("#grid").kendoGrid({
            dataSource: {
                data: req
            },
            //height: 430,
            scrollable: {
                virtual: true
            },
            sortable: true,
            columns: [{
                field: "UserName",
                title: "用户名"//,
                //width: 60
            }, {
                field: "Passwords",
                title: "密码"//,
                //width: 60
            }, {
                field: "Level",
                title: "权限等级"//,
                //width: 60
            }, {
                field: "RegistTime",
                title: "注册时间"//,
                //width: 280
            }, {
                field: "ID",
                title: "ID"//,
                //width: 60
            }]
        });
    },
    complete: function () {
        //请求完成的处理
    },
    error: function () {
        //请求出错处理
    }
});