on ajoute dans le select une option select multi, par defaut select simple

This commit is contained in:
Christophe 2020-11-10 11:23:54 +01:00
parent e287386eac
commit bc2556cbd7
3 changed files with 105 additions and 49 deletions

View file

@ -14,6 +14,7 @@
urlvuebloc="[(#ENV{urlvuebloc})]"
url_sort_asc="#ENV{sort_asc,#GET{sort_asc}}"
url_sort_desc="#ENV{sort_desc,#GET{sort_desc}}"
filtrecolmulti="#ENV{filtrecolmulti,non}"
ref="montableau"
></mon-tableau>
</div>
@ -32,6 +33,7 @@
urlvuebloc="[(#ENV{urlvuebloc_deux})]"
url_sort_asc="[(#ENV{sort_asc,#GET{sort_asc}})]"
url_sort_desc="[(#ENV{sort_desc,#GET{sort_desc}})]"
filtrecolmulti="[(#ENV{filtrecolmulti,non})]"
ref="montableau"
></mon-tableau>
</div>

View file

@ -179,6 +179,9 @@ let monTableau = {
type: String,
default: 'tableau',
},
filtrecolmulti: {
type: String,
},
},
data: function () {
return {
@ -236,8 +239,11 @@ let monTableau = {
Object.keys(this.filtreColSelected).forEach((colName) => {
if (rsearch) {
let colValue = this.filtreColSelected[colName];
if (colValue) {
if (ligne.search[colName] !== colValue) {
if (!Array.isArray(colValue)) {
colValue = [colValue];
}
if (colValue.filter((w) => w.length > 0).length) {
if (colValue.filter((w) => w.length > 0).indexOf(ligne.search[colName]) === -1) {
rsearch = false;
}
}
@ -273,21 +279,26 @@ let monTableau = {
localStorage.setItem(this.nameLocalStorage, JSON.stringify($table));
},
tableau() {
this.filtreCol.forEach((col) => {
let Tval = [''];
this.tableau.forEach((t) => {
let valCol = t.search[col];
if (Tval.indexOf(valCol) === -1) {
Tval.push(valCol);
this.filtreColValOk = true;
}
});
this.filtreColVal[col] = Tval;
});
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// Si on veut filtrer la liste des options dynamique en fonction
// du tri du tableau
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//this.filtreCol.forEach((col) => {
//let Tval = [''];
//this.tableau.forEach((t) => {
//let valCol = t.search[col];
//if (Tval.indexOf(valCol) === -1) {
//Tval.push(valCol);
//this.filtreColValOk = true;
//}
//});
//this.filtreColVal[col] = Tval;
//});
},
},
methods: {
selectValCol() {
//console.log(this.filtreColSelected);
this.filtreColModif++;
},
calculer_nameLocalStorage() {
@ -346,6 +357,16 @@ let monTableau = {
}
if (config.filtreCol !== undefined) {
this.filtreCol = config.filtreCol;
this.filtreCol.forEach((col) => {
let Tval = [''];
this.table.forEach((t) => {
let valCol = t.search[col];
if (Tval.indexOf(valCol) === -1) {
Tval.push(valCol);
}
});
this.filtreColVal[col] = Tval;
});
}
Vue.nextTick(() => {
this.chargement = false;
@ -512,7 +533,16 @@ let monTableau = {
<tr v-if="filtreCol.length" class="filtreColonne">
<th v-for="(label,head,i) in header" :key="'filtreCol_'+i">
<div v-if="filtreCol.indexOf(head) !== -1" :id="'filtreCol_'+head">
<select class="filtrerCol" v-model="filtreColSelected[head]">
<select class="filtrerCol" v-model="filtreColSelected[head]" v-if="filtrecolmulti !== 'non'" multiple>
<option
v-for="(option,j) in filtreColVal[head]"
:value="option"
@click="selectValCol"
>
{{j === 0 ? "Tous" : option}}
</option>
</select>
<select class="filtrerCol" v-model="filtreColSelected[head]" v-else>
<option
v-for="(option,j) in filtreColVal[head]"
:value="option"

File diff suppressed because one or more lines are too long