thymeleaf模板下table无法获取data数据,但可以监听到事件,求大哥们帮忙看看,感谢。

提问 已结 22 580
flyer187961
flyer187961 2020-2-21
悬赏:20飞吻
版本:layui 浏览器:


在thymeleaf模板下无法正常获取数据,但可以监听到事件,此段代码在非thymeaf的web容器下可以正常获取到数据,已经卡了一整天了,麻烦大家帮帮忙看看怎么回事
回帖
  • 0 回复
  • thymeleaf下都是能成功监听到事件,点击后控制台打印中数据域和tr均无法正常获取。但我直接用hbuilder直接跑是可以正常获取数据的,有没有人遇到过同样的问题,或者有其他获取table行数据的方法。十分感谢。
    0 回复
  • layui2.5版本,换了最新版也一样
    0 回复
  • 在线等[泪]
    0 回复
  • table表格数据显示么
    0 回复
  • @咔咘奇诺 表格显示正常,从服务端拉下来的也可以正常显示,就是table.on只能监听到事件,拿不到数据,这是thymeleaf环境下的,我不用themeleaf,hbuilder跑普通的html同样的代码是可以监听并拿到数据的,我感觉是thymeleaf渲染后破坏了某些东西导致layui拿不到数据
    0 回复
  • @flyer187961 我也用的thymeleaf 我就可以拿到数据
    0 回复
  • @flyer187961 截图你的table容器html
    0 回复
  • @咔咘奇诺

    <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" type="text/css" th:href="@{/layui/css/layui.css}" >
    <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
    </head>
    <body>

    <table class="layui-hide" id="test" lay-filter="test"></table>

    <script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
    </div>
    </script>

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


    <script type="text/javascript" th:src="@{/layui/layui.js}"></script>
    <!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->

    <script>
    layui.use('table', function(){
    var table = layui.table;

    table.render({
    elem: '#test'
    ,toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板
    ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义,去除该参数即可
    title: '提示'
    ,layEvent: 'LAYTABLE_TIPS'
    ,icon: 'layui-icon-tips'
    }]
    ,title: '用户数据表'
    ,cols: [
    [
    {type: 'checkbox', fixed: 'left'}
    ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
    ,{field:'username', title:'用户名', width:120, edit: 'text'}
    ,{field:'email', title:'邮箱', width:150, edit: 'text', templet: function(res){
    return '<em>'+ res.email +'</em>'
    }}
    ,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
    ,{field:'city', title:'城市', width:100}
    ,{field:'sign', title:'签名'}
    ,{field:'experience', title:'积分', width:80, sort: true}
    ,{field:'ip', title:'IP', width:120}
    ,{field:'logins', title:'登入次数', width:100, sort: true}
    ,{field:'joinTime', title:'加入时间', width:120}
    ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
    ]
    ],data: [{
    "id": "10001"
    ,"username": "杜甫"
    ,"email": "xianxin@layui.com"
    ,"sex": "男"
    ,"city": "浙江杭州"
    ,"sign": "人生恰似一场修行"
    ,"experience": "116"
    ,"ip": "192.168.0.8"
    ,"logins": "108"
    ,"joinTime": "2016-10-14"
    }, {
    "id": "10002"
    ,"username": "李白"
    ,"email": "xianxin@layui.com"
    ,"sex": "男"
    ,"city": "浙江杭州"
    ,"sign": "人生恰似一场修行"
    ,"experience": "12"
    ,"ip": "192.168.0.8"
    ,"logins": "106"
    ,"joinTime": "2016-10-14"
    ,"LAY_CHECKED": true
    }, {
    "id": "10003"
    ,"username": "王勃"
    ,"email": "xianxin@layui.com"
    ,"sex": "男"
    ,"city": "浙江杭州"
    ,"sign": "人生恰似一场修行"
    ,"experience": "65"
    ,"ip": "192.168.0.8"
    ,"logins": "106"
    ,"joinTime": "2016-10-14"
    }, {
    "id": "10004"
    ,"username": "贤心"
    ,"email": "xianxin@layui.com"
    ,"sex": "男"
    ,"city": "浙江杭州"
    ,"sign": "人生恰似一场修行"
    ,"experience": "666"
    ,"ip": "192.168.0.8"
    ,"logins": "106"
    ,"joinTime": "2016-10-14"
    }, {
    "id": "10005"
    ,"username": "贤心"
    ,"email": "xianxin@layui.com"
    ,"sex": "男"
    ,"city": "浙江杭州"
    ,"sign": "人生恰似一场修行"
    ,"experience": "86"
    ,"ip": "192.168.0.8"
    ,"logins": "106"
    ,"joinTime": "2016-10-14"
    }, {
    "id": "10006"
    ,"username": "贤心"
    ,"email": "xianxin@layui.com"
    ,"sex": "男"
    ,"city": "浙江杭州"
    ,"sign": "人生恰似一场修行"
    ,"experience": "12"
    ,"ip": "192.168.0.8"
    ,"logins": "106"
    ,"joinTime": "2016-10-14"
    }, {
    "id": "10007"
    ,"username": "贤心"
    ,"email": "xianxin@layui.com"
    ,"sex": "男"
    ,"city": "浙江杭州"
    ,"sign": "人生恰似一场修行"
    ,"experience": "16"
    ,"ip": "192.168.0.8"
    ,"logins": "106"
    ,"joinTime": "2016-10-14"
    }, {
    "id": "10008"
    ,"username": "贤心"
    ,"email": "xianxin@layui.com"
    ,"sex": "男"
    ,"city": "浙江杭州"
    ,"sign": "人生恰似一场修行"
    ,"experience": "106"
    ,"ip": "192.168.0.8"
    ,"logins": "106"
    ,"joinTime": "2016-10-14"
    }]
    ,page: true
    });

    //头工具栏事件
    table.on('toolbar(test)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id);
    console.log(obj)
    switch(obj.event){
    case 'getCheckData':
    var data = checkStatus.data;
    layer.alert(JSON.stringify(data));
    break;
    case 'getCheckLength':
    var data = checkStatus.data;
    layer.msg('选中了:'+ data.length + ' 个');
    break;
    case 'isAll':
    layer.msg(checkStatus.isAll ? '全选': '未全选');
    break;

    //自定义头工具栏右侧图标 - 提示
    case 'LAYTABLE_TIPS':
    layer.alert('这是工具栏右侧自定义的一个图标按钮');
    break;
    };
    });

    //监听行工具事件
    table.on('tool(test)', function(obj){
    var data = obj.data;
    console.log(obj)
    if(obj.event === 'del'){
    layer.confirm('真的删除行么', function(index){
    obj.del();
    layer.close(index);
    });
    } else if(obj.event === 'edit'){
    layer.prompt({
    formType: 2
    ,value: data.email
    }, function(value, index){
    obj.update({
    email: value
    });
    layer.close(index);
    });
    }
    });
    });
    </script>

    </body>
    </html>
    0 回复
  • @咔咘奇诺 还是controller跳转的问题
    0 回复