19 grudnia 2018

Popover w tablicy 2D z danymi Bootstrap-Vue

Kategoria: JavaScript Autor: FX

Umieszczenie w tablicy Bootstrap Vue (generowanej responsywnie) przycisku ze zdefiniowaną podpowiedzią (popover) zaczytującą z bazy danych jest trochę zawiłe.

Najpierw robimy tablicę ze slotem na przycisk:

1
2
3
4
5
6
7
8
<b-table stacked="lg" responsive="" striped="" hover="" :items="items" :filter="filter" :fields="fields" :current-page="currentPage" :per-page="perPage" @row-clicked="rowClickHandler"></b-table>

<template slot="uczestnicy" slot-scope="row">
 <b-btn :id="'popoverButton-sync'+ row.index" variant="primary" @click="pokazUczestnikow(this, row.index)">Kursanci</b-btn>
 <b-popover :target="'popoverButton-sync' + row.index">
  <div v-for="{value, text, id} in uczestnicyKursu[row.index]" :key="id">{{text}}</div>
 </b-popover>
</template>

Następnie w funkcji rowClickHandler semafor przełącza akcję pomiędzy kliknięciem w wiersz, a w przycisk

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
rowClickHandler: function(record, index)
                {//zdarzenie kliknięcia
                    // alert('wiersz:  ' + JSON.stringify(record) + '\nindex:' + index);
                   //alert( JSON.stringify(this.items));
                   
                    if (this.semafor) //jeśli kliknięto nie selecta
                    {
                    //tu obsługa kliknięcia w wiersz, ale poza guzikiem
                    }
                    else //kliknięto w przycisk
                    {
                        if (this.uczestnicyKursu[this.rowIndex][0]["text"]=="Brak") //tylko gdy jeszcze nie wczytano musi pobrać
                          axios
                            .get('https://adr/prog.php?nr_kursu=' + encodeURIComponent(record.nr_kursu)) //uwaga na znaki specjalne +
                            .then(response =>
                                  {
                                        this.uczestnicyKursu[this.rowIndex].splice( 0, 1, response.data==null ? { "value": "", "text": "Brak" } : response.data[0]);//dlaczego [0]?
                                        //UWAGA! Splice dodaje [] dookoła tablicy, dlatego trzeba [0] i potem dodać pozostałe
                                        for (var i=1; i<response.data.length; i++) //pozostałe wpisy z pobieranej tablicy [1-(n-1)]
                                            this.uczestnicyKursu[this.rowIndex].push(response.data[i]);
                                       // alert(JSON.stringify(this.uczestnicyKursu));
                                        return this.uczestnicyKursu;
                                 });
                       
                        this.semafor = true; //domyślnie klikamy w rząd nie w przycisk.
                       
                    }
                },

//TERAZ FUNKCJA KLIKNIĘCIA W PRZYCISK w wierszu:
pokazUczestnikow: function(event, rowIndex)
                {
                  //  this.$root.$emit('bv::hide::popover'); //chowa inne popovery
                    this.rowIndex = rowIndex;
                   // alert(rowIndex);
                   //alert(JSON.stringify(event));
                   this.semafor = false; //blokada showModal  
                },

//....
//W FUNKCJI created() trzeba zainicjować tablicę:
for (var i=0; i<100; i++)
                    this.uczestnicyKursu.push([{ "value": "a", "text": "Brak" }] );

Komentowanie wyłączone.