KendoUI Table-Edit

Table-Edit

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 server";
$.ajax({
    url: infoUrl, //请求的url地址
    dataType: "json", //返回格式为json
    async: true, //请求是否异步，默认为异步，这也是ajax重要特性
    //data:{"id":"value"},    //参数值
    type: "GET", //请求方式
    beforeSend: function () {
        //请求前的处理
    },
    success: function (req) {
        //请求成功时处理
        $("#grid").kendoGrid({
            dataSource: req,
            pageable: true,
            height: 430,
            toolbar: ["create"],
            columns: [{
                field: "ServerID",
                title: "Server ID",
                width: "50px"
            }, {
                field: "ServerIP",
                title: "IP",
                width: "80px"
            }, {
                field: "ServerName",
                title: "服务器名",
                width: "60px"
            }, {
                field: "Station",
                width: "50px"
            }, {
                field: "LocationX",
                title: "经度",
                width: "70px"
            },{
                field: "LocationY",
                title: "纬度",
                width: "70px"
            },{
                field: "Description",
                title: "描述信息",
                width: "100px"
            },{
                command: ["edit", "destroy"],
                title: "&nbsp;",
                width: "100px"
            }],
            editable: "popup"
        });
    },
    complete: function () {
        //请求完成的处理
    },
    error: function () {
        //请求出错处理
    }
});