Add filterField and updated demos
cagataycivici
parent
64d3689690
commit
1f71cb5c51
|
|
@ -4,6 +4,7 @@ export declare class Column extends Vue {
|
|||
columnKey?: any;
|
||||
field?: string;
|
||||
sortField?: string;
|
||||
filterField?: string;
|
||||
sortable?: boolean;
|
||||
header?: any;
|
||||
footer?: any;
|
||||
|
|
|
|||
|
|
@ -14,6 +14,10 @@ export default {
|
|||
type: String,
|
||||
default: null
|
||||
},
|
||||
filterField: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
sortable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
|
|
|
|||
|
|
@ -572,7 +572,7 @@ export default {
|
|||
|
||||
for(let j = 0; j < this.columns.length; j++) {
|
||||
let col = this.columns[j];
|
||||
let columnField = col.field;
|
||||
let columnField = col.filterField || col.field;
|
||||
|
||||
//local
|
||||
if (Object.prototype.hasOwnProperty.call(this.filters, columnField)) {
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@ export default class FilterUtils {
|
|||
}
|
||||
|
||||
for (let i = 0; i < filter.length; i++) {
|
||||
if (filter[i] === value || (value.getTime && filter[i].getTime && value.getTime() === filter[i].getTime())) {
|
||||
if (ObjectUtils.equals(value, filter[i])) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
|
@ -96,7 +96,7 @@ export default class FilterUtils {
|
|||
}
|
||||
|
||||
static lt(value, filter) {
|
||||
if (filter === undefined || filter === null || (filter.trim && filter.trim().length === 0)) {
|
||||
if (filter === undefined || filter === null || (filter.trim && filter.trim().length === 0)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
|
|
@ -111,7 +111,7 @@ export default class FilterUtils {
|
|||
}
|
||||
|
||||
static lte(value, filter) {
|
||||
if (filter === undefined || filter === null || (filter.trim && filter.trim().length === 0)) {
|
||||
if (filter === undefined || filter === null || (filter.trim && filter.trim().length === 0)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
|
|
@ -126,7 +126,7 @@ export default class FilterUtils {
|
|||
}
|
||||
|
||||
static gt(value, filter) {
|
||||
if (filter === undefined || filter === null || (filter.trim && filter.trim().length === 0)) {
|
||||
if (filter === undefined || filter === null || (filter.trim && filter.trim().length === 0)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
|
|
@ -141,7 +141,7 @@ export default class FilterUtils {
|
|||
}
|
||||
|
||||
static gte(value, filter) {
|
||||
if (filter === undefined || filter === null || (filter.trim && filter.trim().length === 0)) {
|
||||
if (filter === undefined || filter === null || (filter.trim && filter.trim().length === 0)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -27,17 +27,17 @@
|
|||
<InputText type="text" v-model="filters['name']" class="p-column-filter" placeholder="Search by name"/>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="country" header="Country" :sortable="true" sortField="country.name">
|
||||
<Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains">
|
||||
<template #body="slotProps">
|
||||
<span class="p-column-title">Country</span>
|
||||
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" />
|
||||
<span style="vertical-align: middle; margin-left: .5em">{{slotProps.data.country.name}}</span>
|
||||
</template>
|
||||
<template #filter>
|
||||
<InputText type="text" v-model="filters['country']" class="p-column-filter" filterMatchMode="contains" placeholder="Search by country"/>
|
||||
<InputText type="text" v-model="filters['country.name']" class="p-column-filter" placeholder="Search by country"/>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="representative" header="Representative" :sortable="true" sortField="representative.name" filterMatchMode="in">
|
||||
<Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in">
|
||||
<template #body="slotProps">
|
||||
<span class="p-column-title">Representative</span>
|
||||
<img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
|
||||
|
|
@ -243,20 +243,9 @@ export default {
|
|||
|
||||
.p-column-filter {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.p-dropdown-car-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
|
||||
img {
|
||||
margin-right: .5em;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-top: .125em;
|
||||
input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1767,7 +1767,13 @@ export default {
|
|||
<td>sortField</td>
|
||||
<td>string</td>
|
||||
<td>null</td>
|
||||
<td>Name of the field to sort data by default.</td>
|
||||
<td>Name of the field to use in sorting.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>filterField</td>
|
||||
<td>string</td>
|
||||
<td>null</td>
|
||||
<td>Name of the field to use in filtering.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>sortOrder</td>
|
||||
|
|
@ -2282,73 +2288,108 @@ export default {
|
|||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/datatabledemo" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<CodeHighlight lang="javascript">
|
||||
{
|
||||
"data": [
|
||||
{
|
||||
"id": 1000,
|
||||
"name": "James Butt",
|
||||
"country": {
|
||||
"name": "Montserrat",
|
||||
"code": "ms"
|
||||
},
|
||||
"company": "Benton, John B Jr",
|
||||
"date": "2018-08-13",
|
||||
"status": "negotiation",
|
||||
"activity": 96,
|
||||
"representative": {
|
||||
"name": "Ioni Bowcher",
|
||||
"image": "ionibowcher.png"
|
||||
}
|
||||
},
|
||||
/...
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<div class="p-card">
|
||||
<div class="p-card-body" style="padding:0">
|
||||
<DataTable :value="cars" class="p-datatable-responsive p-datatable-cars" :selection.sync="selectedCar" selectionMode="single"
|
||||
dataKey="vin" :paginator="true" :rows="10" :filters="filters">
|
||||
<DataTable :value="customers" :paginator="true" class="p-datatable-responsive p-datatable-customers" :rows="10"
|
||||
dataKey="id" :rowHover="true" :selection.sync="selectedCustomers" :filters="filters"
|
||||
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[10,25,50]">
|
||||
<template #header>
|
||||
List of Cars
|
||||
<div class="p-datatable-globalfilter-container">
|
||||
List of Customers
|
||||
<div class="p-datatable-globalfilter-container">
|
||||
<InputText v-model="filters['global']" placeholder="Global Search" />
|
||||
</div>
|
||||
</template>
|
||||
<Column field="vin" header="Vin" :sortable="true">
|
||||
<template #body="slotProps">
|
||||
<span class="p-column-title">Vin</span>
|
||||
{{slotProps.data.vin}}
|
||||
</template>
|
||||
<Column selectionMode="multiple" headerStyle="width: 3em; padding-top: 2.75em"></Column>
|
||||
<Column field="name" header="Name" :sortable="true">
|
||||
<template #filter>
|
||||
<InputText type="text" v-model="filters['vin']" class="p-column-filter" placeholder="Starts with" />
|
||||
<InputText type="text" v-model="filters['name']" class="p-column-filter" placeholder="Search by name"/>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="year" header="Year" :sortable="true" filterMatchMode="contains">
|
||||
<Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains">
|
||||
<template #body="slotProps">
|
||||
<span class="p-column-title">Year</span>
|
||||
{{slotProps.data.year}}
|
||||
<span class="p-column-title">Country</span>
|
||||
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" />
|
||||
<span style="vertical-align: middle; margin-left: .5em">{{slotProps.data.country.name}}</span>
|
||||
</template>
|
||||
<template #filter>
|
||||
<InputText type="text" v-model="filters['year']" class="p-column-filter" placeholder="Contains" />
|
||||
<InputText type="text" v-model="filters['country.name']" class="p-column-filter" placeholder="Search by country"/>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="brand" header="Brand" :sortable="true" filterMatchMode="equals">
|
||||
<Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in">
|
||||
<template #body="slotProps">
|
||||
<span class="p-column-title">Brand</span>
|
||||
<img :alt="slotProps.data.brand" :src="'demo/images/car/' + slotProps.data.brand + '.png'" width="50" style="vertical-align:middle; margin-right: 1em"/>
|
||||
<span style="vertical-align:middle">{{slotProps.data.brand}}</span>
|
||||
<span class="p-column-title">Representative</span>
|
||||
<img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
|
||||
<span style="vertical-align: middle; margin-left: .5em">{{slotProps.data.representative.name}}</span>
|
||||
</template>
|
||||
<template #filter>
|
||||
<Dropdown v-model="filters['brand']" :options="brands" optionLabel="brand" optionValue="value" placeholder="Select a Brand" class="p-column-filter" :showClear="true">
|
||||
<template #option="brandSlotProps">
|
||||
<div class="p-clearfix p-dropdown-car-option">
|
||||
<img :alt="brandSlotProps.option.brand" :src="'demo/images/car/' + brandSlotProps.option.brand + '.png'" />
|
||||
<span>{{brandSlotProps.option.brand}}</span>
|
||||
<template #filter>
|
||||
<MultiSelect v-model="filters['representative']" :options="representatives" optionLabel="name" placeholder="All" class="p-column-filter">
|
||||
<template #option="slotProps">
|
||||
<div class="p-multiselect-representative-option">
|
||||
<img :alt="slotProps.option.name" :src="'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
|
||||
<span style="vertical-align: middle; margin-left: .5em">{{slotProps.option.name}}</span>
|
||||
</div>
|
||||
</template>
|
||||
</MultiSelect>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="date" header="Date" :sortable="true" filterMatchMode="custom" :filterFunction="filterDate">
|
||||
<template #filter>
|
||||
<Calendar v-model="filters['date']" dateFormat="yy-mm-dd" class="p-column-filter" filterMatchMode="equals" placeholder="Registration Date"/>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="status" header="Status" :sortable="true" filterMatchMode="equals">
|
||||
<template #body="slotProps">
|
||||
<span class="p-column-title">Status</span>
|
||||
<span :class="'customer-badge status-' + slotProps.data.status">{{slotProps.data.status}}</span>
|
||||
</template>
|
||||
<template #filter>
|
||||
<Dropdown v-model="filters['status']" :options="statuses" placeholder="Select a Status" class="p-column-filter" :showClear="true">
|
||||
<template #option="slotProps">
|
||||
<span :class="'customer-badge status-' + slotProps.option">{{slotProps.option}}</span>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="color" header="Color" :sortable="true" filterMatchMode="in">
|
||||
<Column field="activity" header="Activity" :sortable="true" filterMatchMode="gte">
|
||||
<template #body="slotProps">
|
||||
<span class="p-column-title">Color</span>
|
||||
{{slotProps.data.color}}
|
||||
<span class="p-column-title">Activity</span>
|
||||
<ProgressBar :value="slotProps.data.activity" :showValue="false" />
|
||||
</template>
|
||||
<template #filter>
|
||||
<MultiSelect v-model="filters['color']" :options="colors" optionLabel="name" optionValue="value" placeholder="Select a Color" class="p-column-filter" />
|
||||
<InputText type="text" v-model="filters['activity']" class="p-column-filter" placeholder="Minimum"/>
|
||||
</template>
|
||||
</Column>
|
||||
<Column headerStyle="width: 8em; text-align: center" bodyStyle="text-align: center">
|
||||
<template #body="slotProps">
|
||||
<span class="p-column-title">Color</span>
|
||||
{{slotProps.data.color}}
|
||||
</template>
|
||||
<Column headerStyle="width: 8em; text-align: center" bodyStyle="text-align: center; overflow: visible">
|
||||
<template #header>
|
||||
<Button type="button" icon="pi pi-cog"></Button>
|
||||
<span class="p-column-title">Options</span>
|
||||
<Button type="button" icon="pi pi-cog" class="p-column-filter p-button-secondary" style="width:auto"></Button>
|
||||
</template>
|
||||
<template #body>
|
||||
<Button type="button" icon="pi pi-search" class="p-button-success" style="margin-right: .5em"></Button>
|
||||
<Button type="button" icon="pi pi-pencil" class="p-button-warning"></Button>
|
||||
<Button type="button" icon="pi pi-cog" class="p-button-secondary"></Button>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
|
|
@ -2358,44 +2399,63 @@ export default {
|
|||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="javascript">
|
||||
import CarService from '../../service/CarService';
|
||||
import CustomerService from '../../service/CustomerService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
cars: null,
|
||||
selectedCar: null,
|
||||
customers: null,
|
||||
selectedCustomers: null,
|
||||
filters: {},
|
||||
brands: [
|
||||
{brand: 'Audi', value: 'Audi'},
|
||||
{brand: 'BMW', value: 'BMW'},
|
||||
{brand: 'Fiat', value: 'Fiat'},
|
||||
{brand: 'Honda', value: 'Honda'},
|
||||
{brand: 'Jaguar', value: 'Jaguar'},
|
||||
{brand: 'Mercedes', value: 'Mercedes'},
|
||||
{brand: 'Renault', value: 'Renault'},
|
||||
{brand: 'Volkswagen', value: 'Volkswagen'},
|
||||
{brand: 'Volvo', value: 'Volvo'}
|
||||
representatives: [
|
||||
{name: "Amy Elsner", image: 'amyelsner.png'},
|
||||
{name: "Anna Fali", image: 'annafali.png'},
|
||||
{name: "Asiya Javayant", image: 'asiyajavayant.png'},
|
||||
{name: "Bernardo Dominic", image: 'bernardodominic.png'},
|
||||
{name: "Elwin Sharvill", image: 'elwinsharvill.png'},
|
||||
{name: "Ioni Bowcher", image: 'ionibowcher.png'},
|
||||
{name: "Ivan Magalhaes",image: 'ivanmagalhaes.png'},
|
||||
{name: "Onyama Limba", image: 'onyamalimba.png'},
|
||||
{name: "Stephen Shaw", image: 'stephenshaw.png'},
|
||||
{name: "XuXue Feng", image: 'xuxuefeng.png'}
|
||||
],
|
||||
colors: [
|
||||
{name: 'White', value: 'White'},
|
||||
{name: 'Green', value: 'Green'},
|
||||
{name: 'Silver', value: 'Silver'},
|
||||
{name: 'Black', value: 'Black'},
|
||||
{name: 'Red', value: 'Red'},
|
||||
{name: 'Maroon', value: 'Maroon'},
|
||||
{name: 'Brown', value: 'Brown'},
|
||||
{name: 'Orange', value: 'Orange'},
|
||||
{name: 'Blue', value: 'Blue'}
|
||||
statuses: [
|
||||
'unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal'
|
||||
]
|
||||
}
|
||||
},
|
||||
carService: null,
|
||||
created() {
|
||||
this.carService = new CarService();
|
||||
this.customerService = new CustomerService();
|
||||
},
|
||||
mounted() {
|
||||
this.carService.getCarsLarge().then(data => this.cars = data);
|
||||
this.customerService.getCustomers().then(data => this.customers = data);
|
||||
},
|
||||
methods: {
|
||||
filterDate(value, filter) {
|
||||
if (filter === undefined || filter === null || (typeof filter === 'string' && filter.trim() === '')) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (value === undefined || value === null) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return value === this.formatDate(filter);
|
||||
},
|
||||
formatDate(date) {
|
||||
let month = date.getMonth() + 1;
|
||||
let day = date.getDate();
|
||||
|
||||
if (month < 10) {
|
||||
month = '0' + month;
|
||||
}
|
||||
|
||||
if (day < 10) {
|
||||
day = '0' + day;
|
||||
}
|
||||
|
||||
return date.getFullYear() + '-' + month + '-' + day;
|
||||
}
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
|
|
|
|||
Loading…
Reference in New Issue