Question

我正在为我的项目使用codeigniter。我对ajax不太熟悉。我有一个表格形式的用户列表，每行都有一个按钮可以查看每个用户的详细信息。单击按钮后，我需要一个对话框以表格形式显示用户的所有详细信息。有人可以用代码向我展示如何做到这一点吗？我的代码是这样的：

<button class="btn btn-default btn-rounded btn-sm product_detail"   id="<?=$record->serviceId;?>"  data-toggle="tooltip" title="View Product" >
        <span class="fa fa-eye"></span>
</button>

<div class="modal fade" id="header-modal" aria-hidden="true"></div>

    <script>    
            $('body').delegate('.product_detail', 'click', function() {
               var serviceId = $(this).attr('serviceId');
               $.ajax({
                type: "POST",
                url: "<?= base_url();?>service/popup",
                data: {serviceId: serviceId},
                dataType: "json",
                success: function(data) {
                                $("#header-modal").html("<div class='modal-dialog modal-lg'>"+
                                                "<div class='modal-content'>" +
                                                        "<div class='modal-header'>" +
                                                                "<button type='' class='close' data-dismiss='modal' aria-hidden='true'><i class='icons-office-52'>Close</i></button>" +
                                                                "<h4 class='modal-title'><strong>Product Detail</strong></h4>" +
                                                        "</div>" +
                                                        "<div class='modal-body' id='modal_body'>" +

                                                        "</div>" +
                                                        "<div class='modal-footer'> " +
                                                             "<button type='button' class='btn btn-danger  btn-embossed bnt-square' data-dismiss='modal'>Cancle</button>" +
                                                        "</div>" +
                                                "</div>"+
                                        "</div>"
                                    );
                                    $('#header-modal').modal('show');
                }
            });

            });
    </script>

控制器代码：

    public function popup()
        {
            $serviceId = $this->input->post('serviceId');
            $data['serviceInfo'] = $this->product->getServiceById($serviceId);

            echo json_encode($data);
        }

我也将js和css文件包括在视图中。

Answer 1

只需尝试在按钮单击和onclick功能上打开模式，即可获取要在模式中显示的用户的所有详细信息。

<button type="button" class="btn btn-default btn-rounded btn-sm product_detail" data-target="#editPermission" data-toggle="modal" onclick="yourfunction('pass id here')">
        <span class="fa fa-eye"></span>
</button>

数据目标用于您的模式ID，在onclick中调用您的函数。

Answer 2

HTML部分为

<table>
        <thead>
            <tr>
                <th>
                    Product Id
                </th>
                <th>
                    Product Name
                </th>
                <th>
                    Product Description
                </th>
                <th>
                    Action
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="prod_id">1</td>
                <td class="prod_name">Apple</td>
                <td class="prod_desc">Frout</td>
                <td><button type="button" class="viewBtn">View</button></td>
            </tr>
            <tr>
                <td class="prod_id">2</td>
                <td class="prod_name">Orange</td>
                <td class="prod_desc">Frout</td>
                <td><button type="button" class="viewBtn">View</button></td>
            </tr>
        </tbody>
    </table>
    <div class="modal fade" id="header-modal" aria-hidden="true">
        <div class='modal-dialog modal-lg'>
            <div class='modal-content'>
                <div class='modal-header'>
                    <button type='' class='close' data-dismiss='modal' aria-hidden='true'><i class='icons-office-52'>Close</i></button>
                    <h4 class='modal-title'><strong>Product Detail</strong></h4>
                </div>
                <div class='modal-body' id='modal_body'>
                    Product Id : <span class="modal_prod_id"></span><br/>
                    Product Name : <span class="modal_prod_name"></span><br/>
                    Product Desc : <span class="modal_prod_desc"></span><br/>
                </div>
                <div class='modal-footer'>
                    <button type='button' class='btn btn-danger  btn-embossed bnt-square' data-dismiss='modal'>Cancle</button>
                </div>
            </div>
        </div>
    </div>

脚本部分是

<script>
        $(document).ready(function() {

            $('.viewBtn').click(function(event) {
                /* Act on the event */
                var cur = $(this);
                var id = cur.closest('.prod_id').text();
                var name = cur.closest('.prod_name').text();
                var desc = cur.closest('.prod_desc').text();
                $('.modal_prod_id').text(id);
                $('.modal_prod_name').text(name);
                $('.modal_prod_desc').text(desc);
                $('#header-modal').modal('show');
            });
        });
    </script>

如何在codeigniter中打开对话框？

2 个答案: