当Thymeleaf遇到向js中传值的操作

在使用Thymeleaf的时候。关于一些点击操作非常头疼。往往需要向JS里面传递各种东西。

然而，在用Thymeleaf的时候。js操作需要拼接语句。但是又不好拼接。

关于一些操作，一般也是在表格中。这次所用的是layui table，和bootstrap table差不多。

这个方法最主要的是不用去拼接了。可以直接在js中获取内容。然后传入js方法。

要想实现自定义事件，需要添加选择器。也就是下面中的

lay-filter="artTable"  在后面的js中会使用到

<table  class="layui-table" id="articleList" lay-filter="artTable"></table>

            <script type="text/html" id="operateTpl">

                <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>  //与下面的js一起使用。判断是不是当前事件

                <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>

<script>

    layui.extend({

        admin: '{/}../../static/js/admin'

    });

    layui.use(['table', 'jquery','form', 'admin'], function() {

        var table = layui.table,

                $ = layui.jquery,

                form = layui.form,

                admin = layui.admin;

        table.render({

            elem: '#articleList',

            cellMinWidth: 80,

            url: '/article/artList', //数据接口,

            method: 'get',

            cols: [

                [{

                    type: 'checkbox'

                }, {

                    field: 'id', title: 'ID', sort: true

                }, {

                    field: 'title', title: '标题', templet: '#usernameTpl'

                }, {

                    field: 'createTime', title: '发布时间', sort: true

                }, {

                    field: 'name', title: '分类', sort: true

                }, {

                    field: 'isDel', title: '状态', sort: true

                }, {

                    field: 'operate', title: '操作', toolbar: '#operateTpl', unresize: true

                }]

            ],

            event: true,

            page: true

        });

        table.on('tool(artTable)', function(obj){   //这里的artTable就是上面所说的选择器。 detail与最上面的html代码一起使用，判断是否是当前事件

            var data = obj.data;

            if(obj.event === 'detail'){

                // layer.msg('ID：'+ data.id + ' 的查看操作');

                WeAdminShow('查看文章','/article/show/'+data.id,1600,650)   //要实现的方法。直接传入。不用拼接

            } else if(obj.event === 'del'){

                layer.confirm('真的删除行么', function(index){

                    obj.del();

                    layer.close(index);

                });

            } else if(obj.event === 'edit'){

                // layer.alert('编辑行：<br>'+ JSON.stringify(data))

                WeAdminEdit1('编辑','/article/update/'+data.id,1600,650);

            }

        });

    });

</script>

巴特西

当Thymeleaf遇到向js中传值的操作

最新文章

热门文章