首页 文章

使用Spring-Boot和Thymeleaf编辑表数据

提问于
浏览
1

我还在学习Thymeleaf,Bootstrap和JQuery,所以请原谅我的无知 . 我有一个以Thymeleaf和Bootstrap作为UI的spring-boot应用程序 . 我有一个用户列表,我在表格中显示并想要编辑它们 . 我目前的想法是,用户可以选择行上的图标,并将该记录填充到模式对话框中,可以通过调用进行更新 . 不确定这是不是最好,但它就是我现在的位置 .

这是我的HTML:

<div class="container">
        <div class="well well-lg">
            <div class="container-fluid">
                <h5>CNET OFAC Users</h5>

                <div th:if="${userList != null and not #lists.isEmpty(userList)}">
                    Found <span th:text="${#lists.size(userList)}"></span> Users
                </div>
                <div th:if="${userList == null or #lists.isEmpty(userList)}">
                    <div>"No Users were found"</div>
                </div>
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>UserName</th>
                        <th>Company</th>
                        <th>Role</th>
                        <th>Active</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="user : ${userList}">
                        <td th:text="${user.username}"></td>
                        <td th:text="${user.companyName}"></td>
                        <td th:text="${user.roles[0].authorities}"></td>
                        <td th:text="${user.enabled}"></td>
                        <td><a data-toggle="modal" data-target="#editModal"><span class="glyphicon glyphicon-edit"></span></a></td>

                    </tr>
                    </tbody>
                </table>
                <button data-target="#loginModal" data-toggle="modal" class="btn btn-default">Add User</button>

                <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
            </div>
        </div>
    </div>

其中包括更新表格:×编辑用户

<div class="modal-body">
            <form class="form-horizontal bv-form" action="addUser" th:action="@{/addUser}" th:object="${user}" method="put" id="loginForm">
                <div class="form-group">
                    <label class="col-md-3 control-label">Username</label>
                    <div class="col-md-5">
                        <input type="text" name="username" class="form-control" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label">Password</label>
                    <div class="col-md-5">
                        <input type="password" name="password" class="form-control" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label">Confirm Password</label>
                    <div class="col-md-5">
                        <input type="password" name="cpassword" class="form-control" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label">Company</label>
                    <div class="col-md-5">
                        <input type="text" name="companyName" class="form-control" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label">Status</label>
                    <div class="col-md-5">
                        <select class="form-control" name="enabled" th:field="*{enabled}">
                            <option value="true">Active</option>
                            <option value="false">Inactive</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-5 control-label">
                        <button class="btn btn-default" type="submit">Update</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div

我遇到的问题是如何使用单击编辑按钮的行上的记录填充此模态 . 用该记录值填充模态的最佳方法是什么,然后我可以将它提交给我的spring-mvc控制器进行更新?

2 回答

  • 0

    这是管理员界面吗?听起来像是一个你会看到用户列表并编辑它们的地方 .

    实现此目标的更简单方法是将它们带到编辑用户页面,而不是以模态进行 . 在这种情况下,一切都将是直接的HTML / CSS,您可以使用Spring / Hibernate验证来验证表单 .

  • 0

    我对你的代码不是很清楚 . 我假设您尝试为表中的每个数据集打开一个模态 . 如果我是对的,那么首先需要注意的事情 . 当您为动态生成的表的每一行填充模态时,您不能简单地添加具有单个ID的模态 . 您需要为每个表行生成模态ID . 那你为什么不改变这样的代码 -

    <td>
    
        <a data-toggle="modal" th:href="'#'+${user.id}"><span class="glyphicon glyphicon-edit"></span></a>
             
        <div class="modal fade" id="view-news" 
    th:id="${news.id}" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
          
          <!-- Every other codes for you modal -->
          
          
        </div>
    
        </td>
    

    我在这里做了什么基本上为每一行动态创建模态并为它们分配一个id然后用来找到它 .

相关问题