下面是一个简单的kendo UI 的表格
<!DOCTYPE html>
<html>
<head><title></title><meta charset="utf-8"/><link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css" rel="stylesheet" /><link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.default.min.css" rel="stylesheet" /><script src="http://code.jquery.com/jquery-1.9.1.min.js"></script><script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.all.min.js"></script>
</head>
<body><style scoped>#data_grid {width: 300px;height: 400px;}
</style><div id="data_grid"></div>
<script>
$("#data_grid").kendoGrid({columns: [{ field: "firstName",width:70,template: "#:firstName#",title:"firstName"},{ field: "lastName",/* group by this column to see the footer template */width:80,template: "<a href='javascript:void()'>#:firstName#</a>",title: "LastName"}, { field: "age", width:50,groupable: false,aggregates: [ "count", "min", "max" ],groupFooterTemplate: "age total: #: count #, min: #: min #, max: #: max #",title: "年龄"}],groupable: false,sortable: true,dataSource: {data: [{ firstName: "Jane", lastName: "Doe", age: 20 },{ firstName: "Karl", lastName: "Doe", age: 40 },{ firstName: "Karl", lastName: "Fad", age: 30 },{ firstName: "Jane", lastName: "Fad", age: 18 },{ firstName: "Jane", lastName: "Doe", age: 20 },{ firstName: "Karl", lastName: "Doe", age: 40 },{ firstName: "Karl", lastName: "Fad", age: 30 },{ firstName: "Jane1", lastName: "Fad", age: 18 },{ firstName: "Jane2", lastName: "Fad", age: 18 },{ firstName: "Jane3", lastName: "Fad", age: 18 },{ firstName: "Jane4", lastName: "Fad", age: 18 },{ firstName: "Jane5", lastName: "Fad", age: 18 },{ firstName: "Jane6", lastName: "Fad", age: 18 },{ firstName: "Jane7", lastName: "Fad", age: 18 },{ firstName: "Jane8", lastName: "Fad", age: 18 },{ firstName: "Jane9", lastName: "Fad", age: 18 },{ firstName: "Jane10", lastName: "Fad", age: 18 }]}
});
</script>
</body>
</html>效果如下：
说明：
sortable属性表示是否允许排序