Skip to content

Commit 8bf0a19

Browse files
liuwenchaoliuwenchao
committed
auto generate meta if it's not provided;
add unsupported message for unsupported browser.
1 parent b91ec53 commit 8bf0a19

File tree

2 files changed

+71
-23
lines changed

2 files changed

+71
-23
lines changed

‎index.html‎

Lines changed: 41 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -14,35 +14,55 @@
1414
<link rel="import" href="src/aha-table.html">
1515
</head>
1616
<body unresolved>
17+
<h2>Data and column meta are both provided</h2>
1718
<aha-table id="example" perpage="2">
1819
</aha-table>
1920

21+
<h2>Only data is provided, meta is autogenerated from the first entry of data.</h2>
22+
<aha-table id="example2">
23+
</aha-table>
24+
2025
<script>
21-
var events = [
22-
{ title: 'gym', date: '2014-04-14', type: 'private', content: '5*20 situps, 5 miles running, 5 minutes planks' },
23-
{ title: 'breakfast', date: '2014-04-14', type: 'private' },
24-
{ title: 'work', date: '2014-04-14', type: 'public', content: 'implement aha-table plymer element' },
25-
{ title: 'lunch', date: '2014-04-14', type: 'public' },
26-
{ title: 'meeting', date: '2014-04-14', type: 'public', content: 'introduce web components to the team' },
27-
{ title: 'dinner', date: '2014-04-14', type: 'private' }
28-
];
26+
function supportsTemplate() {
27+
return 'content' in document.createElement('template');
28+
}
2929

30-
var meta = [
31-
{name: "title", label: "Title", sortable: true, searchable: true, type: "text", editable: true, required: true},
32-
{name: "date", label: "Date", sortable: true, searchable: true, type: "date", editable: true, required: true},
33-
{name: "type", label: "Type", sortable: true, searchable: true, type: "select", editable: true, required: true, default: 'private', options: [
34-
{"value":"", "label": "Please select"},
35-
{"value":"private", "label":"Private Event"},
36-
{"value":"public", "label":"Public Event"}]
37-
},
38-
{name: "content", label: "Content", sortable: false, searchable: true, type: "textarea", editable: true, required: false}
39-
];
30+
if (supportsTemplate()) {
31+
window.addEventListener("polymer-ready", function(){
32+
document.getElementById("example").data = [
33+
{ title: "gym", date: "2014-04-14", type: "private", content: "5*20 situps, 5 miles running, 5 minutes planks" },
34+
{ title: "breakfast", date: "2014-04-14", type: "private" },
35+
{ title: "work", date: "2014-04-14", type: "public", content: "implement aha-table plymer element" },
36+
{ title: "lunch", date: "2014-04-14", type: "public" },
37+
{ title: "meeting", date: "2014-04-14", type: "public", content: "introduce web components to the team" },
38+
{ title: "dinner", date: "2014-04-14", type: "private" }
39+
];
40+
document.getElementById("example").meta = [
41+
{name: "title", label: "Title", sortable: true, searchable: true, type: "text", editable: true, required: true},
42+
{name: "date", label: "Date", sortable: true, searchable: true, type: "date", editable: true, required: true},
43+
{name: "type", label: "Type", sortable: true, searchable: true, type: "select", editable: true, required: true, default: "private", options: [
44+
{"value":"", "label": "Please select"},
45+
{"value":"private", "label":"Private Event"},
46+
{"value":"public", "label":"Public Event"}]
47+
},
48+
{name: "content", label: "Content", sortable: false, searchable: true, type: "textarea", editable: true, required: false}
49+
];
4050

41-
window.addEventListener('polymer-ready', function(){
42-
document.getElementById('example').data = events;
43-
document.getElementById('example').meta = meta;
51+
document.getElementById("example2").data = [
52+
{ title: "gym", date: "2014-04-14", type: "private", content: "5*20 situps, 5 miles running, 5 minutes planks" },
53+
{ title: "breakfast", date: "2014-04-14", type: "private" },
54+
{ title: "work", date: "2014-04-14", type: "public", content: "implement aha-table plymer element" },
55+
{ title: "lunch", date: "2014-04-14", type: "public" },
56+
{ title: "meeting", date: "2014-04-14", type: "public", content: "introduce web components to the team" },
57+
{ title: "dinner", date: "2014-04-14", type: "private" }
58+
];
4459
});
60+
} else {
61+
document.body.innerHTML="Template is not supported in your browser";
62+
}
63+
4564
</script>
65+
4666

4767

4868
<!-- <aha-table id="example">

‎src/aha-table.html‎

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@
9393
-moz-border-radius: 0 5px 5px 0;
9494
border-radius: 0 5px 5px 0;
9595
}
96-
.pagination li button {
96+
.pagination li button {
9797
background-color: #fff;
9898
border: 1px solid #eeeeee;
9999
float: left;
@@ -108,6 +108,14 @@
108108
-ms-user-select: none;
109109
user-select: none;
110110
}
111+
.pagination li input {
112+
background-color: #fff;
113+
border: 1px solid #eeeeee;
114+
float: left;
115+
min-width: 30px;
116+
line-height: 20px;
117+
padding: 4px 12px;
118+
}
111119
</style>
112120
<table>
113121
<thead>
@@ -220,6 +228,10 @@
220228
<li class='{{currentpage === pageCount? "disabled" : ""}}'>
221229
<button on-click="{{nextPage}}">{{next}}</button>
222230
</li>
231+
232+
<li>
233+
<input value="{{perpage}}" on-change="{{refreshPagination}}" size="4"/>
234+
</li>
223235
</ul>
224236
</div>
225237
</td>
@@ -268,7 +280,7 @@
268280
* perpage: the number of items to show per page
269281
* @type {Number}
270282
*/
271-
perpage: 2,
283+
perpage: 10,
272284
/**
273285
* currentpage: the current active page in view
274286
* @type {Number}
@@ -301,6 +313,22 @@
301313
next: "Next >>",
302314
dataChanged: function() {
303315
this.refreshPagination();
316+
if (this.meta.length === 0) {
317+
this.meta = [];
318+
for (var prop in this.data[0]) {
319+
if (prop.indexOf('_') !== 0) {//skip internal field
320+
this.meta.push({
321+
name: prop,
322+
label: prop.charAt(0).toUpperCase() + prop.slice(1),
323+
type: "text",
324+
sortable: true,
325+
searchable: true,
326+
editable: true,
327+
required: false
328+
});
329+
}
330+
}
331+
}
304332
},
305333
edit: function(e) {
306334
if(e.target.templateInstance.model.row){

0 commit comments

Comments
 (0)