<table class="layui-hide" id="test" lay-filter="table"></table>
操作
<script type="text/html" id="toolBar"> <a class="layui-icon" style="font-size: 25px; color: #1AA094;" lay-event="edit"></a> <a class="layui-icon" style="font-size: 25px; color: #1AA094;" lay-event="del"></a>
<script type="text/javascript"> layui.use(['form','layer','table','upload'], function(){ var table = layui.table ,form = layui.form, upload = layui.upload, layer=layui.layer; table.render({ elem: '#test' ,url:'manager/store/list' ,cellMinWidth: 80 ,cols: [[ {type:'numbers'} ,{field:'storeName', title:'店铺名'} ,{fixed: 'right',title: '操作', width:180, align:'center', toolbar: '#toolBar'} //绑定tpl表达式 ]] ,page: true //开启分页 ,id: 'testReload' //这个id挺重要的 你对table做操作时候需要使用到 比如reload的时候 }); <!-- 这是表格查询的 这里根据店铺名和用户昵称还有手机号码查询 查询框自己任意放位置 这里注意的方法是 table.reload('table的id',{});重新载入数据--> var $ = layui.$, active = { reload: function(){ var storeName = $.trim($('#storeName').val()); var userNickName = $.trim($('#userNickName').val()); var phone = $('#phone').val(); table.reload('testReload', { where: { storeName: storeName ,userNickName: userNickName ,phone: phone } }); } }; //监听查看，删除、编辑按钮--------这里就是上面说的lay-event绑定 table.on('tool(table)', function(obj){ var data = obj.data; if(obj.event === 'del'){ layer.confirm('真的删除行么', function(index){ var json=eval('('+JSON.stringify(data)+')');//String转json log(json['storeId']) $.post("manager/store/delete",{"storeIds":json['storeId']},function(msg){ if(msg.code==0){ obj.del(); layer.close(index); }else{ layer.msg('删除失败！'); } }) }); //编辑 } else if(obj.event === 'edit'){ var json=eval('('+JSON.stringify(data)+')');//String转json layerOpen('web/store/add?storeId='+json['storeId'],'编辑店铺信息','670px;', '530px;'); } }); <!-- 查询框中查询按钮click事件 最终调用的是上面的那个active方法--> $('.demoTable .layui-btn').on('click', function(){ var type = $(this).data('type'); active[type] ? active[type].call(this) : ''; }); //这里没什么 就是我自己新增的一个添加页面按钮 layerOpen是自己封装的方法 $('.demoTable #add').on('click', function(){ return aler("非法操作,正式运行下不会有添加功能,你可以尝试解锁"); layerOpen('web/store/add','添加店铺信息','670px;', '530px;'); }); }) </script>
