Thymeleaf传值给Bootstrap的modal

解决方案
205 words , 1 mins.

给模态框传值是一个很常见的需求，尤其是在操作表格的时候，添加、编辑数据都需要给模态框传值。一般如果是html的话很好处理，在Thymeleaf里因为值是动态的所以遇到点问题。

遇到的问题

这是模态框的定义：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!-- 修改数据 -->
<div class="modal fade" id="edit_bill" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <p>新增数据</p>
            </div>
            <div class="modal-body">
                <form th:action="@{/bill/edit}" method="post">
                    <div class="form-group">

                        <div class="form-group">
                            <label for="billId1">id</label>
                            <input type="text" name="billId" class="form-control" id="billId" placeholder="">
                        </div>
                    <button type="submit" class="btn btn-default">提交表单</button>
                </form>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-default" data-dismiss="modal">关闭
                </button>
            </div>
        </div>
    </div>
</div>

这是按钮的定义：

1
2
3
4
5
6
7
8
9
<tr th:if="${not #lists.isEmpty(result.getData().getDataList())}"
    th:each="bill, stat: ${result.getData().getDataList()}">
    <td style="display: none" th:text="${bill.billId}">Test001</td>
    <td>
        <div class="btn-group">
            <button id="edit" class="btn btn-info" data-toggle="modal" data-target="#edit_bill" th:attr="data-bill-id=${bill.billId}">修改</button>
        </div>
    </td>
</tr>

想在点击修改按钮的时候将 billId 这个值传到弹出框里。

值得注意的是Thymeleaf中data-*的写法： 

1
2
3
4
5
<!-- 不是 -->
data-bill-id="${bill.billId}"

<!-- 而是 -->
th:attr="data-bill-id=${bill.billId}"

方法一

点击按钮的时候执行通过事件取值，但是我没成功，甚至连log都没输出，应该是没有执行，不知道是不是和Thymeleaf有关。

1
2
3
4
5
6
$(document).ready(function()
    $('#edit_bill').on('show.bs.modal', function (event) {
        var billId = $(event.relatedTarget.data('bill-id');
        $(event.currentTarget).find('input[name="billId"]').val(billId);
    });
});

方法二

这种写法能成功取到值，对js不是很了解，看不出两者有什么差别。

1
2
3
4
$(document).on("click", "#edit", function() {
    var billId = $(this).data("bill-id");
    $("#billId").val(billId);
});