Kendo UI Grid

本文转载自查看原文 2013-10-16 19:34 3675 Front End

<!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>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 Kendo UI Grid 模型绑定 Kendo UI Grid 使用总结 Kendo UI向Grid(表格)中添加Kendo UI控件 Kendo UI grid 表格数据更新 kendo ui - grid 数据表格系列 kendo ui中grid页面参数问题 Kendo-UI-Grid-文字剧中显示 Kendo UI Grid 批量编辑使用总结 Asp.net mvc Kendo UI Grid的使用(三) 前台kendo ui js grid框架增删改查