Question

我有一张桌子。点击一行后，我想要一个弹出窗口显示产品详细信息。我尝试过使用Bootstrap模态窗口的控制器方法，但这样做不起作用。这是方法：

@RequestMapping("/{id}")
public String getNetworkInfo(Model model, @PathVariable String id){

    model.addAttribute("poolHashrate", netService.getPoolHashrate(new Long(id)));

    return "networkDetails";
}

观点正文：

<body>

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <p>Some text in the modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>

</body>

它返回一个应该是弹出窗口的视图，但我觉得我不明白这个想法。那里没有数据。只是一个示例弹出窗口。

Answer 1

您可以使用ajax来实现它

首先让控制器返回到jsp页面，然后使用内容 jsp页面形成一个对话框并打开它。

假设networkDetails的jsp页面如下，它只包含详细信息，如果没有，你可以为它创建一个jsp页面：

<div id="networkDetail">
  ${poolHashrate}
<div>

然后我们可以将它的内容放到弹出窗口中：

$.ajax({
    url:url,
    type:"get",
    success:function(data){
       $("#dialog").html(data);//data is the return page of "networkDetails"
       $("#dialog").dialog({//open the dialog
       //... other code to init a dialog
       });
    }
});

Answer 2

我使用Jquery打开模态弹出窗口并在模态弹出窗口中填充值。

以下是模态代码：

<div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">EDIT</h4>
                </div>
                <div class="modal-body">
                    <p>
                        <input type="text" class="input-sm" id="txtfname" />
                    </p>
                    <p>
                        <input type="text" class="input-sm" id="txtlname" />
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

Jquery代码：它填充并打开上面定义的模态 - myModal

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

    $('table tbody tr  td')
    .on(
        'click',
        function () {
        $("#myModal").modal("show");
        $("#txtfname")
        .val(
            $(this).closest(
                'tr')
            .children()[0].textContent);
        $("#txtlname")
        .val(
            $(this).closest(
                'tr')
            .children()[1].textContent);
    });

});
</script>

表格代码：

<table id="example" class="table table-condensed table-hover table-bordered"
                        width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Salary</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Salary</th>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>$3,120</td>
        </tr>
        <tr>
            <td>Nixon Tiger</td>
            <td>System Architect</td>
            <td>London</td>
            <td>61</td>
            <td>$3,120</td>
        </tr>
    </tbody>
</table>

如何在Spring中填充弹出窗口？

2 个答案: