<!-- 表格头按扭功能 --> <script type="text/html" id="toolbarDemo"> <div class=""> <button type="button" lay-event="arr_verification" class="layui-btn layui-btn-sm">验证</button> <button type="button" lay-event="add" class="layui-btn layui-btn-warm layui-btn-sm">添加</button> <button type="button" lay-event="del" class="layui-btn layui-btn-danger layui-btn-sm">删除</button> </div> </script> <!-- 表格内功能 --> <script type="text/html" id="getDome"> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="verification">验证</a> <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a> </script> //表格 <div class="tab_div"> <table lay-filter="list" lay-data="{height: 'full-100%'}" class="layui-hide" id="table_dom"></table> <div style="clear: both"></div> </div> //功能初始化 layui.use('table', function(){ var table = layui.table; //展示已知数据 table.render({ //... }) //监听单元格编辑 表头加上 edit: 'text' table.on('edit(list)', function(obj){ console.log(obj.tr) //得到当前行元素对象 console.log(obj.data) //得到当前行数据 var value = obj.value //得到修改后的值 ,data = obj.data //得到所在行所有键值 ,field = obj.field; //得到字段 layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为:'+ value); alert(obj.event) }); //监听表格里按扭事件 list 为表格里的属性lay-filter table.on('tool(list)', function(obj){ console.log(obj.data)//当前行 字符串 //对应lay-event 内容 if(obj.event == "edit"){ //编辑 return; } //验证功能 if(obj.event =="verification"){ //数据转数组 item = [obj.data]; //验证 return; } if(obj.event =="del"){ item=[obj.data] //删除 return; } }); //头部工具 list 为表格里的属性lay-filter table.on('toolbar(list)', function(obj) { var checkStatus = table.checkStatus(obj.config.id); //对应 lay-event 值 switch(obj.event) { //验证功能 case 'arr_verification': item = checkStatus.data;//数组 // layer.alert(JSON.stringify(data)); break; //添加功能 case 'add': //标题 HTML内容的ID 按扭1回调 show_model_content("添加数据","add_c",add_save);//显示添加窗口 break; //删除功能 case 'del': item = checkStatus.data; break; } }); //监听表格里的checkbox table.on('checkbox(list)', function(obj){ console.log(obj.data); //得到select原始DOM对象 console.log(obj.data.id); //得到被选中的值 }); }) //页面定位 //单表可用元素获取得到 alert("页面"+$(".layui-laypage-em").next().html()) alert("条数"+$(".layui-laypage-limits").find("option:selected").val()) //分页数目 //多个表格,在表格元素上面加上一层div 给个id <div class="tab_div"> <table lay-filter="list" lay-data="{height: 'full-100%'}" class="layui-hide" id="table_dom"></table> <div id="page"></div> <div style="clear: both"></div> </div> alert($(".tab_div .layui-laypage-em").next().html()) alert($(".tab_div .layui-laypage-limits").find("option:selected").val()) //分页数目 //第二种方法 通过临时变量 var limit=10; var page=0; ...代码省略 ,where:json ,parseData: function(res){ //res 即为原始返回的数据 //通过异步数据对接,获取服务器返回的页码与条数 limit=res.data.size; page=res.data.number; return { "code": 0, //解析接口状态 "msg": res.msg, //解析提示文本 "count": res.data.totalElements, //解析数据长度 "data": res.data.content //解析数据列表 }; } ,page:true //第三种 回调方法 table.render({ //其它参数在此省略 done: function(res, curr, count){ //如果是异步请求数据方式,res即为你接口返回的信息。 //如果是直接赋值的方式,res即为:{data: [], count: 99} data为当前页数据、count为数据总长度 console.log(res); //得到当前页码 console.log(curr); //得到数据总量 console.log(count); } }); //页面跳转或刷新 多表请按上面多表内容处理 $(".layui-laypage-btn").click();//可以刷新页面 实际是单击页面确认按扭 $(".layui-laypage-skip").find("input").val(1);//跳到指定页面
关注"都市百货" 了解南陵
微信咨询wanglf2r(不拉群 发广告者勿加)
热门评论