<a>当用户单击用户列时，在链接上添加弹出模式以打开</a>

Question

好的，所以我有Index Page ，其中列出了所有票证，并且我有列User 。 我在此列中添加<a>标记

{
            "data": "applicationUser.name",
            "width": "10%",
            "targets": [1],
            "render": function (data) {
                return '<a class="text-info" href="' + data + '" target_blank>' + data + '</a>'
            }
        },

我还创建 function 来弹出 Modal

$(".table-info").click(function () {
    var id = $(this).attr("userDetails");
    $.get("/Manager/Ticket/UserDetails?id=" + id, function (result) {
        $("#container").append(result);
        $("#userDetails").modal({ show: true })
    })
})

这是我创建的Modal Popup PartialView.cshtml

@model VmSTicketing.Models.ViewModels.TicketVM

<div class="modal fade" id="userDetails">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
                <h3 class="modal-title">Podaci o Useru</h3>
            </div>
            <div class="modal-body">
                <div class="row dataTable">
                    <div class="col-md-4">
                        <label class="control-label">Ime i Prezime</label>
                    </div>
                    <div class="col-md-8">
                        <input type="text" class="form-control" asp-for="Ticket.ApplicationUser.Name" disabled id="ImePrezime" name="ImePrezime">
                    </div>
                </div>

                <br>

                <div class="row dataTable">
                    <div class="col-md-4">
                        <label class="control-label">Email Adresa</label>
                    </div>
                    <div class="col-md-8">
                        <input type="text" class="form-control" asp-for="Ticket.ApplicationUser.Email" disabled id="Email" name="Email">
                    </div>
                </div>

                <br>

                <div class="row dataTable">
                    <div class="col-md-4">
                        <label class="control-label">Broj Telefona</label>
                    </div>
                    <div class="col-md-8">
                        <input type="text" asp-for="Ticket.ApplicationUser.PhoneNumber" class="form-control" disabled id="BrTel" name="BrTel">
                    </div>
                </div>
                <br />

                <div class="row dataTable">
                    <div class="col-md-4">
                        <label class="control-label">Klijent</label>
                    </div>
                    <div class="col-md-8">
                        <input type="text" asp-for="Ticket.ApplicationUser.Client" class="form-control" disabled id="klijent" name="klijent">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

这是我的表结构的 IndexPage：

@model IEnumerable<VmSTicketing.Models.Ticket>

@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/AdminLTE/_Layout.cshtml";

}


<br />
<div class="row">
    <div class="col-6">
        <h2 class="text-primary">Lista tiketa</h2>
    </div>
    <div class="col-6 text-right">
        <a class="btn btn-primary" asp-action="Upsert"><i class="fas fa-plus"></i> &nbsp; Novi tiket</a>
    </div>
</div>

<br />

<div class="p-4 border rounded">
    <table id="tblData" class="table table-striped table-bordered" style="width:100%">
        <thead class="thead-dark">
            <tr class="table-info">
                <th>Opis</th>
                <th>Datum i vrijeme slanja</th>
                <th>Vrsta Tiketa</th>
                <th>Status</th>
                <th>Datum i vrijeme zavrsetka</th>
                <th>Korisnik</th>
                <th></th>
            </tr>
        </thead>
    </table>
</div>

<partial name="UserDetails" />


@section Scripts{
    <script src="~/js/ticket.js"></script>
}

到目前为止，此模式有效，但是当我单击table header时不在用户链接中。 我试图找出我做错了什么，但不幸的是我看不到错误在哪里。 所以我想添加这个 function 以便在用户单击<a>标签时加载弹出窗口 这是我的代码ticket.js ，我在其中调用我的数据表

function loadDataTable() {
    dataTable = $('#tblData').DataTable({
        "ajax": {
            "url": "/Manager/Ticket/GetAll"
        },
        "columns": [
            { "data": "description", "width": "10%" },
            { "data": "dateAndTime", "width": "15%" },
            { "data": "ticketType.name", "width": "10%" },
            { "data": "status", "width": "10%" },
            { "data": "answered", "width": "15%" },
            {
                "data": "applicationUser.name",
                "width": "10%",
                "targets": [1],
                "render": function (data) {
                    return '<a class="text-info" href="' + data + '" target_blank>' + data + '</a>'
                }
            },
            {
                "data": "id",
                "render": function (data) {
                    return `
                            <div class="text-center">
                                <a href="/Manager/Discussion/OpenDiscussion/${data}" class="btn btn-primary text-white" style="cursor:pointer">
                                    <i class="fas fa-comments"></i>
                                </a>
                                <a href="/Manager/Ticket/Details/${data}" class="btn btn-success text-white" style="cursor:pointer">
                                    <i class="fas fa-info"></i>
                                </a>
                                <a onclick=Delete("/Manager/Ticket/Delete/${data}") class="btn btn-danger text-white" style="cursor:pointer">
                                    <i class="fas fa-trash-alt"></i> 
                                </a>                              
                            </div>
                           `;
                }, "width": "15%"
            }
        ]
    });
}

我不确定如何将此 function 分配到标签上？ 有什么建议吗？？

Answer 1

您实际上需要在数据表 js 中调整您的render function applicationUser.username属性。

您可以为user-details添加 class ：

"data": "applicationUser.name",
"render": function (data) {
   return '<a id="' + data + '" class="text-info user-details" href="' + data + '" target_blank>' + data + '</a>'
            }

并且您的事件侦听器应该 go 如下所示，以便仅在单击数据行但没有表 header 行时触发它：

$(".table-info").click("click" , "a.user-details",function () {
    var id = this.id;
    $.get("/Manager/Ticket/UserDetails?id=" + id, function (result) {
        $("#container").append(result);
        $("#userDetails").modal({ show: true })
    });
});

目前，您的事件在 class table-info上触发，该表信息也应用于<tr>的<th>最终不是所需的行为。