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:
Christophe 2022-04-26 10:09:16 +02:00
parent 0e26f39ef3
commit c51cc5463e
4 changed files with 52 additions and 6 deletions

View file

@ -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 :

View file

@ -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);

View file

@ -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);

View file

@ -11,6 +11,9 @@
"crayons":{ "crayons":{
"titre" : "article" "titre" : "article"
}, },
"ordreCol" : {
"titre" : "desc",
}
"filtreCol" : { "filtreCol" : {
"statut" : "select", "statut" : "select",
"titre": "input" "titre": "input"