Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Better Grid demo

  • Loading branch information...
commit b78949307b7ee469f553f7601b50726181a4ad60 1 parent c2da746
@daffl daffl authored
Showing with 77 additions and 71 deletions.
  1. +75 −69 grid/grid.html
  2. +2 −2 table_scroll/table_scroll.less
View
144 grid/grid.html
@@ -2,93 +2,99 @@
<html>
<head>
<title>CanUI Grid</title>
- <style type="text/css">
- section {
- width: 50%;
- margin: 0 auto;
- border: 1px solid #EFEFEF;
- }
-
- table {
- width: 100%;
- border-collapse: collapse;
- }
-
- td, th {
- padding: 5px;
- border: 1px solid #505050;
- }
- </style>
</head>
<body style="padding-top: 30px;">
<div class="container">
- <section style="height: 200px;">
- <table id="grid" class="table table-bordered"></table>
- </section>
+ <h1 class="page-header">CanUI Grid</h1>
+
+ <div style="height: 300px; overflow: auto;" class="table-bordered">
+ <table id="grid" class="table"></table>
+ </div>
- <input id="page" type="text"/>
+ <div class="pagination pagination-centered">
+ <ul>
+ <li class="active"><a href="#">1</a></li>
+ <li><a href="#">2</a></li>
+ <li><a href="#">3</a></li>
+ <li><a href="#">4</a></li>
+ </ul>
+ </div>
</div>
<script type="text/javascript" src="../../steal/steal.js"></script>
<script type="text/javascript">
- steal('jquery', 'canui/grid', 'can/model', 'can/util/fixture', 'steal/less',
- function ($) {
- steal('canui/table_scroll/table_scroll.less', function () {
- var Model = can.Model({
- findAll : 'GET /models'
- }, {});
+ steal('jquery', 'canui/grid', 'can/model', 'can/util/fixture', 'steal/less', 'canui/style')
+ .then('canui/table_scroll/table_scroll.less', function () {
+ var Model = can.Model({
+ findAll : 'GET /models'
+ }, {});
- var store = can.fixture.make(40, function (i) {
- return {
- id : i,
- name : 'Dave ' + i,
- age : i + 20
- }
- });
+ var store = can.fixture.make(60, function (i) {
+ return {
+ id : i + 1,
+ name : 'User ' + i,
+ age : Math.floor(Math.random() * 100)
+ }
+ });
- can.fixture('GET /models', store.findAll);
+ can.fixture.delay = 300;
+ can.fixture('GET /models', store.findAll);
- var offset = 0,
- paginator = new can.Observe({
- offset : 0,
- limit : 10
- });
+ var offset = 0,
+ paginator = new can.Observe({
+ offset : 0,
+ limit : 15
+ });
- var dfd = Model.findAll();
+ var compute = can.compute(function() {
+ return Model.findAll({
+ offset : paginator.attr('offset'),
+ limit : paginator.attr('limit')
+ });
+ });
- $('#grid').grid({
- columns : [
- {
- header : 'Test',
- content : 'name'
- },
- {
- header : 'Age',
- content : 'age'
- },
- {
- header : 'Stuff',
- content : function (observe) {
- return observe.attr('name') + ' ' + observe.attr('age');
- }
- },
- {
- header : 'Things',
- content : function (observe) {
- return observe._cid;
- }
+ $('#grid').grid({
+ columns : [
+ {
+ header : 'Name',
+ content : function(observe) {
+ return '<input style="width: 100px;" size="3" type="text" class="name" data-id="' + observe.attr('id') +
+ '" value="' + observe.attr('name') + '" />';
}
- ],
- scrollable : true,
- list : dfd
- });
+ },
+ {
+ header : 'Age',
+ content : 'age'
+ },
+ {
+ header : 'Display name',
+ content : function (observe) {
+ return observe.attr('name').toLowerCase() + '_' + observe.attr('age');
+ }
+ }
+ ],
+ scrollable : true,
+ list : compute
+ });
- $('#page').change(function () {
- paginator.attr('offset', $(this).val());
- });
+ $('#page').change(function () {
+ paginator.attr('offset', $(this).val());
+ });
+
+ $('.pagination a').click(function() {
+ paginator.attr('offset', (parseInt($(this).html()) - 1) * 10);
+ $('li.active').removeClass('active');
+ $(this).closest('li').addClass('active');
+ });
+
+ $('body').on('change', '.name', function() {
+ // We can grab the model directly from the store based on the data id
+ var model = Model.store[$(this).data('id')];
+ model.attr('name', $(this).val());
+ $(window).trigger('resize');
});
})
</script>
View
4 table_scroll/table_scroll.less
@@ -1,7 +1,7 @@
@import url("../style/bootstrap/less/variables.less");
@import url("../style/bootstrap/less/mixins.less");
-.can_ui_table_scroll {
+.tableScroll {
table {
margin-bottom: 0;
}
@@ -16,7 +16,7 @@
}
}
-.table-bordered .can_ui_table_scroll {
+.table-bordered .tableScroll {
border-left: 1px solid @tableBorder;
thead:first-child tr:first-child th:first-child,

0 comments on commit b789493

Please sign in to comment.
Something went wrong with that request. Please try again.