si on clique sur un id de la col id, on selectionne / deselectionne la ligne
This commit is contained in:
parent
e772eb9260
commit
8974f899f0
3 changed files with 37 additions and 17 deletions
|
|
@ -22,3 +22,10 @@
|
|||
.iconeTri .active {
|
||||
color: #000;
|
||||
}
|
||||
#app .active {
|
||||
background-color: rgba(179, 209, 67, 0.47);
|
||||
}
|
||||
|
||||
td.id {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,9 +2,6 @@ jQuery(function() {
|
|||
$('#app').on('click', '.url_action', function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
$('html').css('cursor', 'wait');
|
||||
$('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');
|
||||
|
|
@ -103,7 +100,8 @@ let monTableau = {
|
|||
parPageSelect: this.tparpage[0],
|
||||
pages: [],
|
||||
triOrders: [],
|
||||
triProps: []
|
||||
triProps: [],
|
||||
selectTr: [275]
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -156,9 +154,6 @@ let monTableau = {
|
|||
this.table = data;
|
||||
}
|
||||
Vue.nextTick(function() {
|
||||
$('html').css('cursor', 'auto');
|
||||
$('td').css('cursor', 'auto');
|
||||
$('a').css('cursor', 'pointer');
|
||||
console.timeEnd('Chargement de VueJs APRES Ajax');
|
||||
});
|
||||
})
|
||||
|
|
@ -205,6 +200,17 @@ let monTableau = {
|
|||
this.table = orderBy(this.table, ['id']);
|
||||
this.triOrders = [];
|
||||
this.triProps = [];
|
||||
},
|
||||
selectLigne(id, col) {
|
||||
if (col === 'id' && parseInt(id)) {
|
||||
let i = this.selectTr.indexOf(id);
|
||||
console.log(i);
|
||||
if (i !== -1) {
|
||||
this.selectTr.splice(i, 1);
|
||||
} else {
|
||||
this.selectTr.push(id);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
template: `
|
||||
|
|
@ -229,8 +235,8 @@ let monTableau = {
|
|||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="l in tableau" :key="l.id">
|
||||
<td v-for="(td,name, i) in l" :key="'td_'+i" :class="[afficher_crayons(name,l.id), name]" v-html="td">
|
||||
<tr v-for="l in tableau" :key="l.id" :class="selectTr.indexOf(l.id) !== -1 ? 'active' : ''" >
|
||||
<td v-for="(td,name, i) in l" :key="'td_'+i" :class="[afficher_crayons(name,l.id), name]" v-html="td" @click="selectLigne(l.id,name)">
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
|
|||
|
|
@ -12,9 +12,6 @@ jQuery(function () {
|
|||
$('#app').on('click', '.url_action', function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
$('html').css('cursor', 'wait');
|
||||
$('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');
|
||||
|
|
@ -122,7 +119,8 @@ var monTableau = {
|
|||
parPageSelect: this.tparpage[0],
|
||||
pages: [],
|
||||
triOrders: [],
|
||||
triProps: []
|
||||
triProps: [],
|
||||
selectTr: [275]
|
||||
};
|
||||
},
|
||||
mounted: function mounted() {
|
||||
|
|
@ -186,9 +184,6 @@ var monTableau = {
|
|||
}
|
||||
|
||||
Vue.nextTick(function () {
|
||||
$('html').css('cursor', 'auto');
|
||||
$('td').css('cursor', 'auto');
|
||||
$('a').css('cursor', 'pointer');
|
||||
console.timeEnd('Chargement de VueJs APRES Ajax');
|
||||
});
|
||||
}).catch(function (error) {
|
||||
|
|
@ -240,9 +235,21 @@ var monTableau = {
|
|||
this.table = orderBy(this.table, ['id']);
|
||||
this.triOrders = [];
|
||||
this.triProps = [];
|
||||
},
|
||||
selectLigne: function selectLigne(id, col) {
|
||||
if (col === 'id' && parseInt(id)) {
|
||||
var i = this.selectTr.indexOf(id);
|
||||
console.log(i);
|
||||
|
||||
if (i !== -1) {
|
||||
this.selectTr.splice(i, 1);
|
||||
} else {
|
||||
this.selectTr.push(id);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
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</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\" :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\":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.id\">\n\t\t\t\t\t<td v-for=\"(td,name, i) in l\" :key=\"'td_'+i\" :class=\"[afficher_crayons(name,l.id), name]\" v-html=\"td\">\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\">{{table.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</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\" :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\":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.id\" :class=\"selectTr.indexOf(l.id) !== -1 ? 'active' : ''\" >\n\t\t\t\t\t<td v-for=\"(td,name, i) in l\" :key=\"'td_'+i\" :class=\"[afficher_crayons(name,l.id), name]\" v-html=\"td\" @click=\"selectLigne(l.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\">{{table.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',
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue