时间戳

首页 > 解决方案 > 当我单击表格中的一行时，打开带有数据的模式

php - 当我单击表格中的一行时，打开带有数据的模式

问题描述

我正在通过 laravel 8 和 livewire 开发应用程序。

我有一个名为的视图dashboard.blade.php，在这个视图中我有一个名为table-collaboratori. 在我table-collaboratori.blade.php的中，我添加了一个事件并且它有效，实际上从我的组件中TableCollaboratori.php我可以正确地恢复我需要的数据。我的疑问是，一旦数据恢复，我是否可以自动打开模态并将数据传递给它。您对哪种方法最好有任何建议或建议？

这是我的代码： LIVEWIRE 组件：

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use Livewire\WithPagination;
use App\Tenant;
use App\Models\User;

class TableCollaboratori extends Component
{
    protected $paginationTheme = 'bootstrap';

    protected $connection = null;
    public $first_render = true;
    public $soggetti = null;
    public $users = null;
    public $idt = null;
    // variabile che associamo al singolo utente;
    public $user = null;

    public function mount(Request $request)
    {
        
        // Setto la connessione
        if (null !== $request->get('throughMiddleware')) {
            $this->connection = 'tenant';
        } else {
            //recupero l'id del tenant
            $this->connection = null;
            $this->idt = tenant('id');
        }

        //recupero la lista dei collaboratori del tenant
        $this->users = User::on($this->connection)->get();

    }

    public function openModal(Request $request, $id){
        
        // Setto la connessione
        if (null !== $request->get('throughMiddleware')) {
            $this->connection = 'tenant';
        } else {
            //recupero l'id del tenant
            $this->connection = null;
            $this->idt = tenant('id');
        }

        //recupero lo specifico utente
        $this->user = User::on($this->connection)->find($id);
        
        // HERE I NEED TO PASS DATA & OPEN THE MODAL UtenteLongModal 

    }

    public function render()
    {
        return view('livewire.table-collaboratori')
        ->with('idt', $this->idt)
        ->with('users', $this->users);
    }

}

我的观点DASHBOARD.BLADE.PHP

{{-- Extends layout --}}
@extends('layout.layout2')

{{-- Content --}}
@section('content')
    <div class="container-fluid">
        <div class="row page-titles mx-0">
            <div class="col-sm-6 p-md-0">
                <div class="welcome-text">
                    <h4>Lista degli utenti del comune di {{$idt}}</h4>
                    <p class="mb-0">Puoi aggiungere utenti, eliminarli, modificarli e impersonarli</p>
                </div>
            </div>
        </div>
        @if ($errors->any())
            <div class="card-body">
                <div class="alert alert-danger alert-dismissible fade show solid alert-rounded">
                    <button type="button" class="close h-100" data-dismiss="alert" aria-label="Close"><span><i
                                class="mdi mdi-close"></i></span>
                    </button>
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ ucfirst($error) }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        @endif
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Collaboratori</h4>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="example3" class="display" style="min-width: 845px">
                            <thead>
                                <tr>
                                    <th>Username</th>
                                    <th>Nome</th>
                                    <th>Cognome</th>
                                    <th>Email</th>
                                    <th>Codice Fiscale</th>
                                    <th>Abilitato</th>
                                    <th>Qualifica</th>
                                    <th>Azioni</th>
                                </tr>
                            </thead>
                            <livewire:table-collaboratori :idt="$idt" />
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid">
            <a class="btn btn-primary" href="{{ url('tenants/' . $idt . '/users/create') }}">
                <i class="bi bi-plus-circle"></i> Aggiungi Utente</a>
            <a class="btn btn-secondary" href="{{ url('tenants/') }}">Torna ai Tenant</a>
        </div>
    </div>
    <!-- codice per l'apertura del modal con il dettaglio dell'utente -->
    <div class="modal fade" id="UtenteLongModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Dettagli dell'utente</h5>
                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <!-- da aggiungere l'azione -->
                    <div class="basic-form">
                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label">Username</label>
                                <div class="col-sm-9">
                                    <input readonly type="text" class="form-control input-rounded" placeholder="{{}}">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label">Nome</label>
                                <div class="col-sm-9">
                                    <input readonly type="text" class="form-control input-rounded" placeholder="Partita" >
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label">Cognome</label>
                                <div class="col-sm-9">
                                    <input readonly type="text" class="form-control input-rounded" placeholder="Anno Riferimento"
                                        >
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label">Email</label>
                                <div class="col-sm-9">
                                    <input readonly type="text" class="form-control input-rounded" placeholder="Anno" >
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label">Codice Fiscale</label>
                                <div class="col-sm-9">
                                    <input readonly type="text" class="form-control input-rounded" placeholder="Numero" >
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label">Abilitato</label>
                                <div class="col-sm-9">
                                    <input readonly type="text" class="form-control input-rounded" placeholder="Carico" >
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label">Qualifica</label>
                                <div class="col-sm-9">
                                    <input readonly type="text" class="form-control input-rounded" placeholder="Tipologia">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label">Ruolo</label>
                                <div class="col-sm-9">
                                    <input readonly type="text" class="form-control input-rounded" placeholder="Imposta">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label">Ufficio</label>
                                <div class="col-sm-9">
                                    <input readonly type="text" class="form-control input-rounded" placeholder="Decimali imposta"
                                        maxlenght="2">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label">Indirizzo</label>
                                <div class="col-sm-9">
                                    <input readonly type="text" class="form-control input-rounded" placeholder="Mora">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label">Comune</label>
                                <div class="col-sm-9">
                                    <input readonly type="text" class="form-control input-rounded" placeholder="Decimali mora"
                                        maxlength="2">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label">Provincia</label>
                                <div class="col-sm-9">
                                    <input readonly type="text" class="form-control input-rounded" placeholder="Email">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label">CAP</label>
                                <div class="col-sm-9">
                                    <input readonly type="text" class="form-control input-rounded" placeholder="Email">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label">Cellulare</label>
                                <div class="col-sm-9">
                                    <input readonly type="text" class="form-control input-rounded" placeholder="Email" minlength="3"
                                        maxlength="255">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label">Telefono</label>
                                <div class="col-sm-9">
                                    <input readonly type="text" class="form-control input-rounded" placeholder="Email" minlength="3"
                                        maxlength="255">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label">Fax</label>
                                <div class="col-sm-9">
                                    <input readonly type="text" class="form-control input-rounded" placeholder="Email" minlength="3"
                                        maxlength="255">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label">Scrittura</label>
                                <div class="col-sm-9">
                                    <input readonly type="text" class="form-control input-rounded" placeholder="Email" minlength="3"
                                        maxlength="255">
                                </div>
                            </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- script con cui apriamo il modal e passiamo il dettaglio del collaboratore selezionato -->
    <script>
        
    </script>
@endsection

这是我的table-collaboratori.blade.php

<tbody>
    <tr>
        @foreach ($users as $u)
    <tr wire:click='openModal({{ $u->id }})'>
        <td>{{ $u->username }}</td>
        <td>{{ $u->nome }}</td>
        <td>{{ $u->cognome }}</td>
        <td>{{ $u->email }}</td>
        <td>{{ $u->codicefiscale }}</td>
        <td>{{ $u->abilitato }}</td>
        <td>{{ $u->id_qualifica }}</td>
        <td>
            <div class="d-flex">
                <a href="{{ url('tenants/' . $idt . '/users/'.$u->id.'/update') }}" class="btn btn-primary shadow btn-xs sharp mr-1" >
                    <i class="fa fa-pencil"></i></a>
                <form method="POST"
                    action="{{ url('tenants/' . $idt . '/users/impersonate') }}">
                    @csrf
                    <input type="hidden" value="{{ $u->id }}" name="idu">
                    <button type="submit" class="btn btn-success shadow btn-xs sharp">
                        <i class="fa fa-user-circle-o" aria-hidden="true"></i>
                    </button>
                </form>
                <form method="POST" action="{{ url('tenants/' . $idt . '/users/delete') }}">
                    @csrf
                    @method('delete')
                    <input type="hidden" value="{{ $u->id }}" name="idu">
                    <button type="submit" class="btn btn-danger shadow btn-xs sharp">
                        <i class="fa fa-trash"></i>
                    </button>
                </form>

            </div>
        </td>
    </tr>
    @endforeach
</tbody>

标签： phplaravelbootstrap-modallaravel-livewire

解决方案

像这样的东西

public $name;
public $email;
//.....

public function getModel($modelId)
{
   $model = Model::find($modelId);
   $this->name = $model->name;
   $this->email = $model->email;
   //...... this way you bind model data to properties
}

public function clickOpenModal($modelId)
{
   $this->getModel($modelId);
   $this->dispatchBrowserEvent('openModal');
}

并在刀片的模型中记住将属性绑定到元素

// Table row
<.... wire:click="clickOpenModal({{ $item->id }})">

//  Model
<input class="" wire:model="name">
//....

推荐阅读