當Thymeleaf遇到向js中傳值的操作
阿新 • • 發佈:2019-02-28
dex data 點擊 func 關於 ima 當前 checkbox query
在使用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中傳值的操作