vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactor LazyLoad Demo

pull/880/head
yigitfindikli 2021-01-20 13:08:16 +03:00
parent 3b295a16d8
commit ae8b740633
1 changed files with 62 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

174
src/views/datatable/DataTableLazyDemo.vue
View File

@ -16,22 +16,22 @@
:totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort($event)"> :totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort($event)">
<Column field="name" header="Name" filterMatchMode="startsWith" ref="name" :sortable="true"> <Column field="name" header="Name" filterMatchMode="startsWith" ref="name" :sortable="true">
<template #filter> <template #filter>
<InputText type="text" v-model="filters['name']" @keydown="onFilter($event)" class="p-column-filter" placeholder="Search by name"/> <InputText type="text" v-model="filters['name']['value']" @keydown="onFilter($event)" class="p-column-filter" placeholder="Search by name"/>
</template> </template>
</Column> </Column>
<Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" ref="country.name" :sortable="true"> <Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" ref="country.name" :sortable="true">
<template #filter> <template #filter>
<InputText type="text" v-model="filters['country.name']" @keydown="onFilter($event)" class="p-column-filter" placeholder="Search by country"/> <InputText type="text" v-model="filters['country.name']['value']" @keydown="onFilter($event)" class="p-column-filter" placeholder="Search by country"/>
</template> </template>
</Column> </Column>
<Column field="company" header="Company" filterMatchMode="contains" ref="company" :sortable="true"> <Column field="company" header="Company" filterMatchMode="contains" ref="company" :sortable="true">
<template #filter> <template #filter>
<InputText type="text" v-model="filters['company']" @keydown="onFilter($event)" class="p-column-filter" placeholder="Search by company"/> <InputText type="text" v-model="filters['company']['value']" @keydown="onFilter($event)" class="p-column-filter" placeholder="Search by company"/>
</template> </template>
</Column> </Column>
<Column field="representative.name" header="Representative" filterField="representative.name" ref="representative.name" :sortable="true"> <Column field="representative.name" header="Representative" filterField="representative.name" ref="representative.name" :sortable="true">
<template #filter> <template #filter>
<InputText type="text" v-model="filters['representative.name']" @keydown="onFilter($event)" class="p-column-filter" placeholder="Search by representative"/> <InputText type="text" v-model="filters['representative.name']['value']" @keydown="onFilter($event)" class="p-column-filter" placeholder="Search by representative"/>
</template> </template>
</Column> </Column>
</DataTable> </DataTable>
@ -43,26 +43,27 @@
<TabPanel header="Source"> <TabPanel header="Source">
<pre v-code> <pre v-code>
<code><template v-pre> <code><template v-pre>
&lt;DataTable :value="customers" :lazy="true" :paginator="true" :rows="10" :filters="filters" ref="dt"
&lt;DataTable :value="customers" :lazy="true" :paginator="true" :rows="10" :filters="filters" ref="dt" &lt;DataTable :value="customers" :lazy="true" :paginator="true" :rows="10" :filters="filters" ref="dt"
:totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort($event)"&gt; :totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort($event)"&gt;
&lt;Column field="name" header="Name" filterMatchMode="startsWith" ref="name" :sortable="true"&gt; &lt;Column field="name" header="Name" filterMatchMode="startsWith" ref="name" :sortable="true"&gt;
&lt;template #filter&gt; &lt;template #filter&gt;
&lt;InputText type="text" v-model="filters['name']" @keydown="onFilter($event)" class="p-column-filter" placeholder="Search by name"/&gt; &lt;InputText type="text" v-model="filters['name']['value']" @keydown="onFilter($event)" class="p-column-filter" placeholder="Search by name"/&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Column&gt; &lt;/Column&gt;
&lt;Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" ref="country.name" :sortable="true"&gt; &lt;Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" ref="country.name" :sortable="true"&gt;
&lt;template #filter&gt; &lt;template #filter&gt;
&lt;InputText type="text" v-model="filters['country.name']" @keydown="onFilter($event)" class="p-column-filter" placeholder="Search by country"/&gt; &lt;InputText type="text" v-model="filters['country.name']['value']" @keydown="onFilter($event)" class="p-column-filter" placeholder="Search by country"/&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Column&gt; &lt;/Column&gt;
&lt;Column field="company" header="Company" filterMatchMode="contains" ref="company" :sortable="true"&gt; &lt;Column field="company" header="Company" filterMatchMode="contains" ref="company" :sortable="true"&gt;
&lt;template #filter&gt; &lt;template #filter&gt;
&lt;InputText type="text" v-model="filters['company']" @keydown="onFilter($event)" class="p-column-filter" placeholder="Search by company"/&gt; &lt;InputText type="text" v-model="filters['company']['value']" @keydown="onFilter($event)" class="p-column-filter" placeholder="Search by company"/&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Column&gt; &lt;/Column&gt;
&lt;Column field="representative.name" header="Representative" filterField="representative.name" filterMatchMode="contains" ref="representative.name" :sortable="true"&gt; &lt;Column field="representative.name" header="Representative" filterField="representative.name" ref="representative.name" :sortable="true"&gt;
&lt;template #filter&gt; &lt;template #filter&gt;
&lt;InputText type="text" v-model="filters['representative.name']" @keydown="onFilter($event)" class="p-column-filter" placeholder="Search by representative"/&gt; &lt;InputText type="text" v-model="filters['representative.name']['value']" @keydown="onFilter($event)" class="p-column-filter" placeholder="Search by representative"/&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Column&gt; &lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
@ -79,8 +80,13 @@ export default {
loading: false, loading: false,
totalRecords: 0, totalRecords: 0,
customers: null, customers: null,
filters: {}, filters: {
lazyFilters: {}, 'name': {value: '', matchMode: 'contains'},
'country.name': {value: '', matchMode: 'contains'},
'company': {value: '', matchMode: 'contains'},
'representative.name': {value: '', matchMode: 'contains'},
},
lazyParams: {},
columns: [ columns: [
{field: 'name', header: 'Name'}, {field: 'name', header: 'Name'},
{field: 'country.name', header: 'Country'}, {field: 'country.name', header: 'Country'},
@ -96,40 +102,22 @@ export default {
mounted() { mounted() {
this.loading = true; this.loading = true;
this.customerService.getCustomers({lazyEvent: JSON.stringify({first: 0, rows: this.$refs.dt.rows})}).then(data => { this.lazyParams = {
this.customers = data.customers; first: 0,
this.totalRecords = data.totalRecords; rows: this.$refs.dt.rows,
this.loading = false; sortField: null,
}); sortOrder: null,
filters: this.filters
};
const filters = {}; this.loadLazyData();
for(let i=0; i &lt; this.columns.length; i++) {
let obj = {};
obj["matchMode"] = this.$refs[this.columns[i].field].filterMatchMode || "startsWith";
obj["value"] = null;
filters[this.columns[i].field] = obj;
}
this.lazyFilters = filters;
}, },
methods: { methods: {
loadLazyData(event) { loadLazyData() {
const proxyFilters = JSON.parse(JSON.stringify(this.filters));
for(let filter in proxyFilters) {
this.lazyFilters[filter].value = proxyFilters[filter] || null;
}
this.loading = true; this.loading = true;
let params = {
first: event.first,
rows: event.rows,
sortField: event.sortField,
sortOrder: event.sortOrder,
filters: this.lazyFilters
};
setTimeout(() => { setTimeout(() => {
this.customerService.getCustomers({lazyEvent: JSON.stringify( params )}).then(data => { this.customerService.getCustomers({lazyEvent: JSON.stringify( this.lazyParams )}).then(data => {
this.customers = data.customers; this.customers = data.customers;
this.totalRecords = data.totalRecords; this.totalRecords = data.totalRecords;
this.loading = false; this.loading = false;
@ -137,34 +125,18 @@ export default {
}, 1000); }, 1000);
}, },
onPage(event) { onPage(event) {
this.loadLazyData(event); this.lazyParams = event;
this.loadLazyData();
}, },
onSort(event) { onSort(event) {
this.loadLazyData(event); this.lazyParams = event;
this.loadLazyData();
}, },
onFilter(event) { onFilter(event) {
if(event.keyCode === 13) { if (event.keyCode === 13) {
const proxyFilters = JSON.parse(JSON.stringify(this.filters));
for(let filter in proxyFilters) {
this.lazyFilters[filter].value = proxyFilters[filter] || null;
}
this.loading = true; this.loading = true;
let params = { this.lazyParams.filters = this.filters;
first: 0, this.loadLazyData();
rows: this.$refs.dt.rows,
sortField: null,
sortOrder: null,
filters: this.lazyFilters
};
setTimeout(() => {
this.customerService.getCustomers({lazyEvent: JSON.stringify( params )}).then(data => {
this.customers = data.customers;
this.totalRecords = data.totalRecords;
this.loading = false;
});
}, 1000);
} }
} }
} }
@ -186,8 +158,13 @@ export default {
loading: false, loading: false,
totalRecords: 0, totalRecords: 0,
customers: null, customers: null,
filters: {}, filters: {
lazyFilters: {}, 'name': {value: '', matchMode: 'contains'},
'country.name': {value: '', matchMode: 'contains'},
'company': {value: '', matchMode: 'contains'},
'representative.name': {value: '', matchMode: 'contains'},
},
lazyParams: {},
columns: [ columns: [
{field: 'name', header: 'Name'}, {field: 'name', header: 'Name'},
{field: 'country.name', header: 'Country'}, {field: 'country.name', header: 'Country'},
@ -203,40 +180,22 @@ export default {
mounted() { mounted() {
this.loading = true; this.loading = true;
this.customerService.getCustomers({lazyEvent: JSON.stringify({first: 0, rows: this.$refs.dt.rows})}).then(data => { this.lazyParams = {
this.customers = data.customers; first: 0,
this.totalRecords = data.totalRecords; rows: this.$refs.dt.rows,
this.loading = false; sortField: null,
}); sortOrder: null,
filters: this.filters
};
const filters = {}; this.loadLazyData();
for(let i=0; i<this.columns.length; i++) {
let obj = {};
obj["matchMode"] = this.$refs[this.columns[i].field].filterMatchMode || "startsWith";
obj["value"] = null;
filters[this.columns[i].field] = obj;
}
this.lazyFilters = filters;
}, },
methods: { methods: {
loadLazyData(event) { loadLazyData() {
const proxyFilters = JSON.parse(JSON.stringify(this.filters));
for(let filter in proxyFilters) {
this.lazyFilters[filter].value = proxyFilters[filter] || null;
}
this.loading = true; this.loading = true;
let params = {
first: event.first,
rows: event.rows,
sortField: event.sortField,
sortOrder: event.sortOrder,
filters: this.lazyFilters
};
setTimeout(() => { setTimeout(() => {
this.customerService.getCustomers({lazyEvent: JSON.stringify( params )}).then(data => { this.customerService.getCustomers({lazyEvent: JSON.stringify( this.lazyParams )}).then(data => {
this.customers = data.customers; this.customers = data.customers;
this.totalRecords = data.totalRecords; this.totalRecords = data.totalRecords;
this.loading = false; this.loading = false;
@ -244,35 +203,18 @@ export default {
}, 1000); }, 1000);
}, },
onPage(event) { onPage(event) {
this.loadLazyData(event); this.lazyParams = event;
this.loadLazyData();
}, },
onSort(event) { onSort(event) {
this.loadLazyData(event); this.lazyParams = event;
this.loadLazyData();
}, },
onFilter(event) { onFilter(event) {
if(event.keyCode === 13) { if (event.keyCode === 13) {
// proxy to object
const proxyFilters = JSON.parse(JSON.stringify(this.filters));
for(let filter in proxyFilters) {
this.lazyFilters[filter].value = proxyFilters[filter] || null;
}
this.loading = true; this.loading = true;
let params = { this.lazyParams.filters = this.filters;
first: 0, this.loadLazyData();
rows: this.$refs.dt.rows,
sortField: null,
sortOrder: null,
filters: this.lazyFilters
};
setTimeout(() => {
this.customerService.getCustomers({lazyEvent: JSON.stringify( params )}).then(data => {
this.customers = data.customers;
this.totalRecords = data.totalRecords;
this.loading = false;
});
}, 1000);
} }
} }
} }