首页 前端知识 thymeleaf创建弹出框modal,并传参,多参数传递

thymeleaf创建弹出框modal,并传参,多参数传递

2024-03-11 10:03:39 前端知识 前端哥 202 544 我要收藏
<div class="modal fade"  id="updateModal" aria-labelledby="updateModalLable" aria-hidden="true" tabindex="-1">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button class="close" type="button" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h5 class="modal-title" id="updateModalLable">产品修改</h5>
                        </div>
                        <form id="updateForm" class="form-horizontal" th:action="@{/product/update}">
                            <div class="modal-body">
                                <div class="form-group">
                                    <label class="control-label col-lg-2">产品名称:</label>
                                    <div class="col-lg-9">
                                        <input type="text" id="productName" name="productName" placeholder="productName" class="form-control"></br>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-lg-2">产品类型:</label>
                                    <div class="col-lg-9">
                                        <input type="text" id="productType" placeholder="productType" value="" name="productType" class="form-control">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-lg-2">产品数量:</label>
                                    <div class="col-lg-9">
                                        <input type="text" id="productNum" placeholder="productNum" value="" name="productNum" class="form-control">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-lg-2">金额:</label>
                                    <div class="col-lg-9">
                                        <input type="text" id="productAmt" placeholder="productAmt" value="" name="productAmt" class="form-control">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-lg-2">创建日期:</label>
                                    <div class="col-lg-9">
                                        <input type="text" id="createTime" placeholder="createTime" value="" name="createTime" class="form-control">
                                    </div>
                                </div>
                            </div>

                            <div class="modal-footer">
                                <button class="btn btn-default" type="button" data-dismiss="modal">close</button>
                                <button class="btn btn-success" type="submit" >确定</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
   <tr th:each="obj:${list}">
                        <td th:text="${obj.getId()}"></td>
                        <td th:text="${obj.getProductName()}"></td>
                        <td th:text="${obj.getProductType()}"></td>
                        <td th:text="${obj.getProductNum()}"></td>
                        <td th:text="${obj.getProductAmt()}"></td>
                        <td th:text="${obj.getCreateTime()}"></td>
                        <td><button class="btn btn-default btn-primary" data-target="#updateModal" data-toggle="modal"
                                    th:onclick="values([[${obj.getProductName()}]],[[${obj.getId()}]],[[${obj.getProductType()}]],[[${obj.getProductNum()}]],
                                    [[${obj.getProductAmt()}]],[[${obj.getCreateTime()}]])">
                            修改
                        </button>|<button class="btn btn-danger" data-target="#myModal" data-toggle="modal">
                            删除
                        </button></td>
    <script >
         function values(productName,id,productType,productNum,productAmt,createTime){
             $('#productName').val(productName)
             $('#productType').val(productType)
             $('#productNum').val(productNum)
             $('#productAmt').val(productAmt)
             $('#createTime').val(createTime)

         }

    </script>

注意点:

使用标签 th:οnclick="values([[${obj.getProductName()}]],[[${obj.getId()}]],[[${obj.getProductType()}]],[[${obj.getProductNum()}]],[[${obj.getProductAmt()}]],[[${obj.getCreateTime()}]])"

变量参数要使用[[${ }]]这种方式,以免出错。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3629.html
标签
bootstrap
评论
会员中心 联系我 留言建议 回顶部
复制成功!