使用弹出层来实现修改数据的功能

以前数据的增删改查的功能都是通过另一个专门的页面来完成，最近做一个小项目的过程中，想使用弹出层来做。

做好之后就是这个样子了。

HTML:

<table class="ui compact celled table">
    <thead>
        <tr>
            <th class="one wide">序号</th>
            <th class="eight wide">名称</th>
            <th class="one wide">操作</th>
        </tr>
    </thead>
    <tbody>
         <tr th:each="tag, iterStat : ${pageInfo.list}">
             <td data-label="id" th:text="${iterStat.count}">1</td>
             <td data-label="name" th:text="${tag.name}">James</td>
             <td data-label="operation">
                 <div class="ui blue button icon btn_update" th:onclick="initUpdateDiv([[${tag.id}]],[[${tag.name}]])" onclick="initUpdateDiv(1,'ymzh')">
                     <span>编辑</span>
                     <i class="edit icon"></i>
                 </div>
                 <a th:href="@{/admin/tags/{id}/delete(id=${tag.id})}" class="ui black deny button icon">
                     <span>删除</span>
                     <i class="remove icon"></i>
                 </a>
             </td>
        </tr>
    </tbody>
</table>



/*  弹出层  */
<div id="updateDiv" class="ui modals page">
    <div class="ui updateDiv small test modal">
        <div class="ui segments">
            <div class="ui compact segment">
                <h2 class="ui header center aligned">
                    修改分类
                </h2>
            </div>
            <div class="ui compact segment">
                <form action="#" method="post" th:action="@{/admin/tags/update" class="ui form segment">
                    <br>
                    <br>

                    <div class="field">
                        <input id="idOfUpdate" name="idOfUpdate" hidden>
                    </div>
                    <div class="field">
                        <h4 class="ui header">名称</h4>
                        <input id="nameOfUpdate" name="nameOfUpdate" type="text" >
                    </div>
                    <br>
                    <br>
                    <div class="ui error mini message" style="font-size: 12px"></div><!--表单非空验证的消息提示区-->

                    <div class="ui divider"></div>
                    <div class="field">
                        <div class="ui large positive fluid right labeled icon button submit">
                            submit
                            <i class="checkmark icon"></i>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>

编辑按钮的 btn_update , 是调用弹出层需要用到的，并没有其他属性。

还有 onclick 函数 initUpdateDiv(1,'ymzh')  ，这个函数是用来初始化弹出层的一些数据。

JS:

<script>
    
    $(".ui.modal.updateDiv").modal("attach events", ".btn_update", "show");

    function initUpdateDiv(id,name)
    {
        //设置传递的参数
        document.getElementById("idOfUpdate").value=id;
        document.getElementById("nameOfUpdate").value=name;
    }

</script>

第一行是semantic UI 的语法，用来给按钮添加弹出层功能，

下面的函数是用来设置弹出层的值。