| _{key} | ||||
|---|---|---|---|---|
| Filter | ||||
| _{(currentPage-1) * pageSize + index+1}) | _{itemValue} | |||
Smart Grid using Vue JS
Features:
Loop Json to draw grid
Bind Json Data with grid textbox and any edit in textbox will change json data
Contains Paging/Filter
Grid CODE
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.min.js"></script>
<style>
.odd {background-color:#ffffef}
.even { background-color:#F2FCFF}
.PagingOdd {padding:10px;background-color:#ffffff;cursor:pointer}
.PagingEven {padding:10px; background-color:#f7f7f7;cursor:pointer}
.DataTable td{ border-top-width: 1px; border-top-style: solid; border-top-color: #cccccc;}
.TableHeader {color:#ffffff;background-color:#666666}
.TableHeader th {padding:10px;}
.TableSearchHeader {color:#ffffff;background-color:#999999}
.textbox {width:95%;margin:3px;}
.TableFooter {color:#666666;background-color:#f7f7f7}
.button { margin-left:2px;padding-right:15px;padding-left:15px;background-color:#666666;font-size:14px;color:#fff}
.arrow { display: inline-block;vertical-align: middle;width: 0;height: 0;margin-left: 5px;opacity: 0.66;}
.arrow.asc {border-left: 4px solid transparent;border-right: 4px solid transparent;border-bottom: 4px solid #fff;}
.arrow.dsc {border-left: 4px solid transparent;border-right: 4px solid transparent;border-top: 4px solid #fff;}
</style>
</head>
<body>
<div id="app">
<div>
<input style="width:99%;margin:3px;padding:5px;font-size:20px" name="query" placeholder="Search all dataset columns" v-model="filterKey" onkeyup="app.currentPage=1;">
</div>
<table class="DataTable" width=100%>
<thead>
<tr class="TableHeader">
<th> </th>
<th v-for="(key, index) in Object.keys(dataset[0])" @click="sort(key)"> _{key} <span class="arrow" :class=" (currentSort==key)? ((currentSortDir=='asc' )? 'arrow asc' : 'arrow dsc'):'' "></span></th>
</tr>
<tr class=TableSearchHeader >
<td>Filter </td>
<td v-for="(key, index) in Object.keys(dataset[0])"> <input type=text onkeyup="if(this.value=='')app.filterKey='';else app.filterKey='Column Search';" v-model="column_filter[key]" v-bind:placeholder="key" class="textbox"> </td>
</tr>
</thead>
<tbody>
<tr v-for="(_row, index) of filteredData" :class="((index%2)?'odd':'even')">
<td>_{(currentPage-1) * pageSize + index+1}) </td>
<td v-for="(itemValue, itemkey, column_index) in _row">
<span v-if="column_index < Object.keys(_row).length - NumberOfEdatableColumnAtTheEnd ">_{itemValue} </span>
<span v-if="column_index >= Object.keys(_row).length - NumberOfEdatableColumnAtTheEnd ">
<input type=text v-model="itemValue" class="textbox">
</span>
</td>
</tr>
<tr class="TableFooter">
<td colspan="5">
<button class="button" @click="prevPage">Previous</button>
<button class="button" @click="nextPage">Next</button>
</td>
</tr>
</tbody>
</table>
</div>
<script>
const app = new Vue({
el:'#app',
delimiters: ['_{', '}'],
data:{
dataset:[],
currentSort:'name',
currentSortDir:'asc',
pageSize:5,
currentPage:1,
NumberOfEdatableColumnAtTheEnd:2,
filterKey: '',
column_filter: {},
},
created:function() {
/*
fetch('https://api.myjson.com/bins/s9lux')
.then(res => res.json())
.then(res => {
this.dataset = res;
})
*/
this.dataset = [{"name":"Alpha","age":2,"breed":"Calico","gender":"male"},{"name":"Beta","age":1,"breed":"Siamese","gender":"female"},{"name":"Gamma","age":6,"breed":"Calico","gender":"female"},{"name":"Delta","age":5,"breed":"Bengal","gender":"male"},{"name":"Epsilon","age":2,"breed":"Calico","gender":"female"},{"name":"Fenris","age":10,"breed":"Bengal","gender":"male"},{"name":"Gorf","age":4,"breed":"Calico","gender":"female"},{"name":"Hary","age":6,"breed":"Siamese","gender":"male"},{"name":"Irdis","age":1,"breed":"Siamese","gender":"female"},{"name":"Joker","age":7,"breed":"Calico","gender":"female"}];
var column_filter_temp="{ \"all\":\"\" ";
Object.keys(this.dataset[0]).forEach(function(key) {
column_filter_temp+= ",\""+key +"\":\"\" ";
});
column_filter_temp+="}";
console.log(column_filter_temp);
this.column_filter = JSON.parse(column_filter_temp);
},
methods:{
sort:function(s) {
//if s == current sort, reverse
if(s === this.currentSort) {
this.currentSortDir = this.currentSortDir==='asc'?'desc':'asc';
}
this.currentSort = s;
},
nextPage:function() {
if((this.currentPage*this.pageSize) < this.dataset.length) this.currentPage++;
},
prevPage:function() {
if(this.currentPage > 1) this.currentPage--;
},
},
computed:{
filteredData: function () {
var filterKey = this.filterKey && this.filterKey.toLowerCase();
if (filterKey)
{
//console.log(filterKey);
if (filterKey =='column search')
{
return app.dataset.filter(function (row) {
return Object.keys(row).some(function (key) {
return (String(app.column_filter[key]) !='' && String(row[key]).toLowerCase().indexOf(String(app.column_filter[key]).toLowerCase()) > -1)
})
}).sort((a, b) => {
let modifier = 1;
if (app.currentSortDir === 'desc') modifier = -1;
if (a[app.currentSort] < b[app.currentSort]) return -1 * modifier;
if (a[app.currentSort] > b[app.currentSort]) return 1 * modifier;
return 0;
}).filter((row, index) => {
let start = (app.currentPage - 1) * app.pageSize;
let end = app.currentPage * app.pageSize;
if (index >= start && index < end) return true;
});
}
else
{
return app.dataset.filter(function (row) {
return Object.keys(row).some(function (key) {
return String(row[key]).toLowerCase().indexOf(app.filterKey.toLowerCase()) > -1
})
}).sort((a, b) => {
let modifier = 1;
if (app.currentSortDir === 'desc') modifier = -1;
if (a[app.currentSort] < b[app.currentSort]) return -1 * modifier;
if (a[app.currentSort] > b[app.currentSort]) return 1 * modifier;
return 0;
}).filter((row, index) => {
let start = (app.currentPage - 1) * app.pageSize;
let end = app.currentPage * app.pageSize;
if (index >= start && index < end) return true;
});
}
}
else
return this.dataset.sort((a, b) => {
let modifier = 1;
if (this.currentSortDir === 'desc') modifier = -1;
if (a[this.currentSort] < b[this.currentSort]) return -1 * modifier;
if (a[this.currentSort] > b[this.currentSort]) return 1 * modifier;
return 0;
}).filter((row, index) => {
let start = (this.currentPage - 1) * this.pageSize;
let end = this.currentPage * this.pageSize;
if (index >= start && index < end) return true;
});
},
}
})
</script>
</body>
</html>
No comments:
Post a Comment