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