si on clique sur un id de la col id, on selectionne / deselectionne la ligne

css/gamutable.css

@@ -22,3 +22,10 @@
 .iconeTri .active {
 	color: #000;
 }
+#app .active {
+	background-color: rgba(179, 209, 67, 0.47);
+}
+
+td.id {
+	cursor: pointer;
+}

js/gamutable.es6.js

@@ -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">
+				<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">
+					<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>

js/gamutable.js

@@ -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',