2018-07-14 layUI 2.x
2018-08-08 本文已影响0人
土豆丝炒洋芋丝
table模块 - layui.table - 实例
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <form id="form" class="layui-form layui-form-pane"> <div class="layui-inline"> <input class="layui-input" name="fuzzy" placeholder="关键字搜索" autocomplete="off"> </div> <button type="button" id="searchkeyword" class="layui-btn" data-type="reloadIccid">搜索></button> </form> <table class="layui-hide" id="all" lay-filter="demo"></table> <script type="text/html" id="barDemo1"> {{# if(d.role_id != 3){ }} <!-- 如果接收的role_id不等于3说明该用户有下级编辑栏显示查看按钮 --> <a class="layui-btn layui-btn-primary layui-btn-xs " lay-event="detail">查看下级</a> {{# } else { }} <!-- 如果接收的role_id等于3说明该用户为普通按钮 显示个假按钮 --> <a class="layui-btn layui-btn-xs layui-btn-danger">普通用户</a> {{# } }} </script> <script> $(function(){ layui.use(['laypage', 'layer', 'table'], function(){ var laypage = layui.laypage //分页 ,layer = layui.layer //弹层 ,table = layui.table; //表格 //监听工具条 删，改，查 table.on('tool(demo)', function(obj){ //注：tool是工具条事件名，demo是table原始容器的属性 lay-filter="对应的值" var data = obj.data //获得当前行数据 ,layEvent = obj.event; //获得 lay-event 对应的值 if(layEvent === 'detail'){ var index = layer.open({ //此 type: 2, //处 content: "{:U('User/oneList')}?id=" + data.id,//为 area: ['700px', '450px'], //全 maxmin: true //屏 }); //弹 layer.full(index); //出 console.log(data); } // if(layEvent === 'detail'){ //查看 // //do somehing // } else if(layEvent === 'del'){ //删除 // layer.confirm('真的删除行么', function(index){ // obj.del(); //删除对应行（tr）的DOM结构，并更新缓存 //复 // layer.close(index); // //向服务端发送删除指令 //制 // }); // } else if(layEvent === 'edit'){ //编辑 //的 // //do something // //官 // //同步更新缓存对应的值 // obj.update({ //网 // username: '123' // ,title: 'xxx' //上 // }); // } //的 }); //执行一个 全部user table table.render({ // 默认接受的数据格式：{ code: 0, msg: "", count: 1000, data: [] } elem: '#all' ,url: "{:U('User/generalList')}" //数据接口 ,method: 'post' //,where: {token: 'sasasas', id: {$id}} ,height: 'auto' ,width: 'auto' ,limit: 10 ,page: true ,loding: true ,request: { pageName: 'page' } ,cols: [[ // templet - 自定义列模板 {checkbox: true} ,{field: 'id', title: 'id', width: 60, sort: true} ,{field: 'name', title: '用户名', width: 120} ,{fixed: 'right', title: '操作', width: 100, align:'center', toolbar: '#barDemo1',templet: '#barDemo1'} ]] ,done: function(res, curr, count){ console.log(res); return false; } }); //搜索加载--数据表格重载 搜索框 var $ = layui.$, active = { reloadIccid: function () { //此处的 reloadIccid 命名是和上面的搜索按钮 data-type 的值相同 //执行重载 table.reload('all', { page: { curr: 1 //重新从第 1 页开始 } , where: { fuzzy: $("input[name=fuzzy]").val() } }); } }; // 绑定click点击事件 绑定搜索框搜索按钮 $('#searchkeyword').on('click', function () { var type = $(this).data('type'); active[type] ? active[type].call(this) : ''; }); }); }); </script> </body> </html>
