首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在Spring中填充弹出窗口?

如何在Spring中填充弹出窗口?
EN

Stack Overflow用户
提问于 2018-04-10 18:45:31
回答 1查看 1.1K关注 0票数 0

我有一张桌子。单击一行后,我希望出现一个显示产品详细信息的弹出窗口。我用Bootstrap模式窗口尝试了一种控制器方法,但就是不起作用。下面是方法:

代码语言:javascript
复制
@RequestMapping("/{id}")
public String getNetworkInfo(Model model, @PathVariable String id){

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

    return "networkDetails";
}

和一个视图主体:

代码语言:javascript
复制
<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>

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

EN

回答 1

Stack Overflow用户

发布于 2018-04-11 06:43:16

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

下面是模态代码:

代码语言:javascript
复制
<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代码:它填充并打开上面定义的modal - myModal

代码语言:javascript
复制
<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>

表编码:

代码语言:javascript
复制
<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>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/49751650

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档