一个页面上出现多个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>