grosse amélioration de perf, on rechargement apres crayons / action / cvt, on peut appeler la fonction app.rechargerJson(id) avec un id, pour limiter le recalcule de tout le json
This commit is contained in:
parent
8a4cf1991e
commit
b695e361c6
4 changed files with 80 additions and 30 deletions
23
README.md
23
README.md
|
|
@ -17,20 +17,21 @@ Choisir entre la version minifiée de vuejs (sans le debug) ou la version de dev
|
|||
3. Pour utliser **les actions** :
|
||||
1. dans `json_gamutable.json.html`
|
||||
```html
|
||||
"statut" : [(#INCLURE{fond=inclure/statut,id_de_mon_objet}|json_encode)],
|
||||
```
|
||||
|
||||
2. dans `inclure/statut.html`, bien ajouter au lien : `class="url_action"`
|
||||
```html
|
||||
<BOUCLE_a(SOUSCRIPTIONS){id_souscription}{tout}>
|
||||
[(#SET{statut,
|
||||
#SET{args,#ID_SOUSCRIPTION|concat{-}|concat{#STATUT}}
|
||||
<a
|
||||
class="url_action"
|
||||
href="[(#URL_ACTION_AUTEUR{changer_statut_souscription,#GET{args}})]">
|
||||
#STATUT
|
||||
<a class="url_action" data-id="#ID_SOUSCRIPTION" href="[(#URL_ACTION_AUTEUR{changer_statut_souscription,#GET{args}})]">
|
||||
[(#STATUT|!={publie}|oui)
|
||||
<i title="Souscription en attente" class="fa fa-check fa-2x orange" aria-hidden="true"></i>
|
||||
]
|
||||
[(#STATUT|=={publie}|oui)
|
||||
<i title="Souscription validée" class="fa fa-check fa-2x verte" aria-hidden="true"></i>
|
||||
]
|
||||
</a>
|
||||
</BOUCLE_a>
|
||||
})]
|
||||
"statut" : [(#GET{statut}|json_encode)],
|
||||
```
|
||||
> il faut ajouter data-id="" si on veut recharger que cette ligne
|
||||
|
||||
4. Pour utiliser **les crayons**, il faut utiliser le pipeline `crayons_vue_affichage_final`
|
||||
```php
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -6,12 +6,17 @@ jQuery(function() {
|
|||
$('td').css('cursor', 'wait');
|
||||
$('a').css('cursor', 'wait');
|
||||
let url = $(this).attr('href');
|
||||
let id = $(this).data('id');
|
||||
console.time('Chargement de VueJs APRES Ajax');
|
||||
$.ajax({
|
||||
url: url,
|
||||
async: true
|
||||
}).done(function() {
|
||||
app.rechargerJson();
|
||||
if (parseInt(id) > 0) {
|
||||
app.rechargerJson(id);
|
||||
} else {
|
||||
app.rechargerJson();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -132,14 +137,23 @@ let monTableau = {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
chargerJson() {
|
||||
fetch(this.apiuri)
|
||||
chargerJson(id) {
|
||||
let url = this.apiuri;
|
||||
if (parseInt(id) > 0) {
|
||||
url += '&id=' + id;
|
||||
}
|
||||
fetch(url)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
let config = data.shift();
|
||||
this.header = config.header;
|
||||
this.crayons = config.crayons;
|
||||
this.table = data;
|
||||
if (parseInt(id) > 0) {
|
||||
let i = this.table.findIndex(ligne => ligne.id === parseInt(id));
|
||||
Vue.set(this.table, i, data[0]);
|
||||
} else {
|
||||
this.table = data;
|
||||
}
|
||||
Vue.nextTick(function() {
|
||||
$('html').css('cursor', 'auto');
|
||||
$('td').css('cursor', 'auto');
|
||||
|
|
@ -243,8 +257,8 @@ let app = new Vue({
|
|||
el: '#app',
|
||||
components: { monTableau },
|
||||
methods: {
|
||||
rechargerJson() {
|
||||
this.$refs.montableau.chargerJson();
|
||||
rechargerJson(id) {
|
||||
this.$refs.montableau.chargerJson(id);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -16,12 +16,17 @@ jQuery(function () {
|
|||
$('td').css('cursor', 'wait');
|
||||
$('a').css('cursor', 'wait');
|
||||
var url = $(this).attr('href');
|
||||
var id = $(this).data('id');
|
||||
console.time('Chargement de VueJs APRES Ajax');
|
||||
$.ajax({
|
||||
url: url,
|
||||
async: true
|
||||
}).done(function () {
|
||||
app.rechargerJson();
|
||||
if (parseInt(id) > 0) {
|
||||
app.rechargerJson(id);
|
||||
} else {
|
||||
app.rechargerJson();
|
||||
}
|
||||
});
|
||||
});
|
||||
$('#app').on('click', '.modalbox', function (e) {
|
||||
|
|
@ -153,16 +158,32 @@ var monTableau = {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
chargerJson: function chargerJson() {
|
||||
chargerJson: function chargerJson(id) {
|
||||
var _this2 = this;
|
||||
|
||||
fetch(this.apiuri).then(function (response) {
|
||||
var url = this.apiuri;
|
||||
|
||||
if (parseInt(id) > 0) {
|
||||
url += '&id=' + id;
|
||||
}
|
||||
|
||||
fetch(url).then(function (response) {
|
||||
return response.json();
|
||||
}).then(function (data) {
|
||||
var config = data.shift();
|
||||
_this2.header = config.header;
|
||||
_this2.crayons = config.crayons;
|
||||
_this2.table = data;
|
||||
|
||||
if (parseInt(id) > 0) {
|
||||
var i = _this2.table.findIndex(function (ligne) {
|
||||
return ligne.id === parseInt(id);
|
||||
});
|
||||
|
||||
Vue.set(_this2.table, i, data[0]);
|
||||
} else {
|
||||
_this2.table = data;
|
||||
}
|
||||
|
||||
Vue.nextTick(function () {
|
||||
$('html').css('cursor', 'auto');
|
||||
$('td').css('cursor', 'auto');
|
||||
|
|
@ -228,8 +249,8 @@ var app = new Vue({
|
|||
monTableau: monTableau
|
||||
},
|
||||
methods: {
|
||||
rechargerJson: function rechargerJson() {
|
||||
this.$refs.montableau.chargerJson();
|
||||
rechargerJson: function rechargerJson(id) {
|
||||
this.$refs.montableau.chargerJson(id);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
#HTTP_HEADER{Content-Type: application/json; charset=#CHARSET}
|
||||
[(#ENV{id}|setenv{id_souscription})]
|
||||
[{
|
||||
"header":{
|
||||
"id": "_",
|
||||
|
|
@ -21,22 +22,35 @@
|
|||
"prenom" : "souscription"
|
||||
}
|
||||
},
|
||||
<BOUCLE_souscriptions(SOUSCRIPTIONS){','}{0,12}>
|
||||
<BOUCLE_souscriptions(SOUSCRIPTIONS){id_souscription?}{!par id_souscription}{tout}{','}>
|
||||
[(#SET{statut,
|
||||
#SET{args,#ID_SOUSCRIPTION|concat{-}|concat{#STATUT}}
|
||||
<a class="url_action" data-id="#ID_SOUSCRIPTION" href="[(#URL_ACTION_AUTEUR{changer_statut_souscription,#GET{args}})]">
|
||||
[(#STATUT|!={publie}|oui)
|
||||
<i title="Souscription en attente" class="fa fa-check fa-2x orange" aria-hidden="true"></i>
|
||||
]
|
||||
[(#STATUT|=={publie}|oui)
|
||||
<i title="Souscription validée" class="fa fa-check fa-2x verte" aria-hidden="true"></i>
|
||||
]
|
||||
</a>
|
||||
})]
|
||||
{
|
||||
"id": #ID_SOUSCRIPTION,
|
||||
"titre" : [(#TITRE|json_encode)],
|
||||
"modif" : [(#VAL{<a class="modalbox" href="[(#URL_PAGE{souscrire}|parametre_url{id_souscription,#ID_SOUSCRIPTION}|parametre_url{redirect,gamutable})]"><i class="fa fa-pencil"></i></a>}|json_encode)],
|
||||
"date" : [(#DATE|affdate{d/m/Y}|json_encode)],
|
||||
"statut" : [(#INCLURE{fond=js/statut,statut,id_souscription}|json_encode)],
|
||||
"statut" : [(#GET{statut}|json_encode)],
|
||||
"genre" : [(#GENRE|json_encode)],
|
||||
"nom_souscripteur" : [(#NOM_SOUSCRIPTEUR|json_encode)],
|
||||
"prenom" : [(#PRENOM|json_encode)],
|
||||
"date_naissance" : [(#DATE_NAISSANCE|affdate{d/m/Y}|json_encode)],
|
||||
"lieu_naissance" : [(#LIEU_NAISSANCE|json_encode)],
|
||||
"representant_legal" : [(#REPRESENTANT_LEGAL|json_encode)],
|
||||
"qui": [(#VAL{<a class="mediabox" title="Détail du souscripteur" href="[(#URL_PAGE{detail_souscription}|parametre_url{id_souscription,#ID_SOUSCRIPTION}|parametre_url{detail,qui})]"><i class="fa fa-address-book"></i></a>}|json_encode)],
|
||||
"nbr" : [(#NOMBRE)],
|
||||
"montant_part" : [(#MONTANT_PART)],
|
||||
"montant" : [(#MONTANT)],
|
||||
"prix": [(#VAL{<a class="mediabox" title="Détail de la souscription" href="[(#URL_PAGE{detail_souscription}|parametre_url{id_souscription,#ID_SOUSCRIPTION}|parametre_url{detail,prix})]"><i class="fa fa-shopping-cart"></i></a>}|json_encode)],
|
||||
"type" : [(#TYPE|json_encode)],
|
||||
"email" : [(#VAL{<a href="mailto:#EMAIL" target="_blank">#EMAIL</a>}|json_encode)],
|
||||
"telephone" : [(#TELEPHONE|json_encode)],
|
||||
"adresse" : [(#ADRESSE|json_encode)]
|
||||
"ou": [(#VAL{<a class="mediabox" title="Détail des coordonnées" href="[(#URL_PAGE{detail_souscription}|parametre_url{id_souscription,#ID_SOUSCRIPTION}|parametre_url{detail,adresse})]"><i class="fa fa-address-card"></i></a>}|json_encode)]
|
||||
}
|
||||
</BOUCLE_souscriptions>
|
||||
]
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue