Complete vue-datasource

This commit is contained in:
lin-xin 2017-02-18 11:34:46 +08:00
parent 6f28eb0c1a
commit 512566e990
4 changed files with 179 additions and 34 deletions

View File

@ -9,6 +9,7 @@
"build": "node build/build.js"
},
"dependencies": {
"axios": "^0.15.3",
"element-ui": "^1.1.6",
"vue": "^2.1.10",
"vue-datasource": "^1.0.4",

View File

@ -18,40 +18,14 @@
</template>
<script>
import axios from 'axios';
import Datasource from 'vue-datasource';
export default {
data: function(){
return {
information: {
pagination: {
total: 25, // Number of total rows (default 0)
per_page: 15, // Number of rows to show (default 15)
current_page: 1, // Actual page
last_page: 2, // Last page
from: 1, // Beginning of visible rows
to: 15 // End of visible rows
},
data: [{
"id": 1,
"name": "Jaylen Schmidt",
"email": "aheaney@example.org",
"city": "Conroyburgh",
"company": "Kunde, Gerhold and Runte"
},
{
"id": 2,
"name": "Ms. Desiree Franecki III",
"email": "pweissnat@example.net",
"city": "New Mathew",
"company": "Davis Ltd"
},
{
"id": 3,
"name": "Clyde Corwin",
"email": "rolfson.lexus@example.com",
"city": "East Ron",
"company": "Zieme and Sons"
}]
pagination:{},
data:[]
},
columns: [
{
@ -73,11 +47,10 @@
],
actions: [
{
text: 'Click me', // Button label
icon: 'glyphicon glyphicon-check', // Button icon
class: 'btn-primary', // Button class (background color)
event(e, row) { // Event handler callback. Gets event instace and selected row
console.log('Click row: ', row); // If no row is selected, row will be NULL
text: 'Click',
class: 'btn-primary',
event(e, row) {
alert('Click row: ' + row.row.id);
}
}
],
@ -105,6 +78,12 @@
}
})
}
},
beforeMount(){
axios.get('../../../static/data.json').then( (res) => {
console.log(res.data)
this.information = res.data;
})
}
}
</script>

View File

@ -100,6 +100,9 @@
.vue-datasource .table-striped > tbody > tr:nth-of-type(odd) {
background-color: #f9f9f9;
}
.vue-datasource .success th ,.vue-datasource .success td{
background-color: #dff0d8;
}
.vue-datasource .pagination {
display: inline-block;
padding-left: 0;

162
static/data.json Normal file
View File

@ -0,0 +1,162 @@
{
"pagination": {
"total": 15,
"per_page": 15,
"current_page": 1,
"last_page": 1,
"from": 1,
"to": 15
},
"data": [
{
"id": 1,
"name": "Jaylen Schmidt",
"email": "aheaney@example.org",
"city": "Conroyburgh",
"company": "Kunde, Gerhold and Runte",
"job": "Soil Scientist",
"created_at": "2017-01-13 19:17:16",
"updated_at": "2017-01-13 19:17:16"
},
{
"id": 2,
"name": "Ms. Desiree Franecki III",
"email": "pweissnat@example.net",
"city": "New Mathew",
"company": "Davis Ltd",
"job": "Customer Service Representative",
"created_at": "2017-01-13 19:17:16",
"updated_at": "2017-01-13 19:17:16"
},
{
"id": 3,
"name": "Clyde Corwin",
"email": "rolfson.lexus@example.com",
"city": "East Ron",
"company": "Zieme and Sons",
"job": "Claims Taker",
"created_at": "2017-01-13 19:17:16",
"updated_at": "2017-01-13 19:17:16"
},
{
"id": 4,
"name": "Mr. Tyrese Kuphal",
"email": "libby.heaney@example.com",
"city": "Cristianland",
"company": "Abernathy LLC",
"job": "Occupational Health Safety Technician",
"created_at": "2017-01-13 19:17:16",
"updated_at": "2017-01-13 19:17:16"
},
{
"id": 5,
"name": "Ms. Amya West PhD",
"email": "uheller@example.org",
"city": "Treutelmouth",
"company": "Mraz-Effertz",
"job": "Hazardous Materials Removal Worker",
"created_at": "2017-01-13 19:17:16",
"updated_at": "2017-01-13 19:17:16"
},
{
"id": 6,
"name": "Murphy Stamm IV",
"email": "ckautzer@example.com",
"city": "Myleneshire",
"company": "Sporer-Wolf",
"job": "Pipelaying Fitter",
"created_at": "2017-01-13 19:17:16",
"updated_at": "2017-01-13 19:17:16"
},
{
"id": 7,
"name": "Elsa Jast",
"email": "kaitlyn.lang@example.net",
"city": "Mariahstad",
"company": "Hackett LLC",
"job": "Record Clerk",
"created_at": "2017-01-13 19:17:16",
"updated_at": "2017-01-13 19:17:16"
},
{
"id": 8,
"name": "Hardy Mosciski DVM",
"email": "soledad44@example.net",
"city": "Jasminborough",
"company": "Haley Ltd",
"job": "Kindergarten Teacher",
"created_at": "2017-01-13 19:17:16",
"updated_at": "2017-01-13 19:17:16"
},
{
"id": 9,
"name": "Demarcus Littel",
"email": "americo84@example.com",
"city": "New Lilaton",
"company": "Satterfield Group",
"job": "Plant Scientist",
"created_at": "2017-01-13 19:17:16",
"updated_at": "2017-01-13 19:17:16"
},
{
"id": 10,
"name": "Dr. Shad Gleichner",
"email": "eleanora23@example.com",
"city": "Lake Whitneyberg",
"company": "Fay Group",
"job": "Rotary Drill Operator",
"created_at": "2017-01-13 19:17:16",
"updated_at": "2017-01-13 19:17:16"
},
{
"id": 11,
"name": "Milford Mann",
"email": "shartmann@example.net",
"city": "Lake Austinport",
"company": "Sporer-Langosh",
"job": "Social and Human Service Assistant",
"created_at": "2017-01-13 19:17:16",
"updated_at": "2017-01-13 19:17:16"
},
{
"id": 12,
"name": "Prof. Mustafa Lindgren Sr.",
"email": "lizeth.morissette@example.net",
"city": "Roweborough",
"company": "Mitchell-Ratke",
"job": "Shoe Machine Operators",
"created_at": "2017-01-13 19:17:16",
"updated_at": "2017-01-13 19:17:16"
},
{
"id": 13,
"name": "Mrs. Brittany Bode Sr.",
"email": "wiegand.mozelle@example.org",
"city": "South Maxwellville",
"company": "Reilly Inc",
"job": "Bridge Tender OR Lock Tender",
"created_at": "2017-01-13 19:17:16",
"updated_at": "2017-01-13 19:17:16"
},
{
"id": 14,
"name": "Dariana Bauch",
"email": "dessie.schamberger@example.net",
"city": "East Linnie",
"company": "Wuckert PLC",
"job": "Elementary and Secondary School Administrators",
"created_at": "2017-01-13 19:17:16",
"updated_at": "2017-01-13 19:17:16"
},
{
"id": 15,
"name": "Jalon Renner",
"email": "lulu45@example.net",
"city": "New Rashad",
"company": "Muller-Kuhn",
"job": "Manufactured Building Installer",
"created_at": "2017-01-13 19:17:16",
"updated_at": "2017-01-13 19:17:16"
}
]
}