ajout dans le header un cle classes pour ajouter des classes spécifiques à certaines colonnes
This commit is contained in:
parent
1fb1f0ef0c
commit
7a603340ee
3 changed files with 16 additions and 4 deletions
|
|
@ -152,6 +152,7 @@ let monTableau = {
|
|||
table: [],
|
||||
header: [],
|
||||
crayons: [],
|
||||
classes: [],
|
||||
search: '',
|
||||
page: 1,
|
||||
parPage: this.tparpage[0],
|
||||
|
|
@ -200,6 +201,7 @@ let monTableau = {
|
|||
{
|
||||
header: this.header,
|
||||
crayons: this.crayons,
|
||||
classes: this.classes,
|
||||
},
|
||||
],
|
||||
...this.table,
|
||||
|
|
@ -219,6 +221,7 @@ let monTableau = {
|
|||
let config = data.shift();
|
||||
this.header = config.header;
|
||||
this.crayons = config.crayons;
|
||||
this.classes = config.classes;
|
||||
this.table = data;
|
||||
if (data.length && data[0].search) {
|
||||
this.champ_search = 'search';
|
||||
|
|
@ -232,6 +235,7 @@ let monTableau = {
|
|||
let config = data.shift();
|
||||
this.header = config.header;
|
||||
this.crayons = config.crayons;
|
||||
this.classes = config.classes;
|
||||
if (parseInt(id) > 0) {
|
||||
let i = this.table.findIndex((ligne) => ligne.html.id === parseInt(id));
|
||||
Vue.set(this.table, i, data[0]);
|
||||
|
|
@ -339,7 +343,7 @@ let monTableau = {
|
|||
<table class="table table--zebra">
|
||||
<thead>
|
||||
<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 class="iconeTri">
|
||||
<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>
|
||||
<tbody>
|
||||
<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>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
|
|||
|
|
@ -194,6 +194,7 @@ var monTableau = {
|
|||
table: [],
|
||||
header: [],
|
||||
crayons: [],
|
||||
classes: [],
|
||||
search: '',
|
||||
page: 1,
|
||||
parPage: this.tparpage[0],
|
||||
|
|
@ -236,7 +237,8 @@ var monTableau = {
|
|||
var $table = [];
|
||||
$table = [{
|
||||
header: this.header,
|
||||
crayons: this.crayons
|
||||
crayons: this.crayons,
|
||||
classes: this.classes
|
||||
}].concat(_toConsumableArray(this.table));
|
||||
localStorage.setItem('gamuTable', JSON.stringify($table));
|
||||
}
|
||||
|
|
@ -257,6 +259,7 @@ var monTableau = {
|
|||
var config = data.shift();
|
||||
this.header = config.header;
|
||||
this.crayons = config.crayons;
|
||||
this.classes = config.classes;
|
||||
this.table = data;
|
||||
|
||||
if (data.length && data[0].search) {
|
||||
|
|
@ -273,6 +276,7 @@ var monTableau = {
|
|||
var config = data.shift();
|
||||
_this2.header = config.header;
|
||||
_this2.crayons = config.crayons;
|
||||
_this2.classes = config.classes;
|
||||
|
||||
if (parseInt(id) > 0) {
|
||||
var i = _this2.table.findIndex(function (ligne) {
|
||||
|
|
@ -373,7 +377,7 @@ var monTableau = {
|
|||
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({
|
||||
el: '#app',
|
||||
|
|
|
|||
|
|
@ -21,6 +21,10 @@
|
|||
"titre" : "souscription",
|
||||
"prenom" : "souscription"
|
||||
}
|
||||
"classes":{
|
||||
"titre": "toto",
|
||||
"email":"toto"
|
||||
}
|
||||
},
|
||||
<BOUCLE_souscriptions(SOUSCRIPTIONS){id_souscription?}{!par id_souscription}{tout}{','}>
|
||||
[(#SET{statut,
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue