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>

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM