记录table编辑功能从thymeleaf迁移至layUI框架的过程

本篇仅记录个人项目中，table编辑功能从thymeleaf迁移至layUI框架的过程。

无过多参考引用意义，就当帮自己爬坑了。

在thymeleaf模板引擎下，根据thymeleaf的语法规则，可以直接在html元素上进行数据绑定和参数传输，很多强大的前端框架，比如Angular，都有这样的功能。

因为需要使用layui的一些插件完成分页等功能，就引入了layui框架。但是在layui中依据thymeleaf语法规则写出的一些代码得不到渲染，无法生效。原本的编辑删除功能需要重写，将爬坑过程记录于此。

---

在thymeleaf模板引擎下

thymeleaf模板引擎实在太方便了，甚至不用写什么js代码

html文件

<td>
	<a class="btn btn-sm btn-primary" th:href="@{/staff/}+${staff.account}">编辑a>
	<button th:attr="del_uri=@{/staff/}+${staff.account}" class="btn btn-sm btn-danger deleteBtn">删除button>
td>

后端controller

    /**
     * 来到修改页面，查出当前员工，在页面回显
     * @param account
     * @param model
     * @return
     * @throws SQLException
     */
    @GetMapping("/staff/{account}")
    public String toEditPage(@PathVariable("account") String account, Model model)throws SQLException{
        System.out.println("进入后台员工编辑方法："+account);

        B01BaseInfo_Staffs staff = staffMapper.getStaffByAcc(account);
        model.addAttribute("staff",staff);

        System.out.println("==查询到的员工信息为："+staff);

        // 回到修改页面
        return "staff/edit";
    }

---

引入layUI框架后

html

<div>
	
	<table id="Usertable" class="table table-striped table-sm" lay-filter="Usertable">table>
div>

自定义模板引入a标签

<script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

控制js文件

<script type="text/html" id="barDemo">
	    $(function() {$ = layui.jquery;
    	layui.use(['form', 'laypage', 'layer', 'table'], function(){
        var form = layui.form
            ,laypage = layui.laypage //分页
            ,layer = layui.layer //弹层
            ,table = layui.table //表格

        // 监听工具条
		//tool里面的不是table的ID,而是table中设置的属性：lay-filter的值
        table.on('tool(Usertable)', function(obj) { // 注：tool是工具条事件名，test是table原始容器的属性

            var data = obj.data // 获得当前行数据
                , layEvent = obj.event; // 获得 lay-event 对应的值
            if ('edit' == layEvent) {
                console.log("即将进入对"+data.account+"进行编辑");
                edit(data.account);
//                edit(obj);
            } else if ('del' == layEvent) {
                console.log("即将进入function of delete");
                //del(data.account);
                del(obj); // 函数调用
            }
        });
    });


    function edit(account) {
        jQuery.ajax({
            type: "post",
        	url : "/user/editStaff",
            data : {
                "account" : account
            },
            dataType : "text",
			success : function(msg) {
                if(msg!=null){
                    window.location = "/staff/"+account;
                    //layer.close(index);
                }else{
                    //layer.msg(" ");
                }
            },
            error : function() {
            }
        });
    }

    function del(obj) {
        layer.open({
            type : 1,
            content : '
确定删除记录?
',
            btn : [ '确定', '取消' ],
            yes : function(index, layero) {
                jQuery.ajax({
                    url : "/user/delete",
                    data : {
                        "account" : obj.data.account
                    },
                    dataType : "text",
                    success : function(data) {
                        if(data==0){
                            layer.msg("删除成功！");
                            obj.del(); // 删除对应行（tr）的DOM结构，并更新缓存
                            layer.close(index);
                        }else{
                            layer.msg("删除失败！");
                        }
                    },
                    error : function() {
                    }
                });
            }
        });
    }
</script>

后端controller

在这里，controller的返回值

@Controller
@RequestMapping("/user")
public class StaffControllerPage {

    /**
     * 编辑员工信息
     * @param request
     * @param account
     * @param model
     * @return
     * @throws SQLException
     */
    @RequestMapping("/editStaff")
    @ResponseBody
    public String toEditPage(HttpServletRequest request,String account, Model model)throws SQLException{
        System.out.println("进入后台员工编辑方法："+account);

        B01BaseInfo_Staffs staff = staffMapper.getStaffByAcc(account);
        model.addAttribute("staff",staff);

        System.out.println("查询到的员工信息为："+staff);

        // 回到修改页面

        //return "staff/edit";

        return "staff/edit;";
    }
}

---

一些记录

比较耗时的过程在编辑功能的前端上，想法是点击table中的 “ 编辑 ” a标签，用 js 将对应行的数据传到后台，后端查出对应数据显示在之前的编辑页面上。

其实前端只是向后台传送了数据，并没有获取后台返回的数据，而是直接将页面重定向到了编辑页。

这里后端返回的是一个字符串，表示发起的请求。

根据控制台输出可以看到查询方法由不同的controller调用了两次：

就是说查询方法在ajax请求发起的时候执行了一次，在页面重定向的时候又发起了一次；且第二次请求是携带参数的。

那么是不是可以仅在页面重定向的时候发起一个带参数的请求而不进行Ajax请求？这也是最初未使用layUI框架时的方法。

将edit方法改成下面的：

function edit(account) {
    window.location = "/staff/"+account;
}

刷新页面，点击 “ 编辑 ”。页面跳转成功，控制台输出如下：

一行代码就可以解决问题，而且避免了ajax发起http请求是可能出现的潜在bug