Nouvelle fonctionnalite, dans le json on peut definir l'ordre de tri
d'affichage. plus besoin dans ce cas du critere {par toto}. 2 avantages : 1. cette conf est enregistre en localstorage 2. a l'ajax via les crayons, on garde la meme disposition
This commit is contained in:
parent
0e26f39ef3
commit
c51cc5463e
4 changed files with 52 additions and 6 deletions
|
@ -53,7 +53,7 @@ Choisir entre la version minifiée de vuejs (sans le debug) ou la version de dev
|
||||||
"email":"toto"
|
"email":"toto"
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
- On peut ajouter des tris par colonne soit avec un select soit avec un input
|
- On peut ajouter des filtres par colonne soit avec un select soit avec un input
|
||||||
```json
|
```json
|
||||||
"filtreCol" : {
|
"filtreCol" : {
|
||||||
"statut" : "select",
|
"statut" : "select",
|
||||||
|
@ -61,6 +61,12 @@ Choisir entre la version minifiée de vuejs (sans le debug) ou la version de dev
|
||||||
"prenom": "input"
|
"prenom": "input"
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
- On peut ajouter des ordre de tri par colonne : `asc` ou `desc`
|
||||||
|
```json
|
||||||
|
"ordreCol" : {
|
||||||
|
"nom" : "desc"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
## Utiliser les actions :
|
## Utiliser les actions :
|
||||||
|
|
|
@ -221,6 +221,7 @@ let monTableau = {
|
||||||
header: [],
|
header: [],
|
||||||
crayons: [],
|
crayons: [],
|
||||||
classes: [],
|
classes: [],
|
||||||
|
ordreCol: [],
|
||||||
filtreCol: [],
|
filtreCol: [],
|
||||||
filtreColExist: false,
|
filtreColExist: false,
|
||||||
filtreColType: [],
|
filtreColType: [],
|
||||||
|
@ -257,6 +258,13 @@ let monTableau = {
|
||||||
this.vuebloc = data;
|
this.vuebloc = data;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
setTimeout(() => {
|
||||||
|
if (this.ordreCol) {
|
||||||
|
Object.entries(this.ordreCol).forEach(([col, sens]) => {
|
||||||
|
this.tri(col, sens);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, 500);
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
filtreColVal_visible: function () {
|
filtreColVal_visible: function () {
|
||||||
|
@ -367,6 +375,7 @@ let monTableau = {
|
||||||
crayons: this.crayons,
|
crayons: this.crayons,
|
||||||
classes: this.classes,
|
classes: this.classes,
|
||||||
filtreCol: this.filtreColType,
|
filtreCol: this.filtreColType,
|
||||||
|
ordreCol: this.ordreCol,
|
||||||
};
|
};
|
||||||
localStorage.setItem('header_' + this.nameLocalStorage, JSON.stringify($header));
|
localStorage.setItem('header_' + this.nameLocalStorage, JSON.stringify($header));
|
||||||
|
|
||||||
|
@ -446,6 +455,9 @@ let monTableau = {
|
||||||
if (config.classes !== undefined) {
|
if (config.classes !== undefined) {
|
||||||
this.classes = config.classes;
|
this.classes = config.classes;
|
||||||
}
|
}
|
||||||
|
if (config.ordreCol !== undefined) {
|
||||||
|
this.ordreCol = config.ordreCol;
|
||||||
|
}
|
||||||
let filtreCol = [];
|
let filtreCol = [];
|
||||||
if (config.filtreCol !== undefined) {
|
if (config.filtreCol !== undefined) {
|
||||||
filtreCol = config.filtreCol;
|
filtreCol = config.filtreCol;
|
||||||
|
@ -498,6 +510,9 @@ let monTableau = {
|
||||||
if (config.classes !== undefined) {
|
if (config.classes !== undefined) {
|
||||||
this.classes = config.classes;
|
this.classes = config.classes;
|
||||||
}
|
}
|
||||||
|
if (config.ordreCol !== undefined) {
|
||||||
|
this.ordreCol = config.ordreCol;
|
||||||
|
}
|
||||||
if (parseInt(id) > 0) {
|
if (parseInt(id) > 0) {
|
||||||
if (data.length > 0) {
|
if (data.length > 0) {
|
||||||
let i = trouver_index(this.table, id);
|
let i = trouver_index(this.table, id);
|
||||||
|
|
|
@ -273,6 +273,7 @@ var monTableau = {
|
||||||
header: [],
|
header: [],
|
||||||
crayons: [],
|
crayons: [],
|
||||||
classes: [],
|
classes: [],
|
||||||
|
ordreCol: [],
|
||||||
filtreCol: [],
|
filtreCol: [],
|
||||||
filtreColExist: false,
|
filtreColExist: false,
|
||||||
filtreColType: [],
|
filtreColType: [],
|
||||||
|
@ -312,6 +313,18 @@ var monTableau = {
|
||||||
_this.vuebloc = data;
|
_this.vuebloc = data;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
setTimeout(function () {
|
||||||
|
if (_this.ordreCol) {
|
||||||
|
Object.entries(_this.ordreCol).forEach(function (_ref3) {
|
||||||
|
var _ref4 = _slicedToArray(_ref3, 2),
|
||||||
|
col = _ref4[0],
|
||||||
|
sens = _ref4[1];
|
||||||
|
|
||||||
|
_this.tri(col, sens);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, 500);
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
filtreColVal_visible: function filtreColVal_visible() {
|
filtreColVal_visible: function filtreColVal_visible() {
|
||||||
|
@ -410,7 +423,8 @@ var monTableau = {
|
||||||
header: this.header,
|
header: this.header,
|
||||||
crayons: this.crayons,
|
crayons: this.crayons,
|
||||||
classes: this.classes,
|
classes: this.classes,
|
||||||
filtreCol: this.filtreColType
|
filtreCol: this.filtreColType,
|
||||||
|
ordreCol: this.ordreCol
|
||||||
};
|
};
|
||||||
localStorage.setItem('header_' + this.nameLocalStorage, JSON.stringify($header));
|
localStorage.setItem('header_' + this.nameLocalStorage, JSON.stringify($header));
|
||||||
$table = this.table;
|
$table = this.table;
|
||||||
|
@ -447,10 +461,10 @@ var monTableau = {
|
||||||
var ObfiltreSelect = [];
|
var ObfiltreSelect = [];
|
||||||
|
|
||||||
if (this.filtreColSelected) {
|
if (this.filtreColSelected) {
|
||||||
Object.entries(this.filtreColSelected).forEach(function (_ref3) {
|
Object.entries(this.filtreColSelected).forEach(function (_ref5) {
|
||||||
var _ref4 = _slicedToArray(_ref3, 2),
|
var _ref6 = _slicedToArray(_ref5, 2),
|
||||||
champ = _ref4[0],
|
champ = _ref6[0],
|
||||||
valeurs = _ref4[1];
|
valeurs = _ref6[1];
|
||||||
|
|
||||||
if (!Array.isArray(valeurs)) {
|
if (!Array.isArray(valeurs)) {
|
||||||
valeurs = [valeurs];
|
valeurs = [valeurs];
|
||||||
|
@ -512,6 +526,10 @@ var monTableau = {
|
||||||
this.classes = config.classes;
|
this.classes = config.classes;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (config.ordreCol !== undefined) {
|
||||||
|
this.ordreCol = config.ordreCol;
|
||||||
|
}
|
||||||
|
|
||||||
var filtreCol = [];
|
var filtreCol = [];
|
||||||
|
|
||||||
if (config.filtreCol !== undefined) {
|
if (config.filtreCol !== undefined) {
|
||||||
|
@ -573,6 +591,10 @@ var monTableau = {
|
||||||
_this4.classes = config.classes;
|
_this4.classes = config.classes;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (config.ordreCol !== undefined) {
|
||||||
|
_this4.ordreCol = config.ordreCol;
|
||||||
|
}
|
||||||
|
|
||||||
if (parseInt(id) > 0) {
|
if (parseInt(id) > 0) {
|
||||||
if (data.length > 0) {
|
if (data.length > 0) {
|
||||||
var i = trouver_index(_this4.table, id);
|
var i = trouver_index(_this4.table, id);
|
||||||
|
|
|
@ -11,6 +11,9 @@
|
||||||
"crayons":{
|
"crayons":{
|
||||||
"titre" : "article"
|
"titre" : "article"
|
||||||
},
|
},
|
||||||
|
"ordreCol" : {
|
||||||
|
"titre" : "desc",
|
||||||
|
}
|
||||||
"filtreCol" : {
|
"filtreCol" : {
|
||||||
"statut" : "select",
|
"statut" : "select",
|
||||||
"titre": "input"
|
"titre": "input"
|
||||||
|
|
Loading…
Add table
Reference in a new issue