SPIP/gamutable
SPIP/gamutable
4
0
Fork 0
Code Issues 2 Pull requests Projects Releases Wiki Activity

ajout dans le header un cle classes pour ajouter des classes spécifiques à certaines colonnes

Browse source
This commit is contained in:
Christophe 2020-06-18 12:24:29 +02:00
parent 1fb1f0ef0c
commit 7a603340ee
3 changed files with 16 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
js/gamutable.es6.js
View file

@ -152,6 +152,7 @@ let monTableau = {
table: [], table: [],
header: [], header: [],
crayons: [], crayons: [],
classes: [],
search: '', search: '',
page: 1, page: 1,
parPage: this.tparpage[0], parPage: this.tparpage[0],
@ -200,6 +201,7 @@ let monTableau = {
{ {
header: this.header, header: this.header,
crayons: this.crayons, crayons: this.crayons,
classes: this.classes,
}, },
], ],
...this.table, ...this.table,
@ -219,6 +221,7 @@ let monTableau = {
let config = data.shift(); let config = data.shift();
this.header = config.header; this.header = config.header;
this.crayons = config.crayons; this.crayons = config.crayons;
this.classes = config.classes;
this.table = data; this.table = data;
if (data.length && data[0].search) { if (data.length && data[0].search) {
this.champ_search = 'search'; this.champ_search = 'search';
@ -232,6 +235,7 @@ let monTableau = {
let config = data.shift(); let config = data.shift();
this.header = config.header; this.header = config.header;
this.crayons = config.crayons; this.crayons = config.crayons;
this.classes = config.classes;
if (parseInt(id) > 0) { if (parseInt(id) > 0) {
let i = this.table.findIndex((ligne) => ligne.html.id === parseInt(id)); let i = this.table.findIndex((ligne) => ligne.html.id === parseInt(id));
Vue.set(this.table, i, data[0]); Vue.set(this.table, i, data[0]);
@ -339,7 +343,7 @@ let monTableau = {
<table class="table table--zebra"> <table class="table table--zebra">
<thead> <thead>
<tr> <tr>
<th v-for="(label,head,i) in header" :key="'head_'+i" :class="head"> <th v-for="(label,head,i) in header" :key="'head_'+i" :class="[head,classes[head]]">
<span v-html="label"></span> <span v-html="label"></span>
<span class="iconeTri"> <span class="iconeTri">
<i class="fa fa-sort-asc fa-sort-up" :class="ordreActif(head, 'asc')" aria-hidden="true" @click.stop="tri(head,'asc')"></i> <i class="fa fa-sort-asc fa-sort-up" :class="ordreActif(head, 'asc')" aria-hidden="true" @click.stop="tri(head,'asc')"></i>
@ -350,7 +354,7 @@ let monTableau = {
</thead> </thead>
<tbody> <tbody>
<tr v-for="l in tableau" :key="l.html.id" :class="selectTr.indexOf(l.html.id) !== -1 ? 'select' : ''" > <tr v-for="l in tableau" :key="l.html.id" :class="selectTr.indexOf(l.html.id) !== -1 ? 'select' : ''" >
<td v-for="(td,name, i) in l.html" :key="'td_'+i" :class="[afficher_crayons(name,l.html.id), name]" v-html="td" @click="selectLigne(l.html.id,name)"> <td v-for="(td,name, i) in l.html" :key="'td_'+i" :class="[afficher_crayons(name,l.html.id), name, classes[name]]" v-html="td" @click="selectLigne(l.html.id,name)">
</td> </td>
</tr> </tr>
</tbody> </tbody>

8
js/gamutable.js
View file

@ -194,6 +194,7 @@ var monTableau = {
table: [], table: [],
header: [], header: [],
crayons: [], crayons: [],
classes: [],
search: '', search: '',
page: 1, page: 1,
parPage: this.tparpage[0], parPage: this.tparpage[0],
@ -236,7 +237,8 @@ var monTableau = {
var $table = []; var $table = [];
$table = [{ $table = [{
header: this.header, header: this.header,
crayons: this.crayons crayons: this.crayons,
classes: this.classes
}].concat(_toConsumableArray(this.table)); }].concat(_toConsumableArray(this.table));
localStorage.setItem('gamuTable', JSON.stringify($table)); localStorage.setItem('gamuTable', JSON.stringify($table));
} }
@ -257,6 +259,7 @@ var monTableau = {
var config = data.shift(); var config = data.shift();
this.header = config.header; this.header = config.header;
this.crayons = config.crayons; this.crayons = config.crayons;
this.classes = config.classes;
this.table = data; this.table = data;
if (data.length && data[0].search) { if (data.length && data[0].search) {
@ -273,6 +276,7 @@ var monTableau = {
var config = data.shift(); var config = data.shift();
_this2.header = config.header; _this2.header = config.header;
_this2.crayons = config.crayons; _this2.crayons = config.crayons;
_this2.classes = config.classes;
if (parseInt(id) > 0) { if (parseInt(id) > 0) {
var i = _this2.table.findIndex(function (ligne) { var i = _this2.table.findIndex(function (ligne) {
@ -373,7 +377,7 @@ var monTableau = {
exporterCSV($csv, this.delimitercsv, this.namecsv); exporterCSV($csv, this.delimitercsv, this.namecsv);
} }
}, },
template: "\n\t<div class=\"gamutable\">\n\t\t<div class=\"gamutable--surTable\">\n\t\t\t<select id=\"parPage\" v-model=\"parPageSelect\">\n\t\t\t\t<option v-for=\"v in tparpage\" :key=\"v\">{{v}}</option>\n\t\t\t</select>\n\t\t\t<input class=\"gamutable--rechercher\" type=\"text\" v-model=\"search\" placeholder=\"Rechercher\">\n\t\t\t<button class=\"btn gamutable--resetOrderBy\" type=\"button\" @click.stop=\"resetTri()\">R\xE9initialiser les tris des colonnes</button>\n\t\t\t<button class=\"btn gamutable--exportCSV\" type=\"button\" @click.stop=\"exportCSV()\"\n\t\t\t\ttitle=\"Exporter le tableau affich\xE9 en csv\"\n\t\t\t>\n\t\t\t\t<i class=\"fa fa-file-excel-o fas fa-file-csv\" aria-hidden=\"true\"></i>\n\t\t\t</button>\n\t\t\t<span v-show=\"chargement\" class=\"rouge\">\n\t\t\t\t<i class=\"fa fa-refresh fa-spin fa-fw rouge fas fa-sync fa-spin\"></i>\n\t\t\t\tMise \xE0 jour de la base de donn\xE9e\n\t\t\t</span>\n\t\t\t<span v-show=\"!chargement\" class=\"verte\">\n\t\t\t\t<i class=\"fa fa-check\"></i>\n\t\t\t\tBase de donn\xE9es synchronis\xE9e\n\t\t\t</span>\n\t\t</div>\n\t\t<table class=\"table table--zebra\">\n\t\t\t<thead>\n\t\t\t\t<tr>\n\t\t\t\t\t<th v-for=\"(label,head,i) in header\" :key=\"'head_'+i\" :class=\"head\">\n\t\t\t\t\t\t<span v-html=\"label\"></span>\n\t\t\t\t\t\t<span class=\"iconeTri\">\n\t\t\t\t\t\t\t<i class=\"fa fa-sort-asc fa-sort-up\" :class=\"ordreActif(head, 'asc')\" aria-hidden=\"true\" @click.stop=\"tri(head,'asc')\"></i>\n\t\t\t\t\t\t\t<i class=\"fa fa-sort-desc fa-sort-down\":class=\"ordreActif(head, 'desc')\" aria-hidden=\"true\" @click.stop=\"tri(head,'desc')\" ></i>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</th>\n\t\t\t\t</tr>\n\t\t\t</thead>\n\t\t\t<tbody>\n\t\t\t\t<tr v-for=\"l in tableau\" :key=\"l.html.id\" :class=\"selectTr.indexOf(l.html.id) !== -1 ? 'select' : ''\" >\n\t\t\t\t\t<td v-for=\"(td,name, i) in l.html\" :key=\"'td_'+i\" :class=\"[afficher_crayons(name,l.html.id), name]\" v-html=\"td\" @click=\"selectLigne(l.html.id,name)\">\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t</tbody>\n\t\t</table>\n\t\t<div class=\"gamutable--sousTable\">\n\t\t\t<div class=\"gamutable-nbrMax\">{{tableau.length}} \xE9l\xE9ments</div>\n\t\t\t<div class=\"gamutable--pagination\">\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-if=\"page != 1\" @click=\"page=1\"> Start </button>\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-if=\"page != 1\" @click=\"page--\"> Previous </button>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-for=\"pageNumber in pages.slice(page-1, page+5)\" @click=\"page = pageNumber\"> {{pageNumber}} </button>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" @click=\"page++\" v-if=\"page < pages.length\" class=\"page-link\"> Next </button>\n\t\t\t\t\t<button type=\"button\" @click=\"page=pages.length\" v-if=\"page < pages.length\" class=\"page-link\"> Last </button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>" template: "\n\t<div class=\"gamutable\">\n\t\t<div class=\"gamutable--surTable\">\n\t\t\t<select id=\"parPage\" v-model=\"parPageSelect\">\n\t\t\t\t<option v-for=\"v in tparpage\" :key=\"v\">{{v}}</option>\n\t\t\t</select>\n\t\t\t<input class=\"gamutable--rechercher\" type=\"text\" v-model=\"search\" placeholder=\"Rechercher\">\n\t\t\t<button class=\"btn gamutable--resetOrderBy\" type=\"button\" @click.stop=\"resetTri()\">R\xE9initialiser les tris des colonnes</button>\n\t\t\t<button class=\"btn gamutable--exportCSV\" type=\"button\" @click.stop=\"exportCSV()\"\n\t\t\t\ttitle=\"Exporter le tableau affich\xE9 en csv\"\n\t\t\t>\n\t\t\t\t<i class=\"fa fa-file-excel-o fas fa-file-csv\" aria-hidden=\"true\"></i>\n\t\t\t</button>\n\t\t\t<span v-show=\"chargement\" class=\"rouge\">\n\t\t\t\t<i class=\"fa fa-refresh fa-spin fa-fw rouge fas fa-sync fa-spin\"></i>\n\t\t\t\tMise \xE0 jour de la base de donn\xE9e\n\t\t\t</span>\n\t\t\t<span v-show=\"!chargement\" class=\"verte\">\n\t\t\t\t<i class=\"fa fa-check\"></i>\n\t\t\t\tBase de donn\xE9es synchronis\xE9e\n\t\t\t</span>\n\t\t</div>\n\t\t<table class=\"table table--zebra\">\n\t\t\t<thead>\n\t\t\t\t<tr>\n\t\t\t\t\t<th v-for=\"(label,head,i) in header\" :key=\"'head_'+i\" :class=\"[head,classes[head]]\">\n\t\t\t\t\t\t<span v-html=\"label\"></span>\n\t\t\t\t\t\t<span class=\"iconeTri\">\n\t\t\t\t\t\t\t<i class=\"fa fa-sort-asc fa-sort-up\" :class=\"ordreActif(head, 'asc')\" aria-hidden=\"true\" @click.stop=\"tri(head,'asc')\"></i>\n\t\t\t\t\t\t\t<i class=\"fa fa-sort-desc fa-sort-down\":class=\"ordreActif(head, 'desc')\" aria-hidden=\"true\" @click.stop=\"tri(head,'desc')\" ></i>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</th>\n\t\t\t\t</tr>\n\t\t\t</thead>\n\t\t\t<tbody>\n\t\t\t\t<tr v-for=\"l in tableau\" :key=\"l.html.id\" :class=\"selectTr.indexOf(l.html.id) !== -1 ? 'select' : ''\" >\n\t\t\t\t\t<td v-for=\"(td,name, i) in l.html\" :key=\"'td_'+i\" :class=\"[afficher_crayons(name,l.html.id), name, classes[name]]\" v-html=\"td\" @click=\"selectLigne(l.html.id,name)\">\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t</tbody>\n\t\t</table>\n\t\t<div class=\"gamutable--sousTable\">\n\t\t\t<div class=\"gamutable-nbrMax\">{{tableau.length}} \xE9l\xE9ments</div>\n\t\t\t<div class=\"gamutable--pagination\">\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-if=\"page != 1\" @click=\"page=1\"> Start </button>\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-if=\"page != 1\" @click=\"page--\"> Previous </button>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-for=\"pageNumber in pages.slice(page-1, page+5)\" @click=\"page = pageNumber\"> {{pageNumber}} </button>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" @click=\"page++\" v-if=\"page < pages.length\" class=\"page-link\"> Next </button>\n\t\t\t\t\t<button type=\"button\" @click=\"page=pages.length\" v-if=\"page < pages.length\" class=\"page-link\"> Last </button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>"
}; };
var app = new Vue({ var app = new Vue({
el: '#app', el: '#app',

4
json_gamutable.json.html
View file

@ -21,6 +21,10 @@
"titre" : "souscription", "titre" : "souscription",
"prenom" : "souscription" "prenom" : "souscription"
} }
"classes":{
"titre": "toto",
"email":"toto"
}
}, },
<BOUCLE_souscriptions(SOUSCRIPTIONS){id_souscription?}{!par id_souscription}{tout}{','}> <BOUCLE_souscriptions(SOUSCRIPTIONS){id_souscription?}{!par id_souscription}{tout}{','}>
[(#SET{statut, [(#SET{statut,