2014-09-24 12:35:06 +08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<title>Vue.js grid component example</title>
|
|
|
|
|
<link rel="stylesheet" href="style.css">
|
|
|
|
|
<script src="../../dist/vue.js"></script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<!-- component template -->
|
|
|
|
|
<script type="text/x-template" id="grid-template">
|
|
|
|
|
<table>
|
|
|
|
|
<thead>
|
|
|
|
|
<tr>
|
2015-08-25 12:30:01 +08:00
|
|
|
<th v-for="key in columns"
|
2015-09-16 10:52:55 +08:00
|
|
|
@click="sortBy(key)"
|
2015-09-06 10:23:54 +08:00
|
|
|
:class="{active: sortKey == key}">
|
2014-09-24 12:35:06 +08:00
|
|
|
{{key | capitalize}}
|
|
|
|
|
<span class="arrow"
|
2015-10-10 05:10:38 +08:00
|
|
|
:class="sortOrders[key] > 0 ? 'asc' : 'dsc'">
|
2014-09-24 12:35:06 +08:00
|
|
|
</span>
|
|
|
|
|
</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody>
|
2015-08-25 12:30:01 +08:00
|
|
|
<tr v-for="
|
|
|
|
|
entry in data
|
2014-09-24 12:35:06 +08:00
|
|
|
| filterBy filterKey
|
2015-10-10 05:10:38 +08:00
|
|
|
| orderBy sortKey sortOrders[sortKey]">
|
2015-08-25 12:30:01 +08:00
|
|
|
<td v-for="key in columns">
|
2014-09-24 12:35:06 +08:00
|
|
|
{{entry[key]}}
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<!-- demo root element -->
|
|
|
|
|
<div id="demo">
|
2014-09-26 01:27:05 +08:00
|
|
|
<form id="search">
|
|
|
|
|
Search <input name="query" v-model="searchQuery">
|
|
|
|
|
</form>
|
2014-12-06 03:26:56 +08:00
|
|
|
<demo-grid
|
2015-09-06 10:23:54 +08:00
|
|
|
:data="gridData"
|
|
|
|
|
:columns="gridColumns"
|
|
|
|
|
:filter-key="searchQuery">
|
2014-12-06 03:26:56 +08:00
|
|
|
</demo-grid>
|
2014-09-24 12:35:06 +08:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script src="grid.js"></script>
|
|
|
|
|
|
|
|
|
|
</body>
|
2015-08-25 12:30:01 +08:00
|
|
|
</html>
|
