Question

我对如何将我的表行显示为bootstrap模式感到困惑，有人可以帮助我吗？

这是我的模态：

<div id="edit_category_modal" class="modal fade" tabindex="-1" data-backdrop="static" data-keyboard="false">
    <form id="form_edit_category">
        <input type="hidden" name="_token" value="{{csrf_token()}}"/>
        <div class="modal-header">
            <h4 class="modal-title">Edit job category</h4>
        </div>
        <div class="modal-body">
            <input id="name" type="text" class="form-control" name="name" placeholder="Category name"/>
        </div>
        <div class="modal-footer">
            <button type="button" data-dismiss="modal" class="btn btn-default">Cancel</button>
            <button type="submit" id="form_edit_category_submit" class="btn blue">Update</button>
        </div>
    </form>
</div>

这是我的表：

<table class="table table-striped table-bordered table-hover" id="categories_table">
                <thead>
                <tr role="row" class="heading">
                    <th width="1%"># ID</th>
                    <th>Name</th>
                    <th width="20%">Action</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                   <td>1</td>
                   <td>Category 1</td>
                   <td><button id="edit_category">Edit</button></td>
                <tr>
                <tr>
                   <td>2</td>
                   <td>Category 2</td>
                   <td><button id="edit_category">Edit</button></td>
                <tr>
                </tbody>
            </table>

如果我点击行

中的编辑按钮，我想将详细行显示为模态

Answer 1

有两种方法可以实现这一目标。

您可以使用表格中的信息并使用jQuery预填充表单。
每当用户点击编辑按钮并将id或其他标识符传递给将返回模态内容的方法时，您就可以发出ajax请求。（例如，包含此记录数据的HTML表单）

首先，这是一个例子，尽管有很多方法：

$('document').ready(function() {
    $('.edit_category').click(function() {
        $tr = $(this).closest('tr');
        alert("You want to edit: Category with ID " + $('.category-id', $tr).text() + " & Name: " + $('.category-name', $tr).text());     
        //You can use this info and set it to the inputs with javascript: $("edit_category_modal input[type='text']").val($('.category-name', $tr).text()) for example;
    });
});

注意：您应该为您的按钮设置class而不是id，因为此元素不会对您的网页而言是唯一的。

这是一个演示： http://jsfiddle.net/pe6fyj9L/

第二种方式：在显示之前，您需要生成模态的内容。由于您正在使用引导程序框架，因此动态加载模态内容非常容易，请检查this answer on SO。

将表格行显示给模态引导程序

1 个答案: