欢迎您来到“名字什么都是浮云”的博客空间!

layUI 页面多个table监听事件处理

一个页面上出现多个table时,监听事件中获取id出现问题,类似代码如下:

当2个table都有编辑监听事件时,获取id值,出现undfied值或者取值错误。

<div style="display: none">
    <script type="text/html" id="Bar1">
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
    </script>
    <script type="text/html" id="Bar2">
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
    </script>
</div>
<script>
    layui.use(['layer', 'table', 'form'], function (layer, table, form) {
        var table1 = layui.table;
        var table2 = layui.table;

        table1.render({
            elem: '#table1'
            , cols: [[
                , { /*fixed: 'right',*/ title: '操作', width: 130, align: 'left', toolbar: '#Bar1' }
            ]]
            , id: 'Id' //  id为:1001,1002,1003
            //  ...省略
        });

        table2.render({
            elem: '#table12'
            , cols: [[
                , { /*fixed: 'right',*/ title: '操作', width: 130, align: 'left', toolbar: '#Bar2' }
            ]]
            , id: 'Id' // id为:1,2,3
            //  ...省略
        });

        table1.on('tool(table1)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            switch (obj.event) {
                case 'edit':
                    edit(data.Id, obj);   //  data.Id是undfied,undfied,undfied或者data.Id是1,2,3
                    break;
            }
        });

        table2.on('tool(table2)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            switch (obj.event) {
                case 'edit':
                    edit(data.Id, obj);  //  data.Id是1,2,3或者是undfied,undfied,undfied
                    break;
            }
        });
    });
</script>

解决办法:

去掉工具栏模板代码Bar1和Bar2的:lay-event="edit" 使用onclick事件,去掉 table1.on('tool(table1)', function (obj) 和 table2.on('tool(table1)', function (obj) 

<div style="display: none">
    <script type="text/html" id="Bar1">
        <a class="layui-btn layui-btn-normal layui-btn-xs" onclick="edit({{d.Id}})"><i class="layui-icon layui-icon-edit"></i>编辑</a>
    </script>
    <script type="text/html" id="Bar2">
        <a class="layui-btn layui-btn-normal layui-btn-xs" onclick="edit({{d.Id}})"><i class="layui-icon layui-icon-edit"></i>编辑</a>
    </script>
</div>

 

posted @ 2020-07-29 22:18  名字什么都是浮云  阅读(4256)  评论(0)    收藏  举报