在链接上添加弹出模式，以在用户单击“用户”列时打开

Question

好的，所以我有index page，其中列出了所有票证，我有列user。我在此列中添加标记

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

同时我还创建了弹出模式的函数

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

下面是模式弹出窗口，我创建了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时，不在用户链接中。我试着找出我犯错的地方，但不幸的是我看不出错误在哪里。所以我想添加这个函数，以便在用户单击标记时加载弹出窗口，这里是我的代码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%"
            }
        ]
    });
}

我不确定如何分配这个函数加载到标签上？？有什么建议吗？？

Answer 1

实际上需要调整datatable JS中的renderfunctionapplicationuser.username属性。

您可以为user-details添加类：

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

并且您的事件侦听器应该如下所示,这样它应该只在单击数据行而不是表头行时才会被触发：

$(".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 })
    });
});

当前，您的事件在类table-info上触发，该类也在上应用，用于该，而该最终不是所需的行为。