Skip to content

Commit 046e322

Browse files
yyx990803yyx990803
committed
add grid component example
1 parent 0b34903 commit 046e322

File tree

3 files changed

+148
-0
lines changed

3 files changed

+148
-0
lines changed

‎examples/grid/grid.js

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
// register the grid component
2+
Vue.component('demo-grid', {
3+
template: '#grid-template',
4+
replace: true,
5+
data: function () {
6+
return {
7+
columns: null,
8+
sortKey: '',
9+
filterKey: '',
10+
reversed: {}
11+
}
12+
},
13+
ready: function () {
14+
// assuming all data entries have the same keys
15+
// extract the column headers
16+
this.columns = Object.keys(this.data[0])
17+
// initialize column reverse state
18+
this.columns.forEach(function (key) {
19+
this.reversed.$add(key, false)
20+
}.bind(this))
21+
},
22+
methods: {
23+
sortBy: function (key) {
24+
this.sortKey = key
25+
this.reversed[key] = !this.reversed[key]
26+
}
27+
}
28+
})
29+
30+
// bootstrap the demo
31+
var demo = new Vue({
32+
el: '#demo',
33+
data: {
34+
search: '',
35+
gridData: [
36+
{ name: 'Chuck Norris', power: Infinity },
37+
{ name: 'Bruce Lee', power: 9000 },
38+
{ name: 'Jacky Chang', power: 7000 },
39+
{ name: 'Jet Li', power: 8000 }
40+
]
41+
}
42+
})

‎examples/grid/index.html

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Vue.js grid component example</title>
6+
<link rel="stylesheet" href="style.css">
7+
<script src="../../dist/vue.js"></script>
8+
</head>
9+
<body>
10+
11+
<!-- component template -->
12+
<script type="text/x-template" id="grid-template">
13+
<table>
14+
<thead>
15+
<tr>
16+
<th v-repeat="key: columns"
17+
v-on="click:sortBy(key)"
18+
v-class="active: sortKey == key">
19+
{{key | capitalize}}
20+
<span class="arrow"
21+
v-class="reversed[key] ? 'dsc' : 'asc'">
22+
</span>
23+
</th>
24+
</tr>
25+
</thead>
26+
<tbody>
27+
<tr v-repeat="
28+
entry: data
29+
| filterBy filterKey
30+
| orderBy sortKey reversed[sortKey]">
31+
<td v-repeat="key: columns">
32+
{{entry[key]}}
33+
</td>
34+
</tr>
35+
</tbody>
36+
</table>
37+
</script>
38+
39+
<!-- demo root element -->
40+
<div id="demo">
41+
Search <input v-model="search">
42+
<demo-grid v-with="data:gridData, filterKey:search"></demo-grid>
43+
</div>
44+
45+
<script src="grid.js"></script>
46+
47+
</body>
48+
</html>

‎examples/grid/style.css

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
body {
2+
font-family: Helvetica Neue, Arial, sans-serif;
3+
font-size: 14px;
4+
color: #444;
5+
}
6+
7+
table {
8+
border: 2px solid #42b983;
9+
border-radius: 3px;
10+
background-color: #fff;
11+
}
12+
13+
th {
14+
background-color: #42b983;
15+
color: rgba(255,255,255,0.66);
16+
cursor: pointer;
17+
-webkit-user-select: none;
18+
-moz-user-select: none;
19+
-user-select: none;
20+
}
21+
22+
td {
23+
background-color: #f9f9f9;
24+
}
25+
26+
th, td {
27+
min-width: 120px;
28+
padding: 10px 20px;
29+
}
30+
31+
th.active {
32+
color: #fff;
33+
}
34+
35+
th.active .arrow {
36+
opacity: 1;
37+
}
38+
39+
.arrow {
40+
display: inline-block;
41+
vertical-align: middle;
42+
width: 0;
43+
height: 0;
44+
margin-left: 5px;
45+
opacity: 0.66;
46+
}
47+
48+
.arrow.asc {
49+
border-left: 4px solid transparent;
50+
border-right: 4px solid transparent;
51+
border-bottom: 4px solid #fff;
52+
}
53+
54+
.arrow.dsc {
55+
border-left: 4px solid transparent;
56+
border-right: 4px solid transparent;
57+
border-top: 4px solid #fff;
58+
}

0 commit comments

Comments
 (0)