layui+springboot+thymeleaf 动态传参

昨天写了一个用户的信息详情,点击之后,跳转到对应页面,然后效果是这样的.

image.png

当时被这个这么大又单调的界面丑哭了,内心非常的苦闷,感觉这个界面存在的价值非常低下,
因为编辑界面也是类似这样的要这丑东西有什么用.
后来突然想到了layui,就像不如让管理员点击ID后,会弹出一个弹窗,显示用户的信息,然后可以叉掉.就像是这样

image.png

欧呦呦 感觉真是看上去舒服又可爱.然后就准备来实现一下,想了一下主要会遇到的问题就是传参 也就是你的id值 需要根据管理员点击不同的用户,传递不同的id,然后拼接url

我是这样考虑的,通过ajax来判断用户点击的index值,然后再通过我js在后台通过thymeleaf获取到的list,加上index值就可以获取到用户点击的id了,然后再通过url的拼接,将参数传递到url中,当然也可能有别的办法,但是我想到的比较方便的就是这样,亲测可用
然后js代码如下

    <script type="text/javascript" th:inline="javascript">
        layui.use('layer', function () {
            var layer = layui.layer;
            var page = [[${userList.rows}]];
            $(".queryInfo").on('click', function () {
                    var i = $(this).index();
                    var id = page[i].id;
                    var url = '/users/'+id+'/queryInfo';
                    layer.open({
                        skin:'layui-layer-molv',
                        type: 2,
                        title: '用户信息详情',
                        maxmin: true,
                        shadeClose: true, //点击遮罩关闭层
                        area : ['800px' , '520px'],
                        content: url,
                        shade:0.8,
                        anim:5,
                    })
                }
            )
        });
    </script>

你就可以拥有同款弹窗