将模式绑定到数据表中的行单击答案

【问题标题】：bind modal to row click in datatable将模式绑定到数据表中的行单击
【发布时间】：2016-09-24 13:15:45
【问题描述】：

嘿嘿，我有一个数据表，其中包含来自我的数据库的数据。每行都有一个详细信息按钮。我希望单击按钮以打开包含单击行详细信息的模式。我试图在页面加载时为每一行创建模态实例，但它减慢了网站的速度。有没有办法根据行 ID 填充模式？

这是我的桌子

   <table id="tblMessagesDetail" class="table table table-hover table-striped  table-condensed export-table" style="width: 100%;">
<thead>
    <tr>
        <th>
            @*@Html.DisplayNameFor(model => model.SmsList[0].SmsMT.Id)*@
            @ViewRes.SharedStrings.SmsID
        </th>
        <th>
            @*@Html.DisplayNameFor(model => model.SmsList[0].SmsMT.Account.Project.Customer.Name)*@
            @ViewRes.SharedStrings.CustomerName
        </th>
        <th>
            @*@Html.DisplayNameFor(model => model.SmsList[0].SmsMT.Account.Project.Name)*@
            @ViewRes.SharedStrings.ProjectName
        </th>
        <th>
            @*@Html.DisplayNameFor(model => model.SmsList[0].SmsMT.Account.Login)*@
            @ViewRes.SharedStrings.Account
        </th>
        <th>
            @Html.DisplayNameFor(model => model.SmsList[0].MSISDN)
        </th>
        <th>
            @*@Html.DisplayNameFor(model => model.SmsList[0].SmsMT.SmsStatus.Value)*@
            @ViewRes.SharedStrings.smsStatus
        </th>
        <th>
            @Html.DisplayNameFor(model => model.SmsList[0].SmsMT.EventReason)
        </th>
        <th>
            @*@Html.DisplayNameFor(model => model.SmsList[0].SendDate)*@
            @ViewRes.SharedStrings.SendDate
        </th>
        <th>
            @*@Html.DisplayNameFor(model => model.SmsList[0].SmsMT.SentDate)*@
            @ViewRes.SharedStrings.SentDate
        </th>
        <th>
            @Html.DisplayNameFor(model => model.SmsList[0].SmsMT.Ticket)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.SmsList[0].ExtId)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.SmsList[0].SmsMTContent.NotificationLevel)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.SmsList[0].SmsMTContent.OADC)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.SmsList[0].SmsMTContent.Message)
        </th>
        <th>

        </th>
    </tr>
</thead>
<tbody>    
   @foreach (var item in Model.SmsList)
    {
        <tr>

            <td>
                @Html.DisplayFor(modelItem => item.SmsMT.Id)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.SmsMT.Account.Project.Customer.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.SmsMT.Account.Project.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.SmsMT.Account.NMGLogin)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.MSISDN)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.SmsMT.SmsStatus.Value)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.SmsMT.EventReason)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.SendDate)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.SmsMT.SentDate)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.SmsMT.Ticket)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ExtId)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.SmsMTContent.NotificationLevel)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.SmsMTContent.OADC)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.SmsMTContent.Message)
            </td>
            <!-- Button trigger modal -->
            <td>
                @*@using (Html.BeginForm("FillDetailModal", "Statistics", FormMethod.Post))
                    {*@
                <button id="btnDetails" type="submit" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal-@item.SmsMTId">
                    <i class="glyphicon glyphicon-th-list"></i> @ViewRes.SharedStrings.btnDetails
                </button>
            </td>
         </tr>
     }
 </tbody>

这是我的模态

<div class="modal fade" draggable="true" id="myModal-@item.SmsMTId" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div id="modalDialog" draggable="true" class="modal-dialog" style="padding-bottom:0px">
                        <div class="modal-content">
                            <div class="modal-header" style="background-color: #428bca; color: white; ">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                    &times;
                                </button>
                                <h4 class="modal-title" id="myModalLabel">
                                    Message Detail ID: '@item.SmsMTId' - Ticket #@item.SmsMT.Ticket - Project @item.SmsMT.Account.Project.Name
                                </h4>
                            </div>
                            <div class="modal-body" style="padding: 0px;">
                                <table style="width:100%;" class="table table table-hover table-striped  table-condensed export-table" border="0">
                                    <tr>
                                        <td align="left">

                                            <label>@ViewRes.SharedStrings.SmsID</label>
                                        </td>
                                        <td>
                                            @Html.DisplayFor(modelItem => item.SmsMT.Id)
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="left">

                                            <label>@ViewRes.SharedStrings.CustomerName</label>
                                        </td>
                                        <td>
                                            @Html.DisplayFor(modelItem => item.SmsMT.Account.Project.Customer.Name)
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="left">

                                            <label> @ViewRes.SharedStrings.ProjectName</label>
                                        </td>
                                        <td>
                                            @Html.DisplayFor(modelItem => item.SmsMT.Account.Project.Name)
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="left">
                                            <label>@ViewRes.SharedStrings.Account</label>
                                        </td>
                                        <td>
                                            @Html.DisplayFor(modelItem => item.SmsMT.Account.NMGLogin)
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="left">
                                            <label> @Html.DisplayNameFor(model => model.SmsList[0].MSISDN)</label>
                                        </td>
                                        <td>
                                            @Html.DisplayFor(modelItem => item.MSISDN)
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="left">
                                            <label>@ViewRes.SharedStrings.smsStatus</label>
                                        </td>
                                        <td>
                                            @Html.DisplayFor(modelItem => item.SmsMT.SmsStatus.Value)
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="left">
                                            <label>@ViewRes.SharedStrings.EventReason</label>
                                        </td>
                                        <td>
                                            @Html.DisplayFor(modelItem => item.SmsMT.EventReason)
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="left">
                                            <label>@ViewRes.SharedStrings.SendDate</label>
                                        </td>
                                        <td>
                                            @Html.DisplayFor(modelItem => item.SendDate)
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="left">
                                            <label>@ViewRes.SharedStrings.SentDate</label>

                                        </td>
                                        <td>
                                            @Html.DisplayFor(modelItem => item.SmsMT.SentDate)

                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="left">
                                            <label>@ViewRes.SharedStrings.TicketId</label>
                                        </td>
                                        <td>
                                            @Html.DisplayFor(modelItem => item.SmsMT.Ticket)
                                        </td>
                                    </tr>

                                    <tr>
                                        <td align="left">
                                            <label>@ViewRes.SharedStrings.ExternalID</label>
                                        </td>
                                        <td>
                                            @Html.DisplayFor(modelItem => item.ExtId)
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="left">
                                            <label style="width:160px;">@ViewRes.SharedStrings.NotificationLevel</label>
                                        </td>
                                        <td>
                                            @Html.DisplayFor(modelItem => item.SmsMTContent.NotificationLevel)
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="left">
                                            <label>  @Html.DisplayNameFor(model => model.SmsList[0].SmsMTContent.OADC)</label>
                                        </td>
                                        <td>
                                            @Html.DisplayFor(modelItem => item.SmsMTContent.OADC)
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="left">
                                            <label>@Html.DisplayNameFor(model => model.SmsList[0].SmsMTContent.Message)</label>
                                        </td>
                                        <td>
                                            @Html.DisplayFor(modelItem => item.SmsMTContent.Message)
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="left">
                                            <label> @ViewRes.SharedStrings.binaryMessage</label>
                                        </td>
                                        <td>
                                            @Html.DisplayFor(modelItem => item.SmsMTContent.Binary)
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <div class="modal-footer" style="margin: 0px; padding: 9px 30px 10px;">
                                <button type="button" class="btn btn-default" data-dismiss="modal">
                                    @ViewRes.SharedStrings.btnClose
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

如何传递行的值，然后在数据库上进行链接以提取适当的数据？

感谢我能得到的任何帮助

【问题讨论】：

标签： html datatable bootstrap-modal

【解决方案1】：

您实际上可以将您的 id 绑定到 data-whatever 属性并将其放在表格行甚至列中。

    <tr data-toggle="modal" data-target="#myModalIdHere" data-whatever="myDataIdHere">

在 jQuery 中：

    $('#myModalIdHere').on('show.bs.modal', function (event) {
        // this is the trigger
        var tableRow = $(event.relatedTarget);

        // get myDataIdHere to data-whatever attribute
        var myDataIdHere = tableRow.data('whatever');

        // updating modal's content
        // bind myDataIdHere to myInputIdHere
        var modal = $(this);
        modal.find('.modal-body #myInputIdHere').val(myDataIdHere);
    });

【讨论】：

【解决方案2】：

使用while循环查询所有数据并将图标放在最后一列。有了这个，你可以创建一个包含所有数据的表格，图标将为我们提供查看、删除或编辑的按钮

while($row = $sql->fetch()){

                                    $id = $row['id'];
                                    $company = $row['company_name'];
                                    $domain = $row['domain_name'];
                                    $industry = $row['industry_type'];
                                    $websitet = $row['website_type'];
                                    $websitep = $row['website_purpose'];
                                    $audience = $row['target_audience'];
                                    $web_pages = $row['web_pages'];
                                    $color = $row['color_scheme'];
                                    $style = $row['style'];
                                    $addons = $row['addons'];
                                    $url = $row['url_of_existing'];
                                    $like_dislike = $row['like_dislike_existing_website'];
                                    $sample = $row['sample_website'];


                                    echo '<tr><td>'.$id.'</td>';
                                    echo '<td>'.$company.'</td>';
                                    echo '<td>'.$domain.'</td>';
                                    echo '<td>'.$industry.'</td>';
                                    echo '<td><a href="#openModal'.$id.'" data-toggle="modalDialog" data-target="#openModal"><img src=img/view.png width=20px height=20px id="view"></a></td>';
                                    echo '<td><a href="delete.php?id='.$id.'" onclick="return confirm(\'Delete '.$id.'?\')"><img src="img/delete.png" width=20px height=20px name="delete"></a></td></tr>';
                                    ?>

<a href...?id='.$id.'" 部分是使用 get 方法发送 id。如果您不知道，请查看它。这几乎可以解决您的问题。

【讨论】：

最后一行代码是删除图标..它删除了您单击的特定行..希望您从中学习
谢谢，但我认为你发送给我的是一个创建表的查询，相反我有一个运行良好的表我想要一个解决我的模态弹出窗口的解决方案！