Kendo UI Grid

15195 단어 grid
<!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>

좋은 웹페이지 즐겨찾기