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

Merge branch 'prod'

pull/4762/head
tugcekucukoglu 2023-11-06 13:02:45 +03:00
parent 35834ecb64 fd8edc93a1
commit 2b268f9c62
1 changed files with 63 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
doc/datatable/LazyLoadDoc.vue
View File

@ -18,7 +18,7 @@
:value="customers" :value="customers"
lazy lazy
paginator paginator
:first="0" :first="first"
:rows="10" :rows="10"
dataKey="id" dataKey="id"
:totalRecords="totalRecords" :totalRecords="totalRecords"
@ -83,6 +83,7 @@ export default {
customers: null, customers: null,
selectedCustomers: null, selectedCustomers: null,
selectAll: false, selectAll: false,
first: 0,
filters: { filters: {
name: { value: '', matchMode: 'contains' }, name: { value: '', matchMode: 'contains' },
'country.name': { value: '', matchMode: 'contains' }, 'country.name': { value: '', matchMode: 'contains' },
@ -98,7 +99,7 @@ export default {
], ],
code: { code: {
basic: ` basic: `
<DataTable :value="customers" lazy paginator :first="0" :rows="10" v-model:filters="filters" ref="dt" dataKey="id" <DataTable :value="customers" lazy paginator :first="first" :rows="10" v-model:filters="filters" ref="dt" dataKey="id"
:totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort($event)" @filter="onFilter($event)" filterDisplay="row" :totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort($event)" @filter="onFilter($event)" filterDisplay="row"
:globalFilterFields="['name','country.name', 'company', 'representative.name']" :globalFilterFields="['name','country.name', 'company', 'representative.name']"
v-model:selection="selectedCustomers" :selectAll="selectAll" @select-all-change="onSelectAllChange" @row-select="onRowSelect" @row-unselect="onRowUnselect" tableStyle="min-width: 75rem"> v-model:selection="selectedCustomers" :selectAll="selectAll" @select-all-change="onSelectAllChange" @row-select="onRowSelect" @row-unselect="onRowUnselect" tableStyle="min-width: 75rem">
@ -109,6 +110,12 @@ export default {
</template> </template>
</Column> </Column>
<Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" sortable> <Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" sortable>
<template #body="{ data }">
<div class="flex align-items-center gap-2">
<img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
<span>{{ data.country.name }}</span>
</div>
</template>
<template #filter="{filterModel,filterCallback}"> <template #filter="{filterModel,filterCallback}">
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search"/> <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search"/>
</template> </template>
@ -119,6 +126,12 @@ export default {
</template> </template>
</Column> </Column>
<Column field="representative.name" header="Representative" filterField="representative.name" sortable> <Column field="representative.name" header="Representative" filterField="representative.name" sortable>
<template #body="{ data }">
<div class="flex align-items-center gap-2">
<img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
<span>{{ data.representative.name }}</span>
</div>
</template>
<template #filter="{filterModel,filterCallback}"> <template #filter="{filterModel,filterCallback}">
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search"/> <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search"/>
</template> </template>
@ -128,10 +141,10 @@ export default {
options: ` options: `
<template> <template>
<div class="card p-fluid"> <div class="card p-fluid">
<DataTable :value="customers" lazy paginator :first="0" :rows="10" v-model:filters="filters" ref="dt" dataKey="id" <DataTable :value="customers" lazy paginator :first="first" :rows="10" v-model:filters="filters" ref="dt" dataKey="id"
:totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort($event)" @filter="onFilter($event)" filterDisplay="row" :totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort($event)" @filter="onFilter($event)" filterDisplay="row"
:globalFilterFields="['name','country.name', 'company', 'representative.name']" :globalFilterFields="['name','country.name', 'company', 'representative.name']"
v-model:selection="selectedCustomers" :selectAll="selectAll" @select-all-change="onSelectAllChange" @row-select="onRowSelect" @row-unselect="onRowUnselect" tableStyle="min-width: 75rem"> v-model:selection="selectedCustomers" :selectAll="selectAll" @select-all-change="onSelectAllChange" @row-select="onRowSelect" @row-unselect="onRowUnselect" tableStyle="min-width: 75rem">
<Column selectionMode="multiple" headerStyle="width: 3rem"></Column> <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
<Column field="name" header="Name" filterMatchMode="startsWith" sortable> <Column field="name" header="Name" filterMatchMode="startsWith" sortable>
<template #filter="{filterModel,filterCallback}"> <template #filter="{filterModel,filterCallback}">
@ -139,6 +152,12 @@ export default {
</template> </template>
</Column> </Column>
<Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" sortable> <Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" sortable>
<template #body="{ data }">
<div class="flex align-items-center gap-2">
<img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
<span>{{ data.country.name }}</span>
</div>
</template>
<template #filter="{filterModel,filterCallback}"> <template #filter="{filterModel,filterCallback}">
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search"/> <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search"/>
</template> </template>
@ -149,6 +168,12 @@ export default {
</template> </template>
</Column> </Column>
<Column field="representative.name" header="Representative" filterField="representative.name" sortable> <Column field="representative.name" header="Representative" filterField="representative.name" sortable>
<template #body="{ data }">
<div class="flex align-items-center gap-2">
<img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
<span>{{ data.representative.name }}</span>
</div>
</template>
<template #filter="{filterModel,filterCallback}"> <template #filter="{filterModel,filterCallback}">
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search"/> <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search"/>
</template> </template>
@ -168,6 +193,7 @@ export default {
customers: null, customers: null,
selectedCustomers: null, selectedCustomers: null,
selectAll: false, selectAll: false,
first: 0,
filters: { filters: {
'name': {value: '', matchMode: 'contains'}, 'name': {value: '', matchMode: 'contains'},
'country.name': {value: '', matchMode: 'contains'}, 'country.name': {value: '', matchMode: 'contains'},
@ -199,6 +225,7 @@ export default {
methods: { methods: {
loadLazyData() { loadLazyData() {
this.loading = true; this.loading = true;
this.lazyParams = { ...this.lazyParams, first: event?.first || this.first };
setTimeout(() => { setTimeout(() => {
CustomerService.getCustomers({ lazyEvent: JSON.stringify(this.lazyParams) }).then((data) => { CustomerService.getCustomers({ lazyEvent: JSON.stringify(this.lazyParams) }).then((data) => {
@ -210,15 +237,15 @@ export default {
}, },
onPage(event) { onPage(event) {
this.lazyParams = event; this.lazyParams = event;
this.loadLazyData(); this.loadLazyData(event);
}, },
onSort(event) { onSort(event) {
this.lazyParams = event; this.lazyParams = event;
this.loadLazyData(); this.loadLazyData(event);
}, },
onFilter() { onFilter(event) {
this.lazyParams.filters = this.filters; this.lazyParams.filters = this.filters;
this.loadLazyData(); this.loadLazyData(event);
}, },
onSelectAllChange(event) { onSelectAllChange(event) {
const selectAll = event.checked; const selectAll = event.checked;
@ -248,7 +275,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card p-fluid"> <div class="card p-fluid">
<DataTable :value="customers" lazy paginator :first="0" :rows="10" v-model:filters="filters" ref="dt" dataKey="id" <DataTable :value="customers" lazy paginator :first="first" :rows="10" v-model:filters="filters" ref="dt" dataKey="id"
:totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort($event)" @filter="onFilter($event)" filterDisplay="row" :totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort($event)" @filter="onFilter($event)" filterDisplay="row"
:globalFilterFields="['name','country.name', 'company', 'representative.name']" :globalFilterFields="['name','country.name', 'company', 'representative.name']"
v-model:selection="selectedCustomers" :selectAll="selectAll" @select-all-change="onSelectAllChange" @row-select="onRowSelect" @row-unselect="onRowUnselect" tableStyle="min-width: 75rem"> v-model:selection="selectedCustomers" :selectAll="selectAll" @select-all-change="onSelectAllChange" @row-select="onRowSelect" @row-unselect="onRowUnselect" tableStyle="min-width: 75rem">
@ -259,6 +286,12 @@ export default {
</template> </template>
</Column> </Column>
<Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" sortable> <Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" sortable>
<template #body="{ data }">
<div class="flex align-items-center gap-2">
<img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
<span>{{ data.country.name }}</span>
</div>
</template>
<template #filter="{filterModel,filterCallback}"> <template #filter="{filterModel,filterCallback}">
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search"/> <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search"/>
</template> </template>
@ -269,6 +302,12 @@ export default {
</template> </template>
</Column> </Column>
<Column field="representative.name" header="Representative" filterField="representative.name" sortable> <Column field="representative.name" header="Representative" filterField="representative.name" sortable>
<template #body="{ data }">
<div class="flex align-items-center gap-2">
<img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
<span>{{ data.representative.name }}</span>
</div>
</template>
<template #filter="{filterModel,filterCallback}"> <template #filter="{filterModel,filterCallback}">
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search"/> <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search"/>
</template> </template>
@ -301,6 +340,7 @@ const totalRecords = ref(0);
const customers = ref(); const customers = ref();
const selectedCustomers = ref(); const selectedCustomers = ref();
const selectAll = ref(false); const selectAll = ref(false);
const first = ref(0);
const filters = ref({ const filters = ref({
'name': {value: '', matchMode: 'contains'}, 'name': {value: '', matchMode: 'contains'},
'country.name': {value: '', matchMode: 'contains'}, 'country.name': {value: '', matchMode: 'contains'},
@ -315,8 +355,9 @@ const columns = ref([
{field: 'representative.name', header: 'Representative'} {field: 'representative.name', header: 'Representative'}
]); ]);
const loadLazyData = () => { const loadLazyData = (event) => {
loading.value = true; loading.value = true;
lazyParams.value = { ...lazyParams.value, first: event?.first || first.value };
setTimeout(() => { setTimeout(() => {
CustomerService.getCustomers({ lazyEvent: JSON.stringify(lazyParams.value) }).then((data) => { CustomerService.getCustomers({ lazyEvent: JSON.stringify(lazyParams.value) }).then((data) => {
@ -328,15 +369,15 @@ const loadLazyData = () => {
}; };
const onPage = (event) => { const onPage = (event) => {
lazyParams.value = event; lazyParams.value = event;
loadLazyData(); loadLazyData(event);
}; };
const onSort = (event) => { const onSort = (event) => {
lazyParams.value = event; lazyParams.value = event;
loadLazyData(); loadLazyData(event);
}; };
const onFilter = () => { const onFilter = (event) => {
lazyParams.value.filters = filters.value ; lazyParams.value.filters = filters.value ;
loadLazyData(); loadLazyData(event);
}; };
const onSelectAllChange = (event) => { const onSelectAllChange = (event) => {
selectAll.value = event.checked; selectAll.value = event.checked;
@ -398,8 +439,9 @@ const onRowUnselect = () => {
this.loadLazyData(); this.loadLazyData();
}, },
methods: { methods: {
loadLazyData() { loadLazyData(event) {
this.loading = true; this.loading = true;
this.lazyParams = { ...this.lazyParams, first: event?.first || this.first };
setTimeout(() => { setTimeout(() => {
CustomerService.getCustomers({ lazyEvent: JSON.stringify(this.lazyParams) }).then((data) => { CustomerService.getCustomers({ lazyEvent: JSON.stringify(this.lazyParams) }).then((data) => {
@ -411,15 +453,15 @@ const onRowUnselect = () => {
}, },
onPage(event) { onPage(event) {
this.lazyParams = event; this.lazyParams = event;
this.loadLazyData(); this.loadLazyData(event);
}, },
onSort(event) { onSort(event) {
this.lazyParams = event; this.lazyParams = event;
this.loadLazyData(); this.loadLazyData(event);
}, },
onFilter() { onFilter(event) {
this.lazyParams.filters = this.filters; this.lazyParams.filters = this.filters;
this.loadLazyData(); this.loadLazyData(event);
}, },
onSelectAllChange(event) { onSelectAllChange(event) {
const selectAll = event.checked; const selectAll = event.checked;