php - 表格未以正确方式显示的模态
问题描述
我正在使用 laravel 8 和 livewire 开发一个应用程序。在我的管理 view.blade.php 中，我需要在一个模式中显示一个我使用脚本动态填充的表格。我调用的模态具有id = "showPagamentiModal"，当在视图中gestionale.blade.php单击按钮Pagamenti时，模态打开，但显示为附加屏幕中。如何在模态框内显示表格？你有什么建议吗？不幸的是，所做的所有尝试都使我得到了与附加屏幕相同的结果。
这是我的代码：
- gestionale.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>Sei sul gestionale di {{ $idt }}</h4>
<span>Qui sono listate pratche, partite e articoli</span>
</div>
</div>
</div>
<!-- import del componente gestionale header filter per i filtri -->
<livewire:gestionale-header-filter>
<!-- fine import del componente gestionale header filter -->
<hr />
<!-- import dei component livewire (tab: partite, pratiche, articoli) -->
<livewire:table-pratiche />
<hr />
<livewire:table-partite />
<hr />
<livewire:table-articoli />
<!-- fine dell'import dei component livewire (tab: partite, pratiche, articoli) -->
<!-- import del component contenente i button per aprire i modal -->
<livewire:gestionale-modal-component />
</div>
<!-- Inizio dei modal per gestire le azioni del gestionale -->
<!-- modal per l'inserimento di un pagamento -->
<div class="modal fade" id="PagamentoLongModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Aggungi un pagamento</h5>
<button type="button" class="close" data-dismiss="modal"><span>×</span>
</button>
</div>
<div class="modal-body">
<!-- da aggiungere l'azione -->
<div class="basic-form">
<form method="POST" action="#">
@csrf
<div class="form-group row">
<label class="col-sm-3 col-form-label">Ente</label>
<div class="col-sm-9">
<input type="text" class="form-control input-rounded" placeholder="Ente" value=""
disabled>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Partita</label>
<div class="col-sm-9">
<input type="text" class="form-control input-rounded" placeholder="Partita" disabled>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Anno Rif.</label>
<div class="col-sm-9">
<input type="text" class="form-control input-rounded" placeholder="Anno Riferimento"
disabled>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Anno</label>
<div class="col-sm-9">
<input type="text" class="form-control input-rounded" placeholder="Anno" disabled>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Numero</label>
<div class="col-sm-9">
<input type="text" class="form-control input-rounded" placeholder="Numero" disabled>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Carico</label>
<div class="col-sm-9">
<input type="number" class="form-control input-rounded" placeholder="Carico" disabled>
</div>
</div>
<hr />
<div class="form-group row">
<label class="col-sm-3 col-form-label">Tipologia</label>
<div class="col-sm-9">
<input type="text" class="form-control input-rounded" placeholder="Tipologia">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Imposta</label>
<div class="col-sm-9">
<input type="number" class="form-control input-rounded" placeholder="Imposta">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Decimali</label>
<div class="col-sm-9">
<input type="number" 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">Mora</label>
<div class="col-sm-9">
<input type="number" class="form-control input-rounded" placeholder="Mora">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Decimali</label>
<div class="col-sm-9">
<input type="number" 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">Data Pagamento</label>
<div class="col-sm-9">
<input type="date" class="form-control input-rounded" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Data Registrazione</label>
<div class="col-sm-9">
<input type="date" class="form-control input-rounded" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Note</label>
<div class="col-sm-9">
<input type="text" class="form-control input-rounded" placeholder="Email" minlength="3"
maxlength="255">
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger light" data-dismiss="modal">Chiudi</button>
<button type="button" class="btn btn-primary">Salva</button>
</div>
</div>
</div>
</div>
<!-- modal per l'inserimento di un assegnatario -->
<div class="modal fade bd-example-modal-lg" tabindex="-1" id="assegnatarioModal" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Aggiungi un assegnatario</h5>
<button type="button" class="close" data-dismiss="modal"><span>×</span>
</button>
</div>
<div class="modal-body">
<!-- da aggiungere l'azione -->
<form method="POST" action="#">
<div class="form-group row">
<div class="form-group">
<label>Seleziona assegnatari (tieni premuto shift per una selezione multipla):</label>
<select multiple class="form-control input-rounded" id="sel2">
@if (!empty($users))
@foreach ($users as $u)
<option value="{{ $u->id }}">{{ $u->username }}</option>
@endforeach
@endif
</select>
</div>
<div class="form-group">
<label class="col-sm-12 col-form-label">Data Assegnazione</label>
<div class="col-sm-12">
<input type="date" class="form-control input-rounded" placeholder="Data Assegn.">
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger light" data-dismiss="modal">Chiudi</button>
<button type="button" class="btn btn-primary">Salva</button>
</div>
</div>
</div>
</div>
<!-- modal per visualizzare i pagamenti associati alla partita -->
<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-hidden="true" id="ShowPagamentiModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Pagamenti associati alla partita</h5>
<button type="button" class="close" data-dismiss="modal"><span>×</span>
</button>
</div>
<div class="modal-body">
<div class="card-body">
<div class="table-responsive">
<table class="table table-hover table-responsive-sm">
<thead>
<tr>
<th>Ente</th>
<th>Minuta</th>
<th>Minuta partita</th>
<th>Anno rif.</th>
<th>Agente Riscossione</th>
<th>Anno ruolo</th>
<th>#ruolo</th>
<th>Codice Fiscale</th>
<th>Denominazione</th>
<th>ID cartella</th>
<th>Carico €</th>
<th>Progressivo riscossione</th>
<th>Data pagam.</th>
<th>Data reg.</th>
<th>Tipo pagam</th>
<th>Modalità pagamento</th>
</tr>
</thead>
<tbody>
<div class="modal-body-table">
</div>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger light" data-dismiss="modal">Chiudi</button>
<button type="button" class="btn btn-primary"><i class="fa fa-print" aria-hidden="true"></i>
Stampa</button>
</div>
</div>
</div>
<!-- modal per visualizzare le procedure e le inesigibilita associati alla partita -->
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="true"
id="ProcedureInesigibilitaModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Procedure e Inesigibilità</h5>
<button type="button" class="close" data-dismiss="modal"><span>×</span>
</button>
</div>
<div class="modal-body">
<!-- da aggiungere il corpo del body -->
<p>Body da aggiungere, da capire i dati da mostrare a video</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger light" data-dismiss="modal">Chiudi</button>
<button type="button" class="btn btn-primary"><i class="fa fa-print" aria-hidden="true"></i>
Stampa</button>
</div>
</div>
</div>
</div>
<!-- fine dei modal per gestire le azioni del gestionale -->
<script>
//SCRIPT PER L'APERTURA DINAMICA DEI MODAL A SECONDA CHE SIANO SELEZIONATE O MENO LE OPPORTUNE RIGHE DELLE TABELLE NELLA PAGINA
// INIZIO ACTION PER APERTURA E CHIUSURA DINAMICA DEL MODAL 'AGGIUNGI PAGAMENTO'
window.addEventListener('openPagamentoLongModal', event => {
$(".modal-body").empty();
$(".modal-body").append('<input type="text" hidden name="id_articolo" id="articolo" placeholder="' + event.detail.id_articolo + '" value="'+event.detail.id_articolo+'"/>');
$("#PagamentoLongModal").modal('show');
})
window.addEventListener('closePagamentoLongModal', event => {
$("#PagamentoLongModal").modal('hide');
})
// FINE ACTION PER APERTURA E CHIUSURA DINAMICA DEL MODAL 'AGGIUNGI PAGAMENTO'
// INIZIO ACTION PER APERTURA E CHIUSURA DINAMICA DEL MODAL 'AGGIUNGI ASSEGNATARIO'
window.addEventListener('openassegnatarioModal', event => {
$(".modal-body").empty();
$(".modal-body").append('<input type="text" hidden name="id_pratica" id="pratica" placeholder="' + event.detail.id_pratica + '" value="'+event.detail.id_pratica+'"/>');
$("#assegnatarioModal").modal('show');
console.log(event.detail.id_pratica);
})
window.addEventListener('closeassegnatarioModal', event => {
$("#assegnatarioModal").modal('hide');
})
// FINE ACTION PER APERTURA E CHIUSURA DINAMICA DEL MODAL 'AGGIUNGI ASSEGNATARIO'
// INIZIO ACTION PER APERTURA E CHIUSURA DINAMICA DEL MODAL 'PAGAMENTI ASSOCIATI'
window.addEventListener('openShowPagamentiModal', event => {
// Qui dobbiamo passare la lista dei pagamenti associati alla partita
$(".modal-body-table").empty();
$(".modal-body-table").append('<tr>');
$(".modal-body-table").append('"<td>'+event.detail.pagamenti[0].ente+'</td>"' );
$(".modal-body-table").append('"<td>'+event.detail.pagamenti[0].id_minuta+'</td>"' );
$(".modal-body-table").append('"<td>'+event.detail.pagamenti[0].id_minuta_partita+'</td>"' );
$(".modal-body-table").append('"<td>'+event.detail.pagamenti[0].annoRif+'</td>"' );
$(".modal-body-table").append('"<td>'+event.detail.pagamenti[0].agenteRiscossione+'</td>"' );
$(".modal-body-table").append('"<td>'+event.detail.pagamenti[0].annoRuolo+'</td>"' );
$(".modal-body-table").append('"<td>'+event.detail.pagamenti[0].numeroRuolo+'</td>"' );
$(".modal-body-table").append('"<td>'+event.detail.pagamenti[0].codiceFiscale+'</td>"' );
$(".modal-body-table").append('"<td>'+event.detail.pagamenti[0].denominazione+'</td>"' );
$(".modal-body-table").append('"<td>'+event.detail.pagamenti[0].identificativoCartella+'</td>"' );
$(".modal-body-table").append('"<td>'+event.detail.pagamenti[0].carico+'</td>"' );
$(".modal-body-table").append('"<td>'+event.detail.pagamenti[0].progressivoRiscossione+'</td>"' );
$(".modal-body-table").append('"<td>'+event.detail.pagamenti[0].dataPagamento+'</td>"' );
$(".modal-body-table").append('"<td>'+event.detail.pagamenti[0].dataRegistrazione+'</td>"' );
$(".modal-body-table").append('"<td>'+event.detail.pagamenti[0].tipoPagamento+'</td>"' );
$(".modal-body-table").append('"<td>'+event.detail.pagamenti[0].modalitaPagamento+'</td>"' );
$(".modal-body-table").append('</tr>');
$("#ShowPagamentiModal").modal('show');
})
window.addEventListener('closeShowPagamentiModal', event => {
$("#ShowPagamentiModal").modal('hide');
})
// FINE ACTION PER APERTURA E CHIUSURA DINAMICA DEL MODAL 'PAGAMENTI ASSOCIATI'
// INIZIO ACTION PER APERTURA E CHIUSURA DINAMICA DEL MODAL 'PROCEDURE/INESIGIBILITA'
window.addEventListener('openProcedureInesigibilitaModal', event => {
// Qui dobbiamo passare la lista delle procedure e inesigibilita associate
//$(".modal-body").append('<input type="text" hidden name="id_partita" id="partita" placeholder="' + event.detail.id_partita + '" value="'+event.detail.id_partita+'"/>');
$("#ProcedureInesigibilitaModal").modal('show');
})
window.addEventListener('closeProcedureInesigibilitaModal', event => {
$("#ProcedureInesigibilitaModal").modal('hide');
})
// FINE ACTION PER APERTURA E CHIUSURA DINAMICA DEL MODAL 'PROCEDURE/INESIGIBILITA'
</script>
<!-- IMPORTANTE: AGGIUNGERE IL CSRF TOKEN PRIMA DI ANDARE IN PRODUZIONE -->
@endsection
我的屏幕：
解决方案
推荐阅读
- python - 当 C++ 代码中包含 opencv 时，使用 ctypes 创建 .so 文件
- android - 初始化 YouTube 播放器时 Oreo 8.1 中的 Youtube API 错误
- c - 使用 C 中的二维数组和函数创建井字游戏程序
- c - C - 插入排序算法
- css - 编译SASS失败
- javascript - 在 reducer 中更新对象的状态
- moodle - Moodle REST API 获取所有课程列表和注册该特定课程的用户
- sql - 如何在 SQL Server 的 nvarchar(max) 类型列中存在的 json 结构中添加新属性
- java - 如何匹配给定的正则表达式模式以从字符串中获取子字符串
- mongodb - Mongo Spark 连接器写入 .options(replaceDocument,false) 给出异常