博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

Kendo UI Grid

Posted on 2013-10-16 19:34  钟悍  阅读(3852)  评论(0)  编辑  收藏  举报 
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <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>
    #grid {
        width: 692px;
        height: 400px;
    }
</style>

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { 
      field: "firstName",
      width:100,
      template: "<strong>#: firstName # </strong>",
      title:"FirstName"
    },
    { field: "lastName",/* group by this column to see the footer template */
      width:100,
      template: "<a href='javascript:void()'>#: firstName # </a>",
      title: "LastName"
    }, 
    { 
      field: "age", 
      width:100,
      groupable: false,
      aggregates: [ "count", "min", "max" ],
      groupFooterTemplate: "age total: #: count #, min: #: min #, max: #: max #",
      title: "Age"
    }
  ],
  groupable: true,
  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: "Jane", lastName: "Fad", age: 18 }
    ]
  }
});
</script>
</body>
</html>