DDR爱好者之家 Design By 杰米
layui数据表格批量删除
多条件搜索框:注样式自己写 <div class="demoTable" style="width: 968px; margin:20px auto;color: #7185a2"> 流水号: <div class="layui-inline"> <input class="layui-input" name="FlowNumber" id="FlowNumber" autocomplete="off" style="height:30px;border:1px solid #7185a2"> </div> 账号: <div class="layui-inline"> <input class="layui-input" name="UserName" id="UserName" autocomplete="off" style="height:30px;border:1px solid #7185a2"> </div> 咨询主题: <div class="layui-inline"> <input class="layui-input" name="Topic" id="Topic" autocomplete="off" style="height:30px;border:1px solid #7185a2"> </div> 时间: <div class="layui-inline"> <input class="layui-input" name="Time" id="Time" autocomplete="off" style="height:30px;border:1px solid #7185a2"> </div> <button class="layui-btn" data-type="reload" style="height:30px;background:#7185a2;line-height:30px;">搜索</button> </div> 删除按钮 <button class="layui-btn" data-type="getCheckData" style="background:#7185a2">批量删除</button> <table id="dataProject" class="layui-table" lay-filter="test"></table> <!--数据表格渲染-->
<script> layui.use(['table','laydate'], function(){ var table = layui.table; laydate = layui.laydate; //第一个实例 laydate.render({ elem: '#Time' ,theme: '#7185a2' }); table.render({ elem: '#dataProject' //渲染dom ,url: './json/servertheme.json' //数据接口 ,request:{ pageName: 'page' //页码的参数名称,默认:page ,limitName: 'size' //每页数据量的参数名,默认:limit } ,response: { statusName: 'code' //数据状态的字段名称,默认:code ,statusCode: 0 //成功的状态码,默认:0 ,msgName: '' //状态信息的字段名称,默认:msg ,countName: 'count' //数据总数的字段名称,默认:count ,dataName: 'data' //数据列表的字段名称,默认:data } ,cols: [[ //表头 // {field: 'projectId', title: 'ID', width:10} {type: 'checkbox', fixed: 'left'} ,{field: 'FlowNumber', title: '流水号', width:91} ,{field: 'UserName', title: '账号',width:103} ,{field: 'projectName', title: '咨询主题',width:146} ,{field: 'projectShiXiang', title: '涉及事项',width:136} ,{field: 'time', title: '咨询时间',width:140} ,{field: 'state', title: '状态',width:87} ,{field: 'operation', title: '操作',toolbar:'#barDemo',width:140} ]] ,page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档 layout: [ 'prev', 'page', 'next', 'skip', 'count'] //自定义分页布局 ,groups: 3 //只显示 1 个连续页码 ,first: '首页' //不显示首页 ,last: '尾页' //不显示尾页 ,theme: '#7185a2' } ,id: 'testReload' ,limit:6 }); table.on('tool(test)', function(obj) {//申报按钮 var data = obj.data; var dataTitle =data.projectName; if(obj.event ==="lookProject"){ var url='serverInfo.html' //弹框部分 layer.open({ type: 2, title:'查看——'+dataTitle, shadeClose: true, shade: 0.8, offset:"100px", move:false, resize:false, scrollbar:false, area: ['700px', '150px'], content:[url] }) }else if(obj.event ==="del"){ var projectId = data.projectId; } }) var $ = layui.$, active = { //注释:layui 搜索模块 Start reload: function(){ var FlowNumber = $('#FlowNumber').val(); var UserName = $('#UserName').val(); var Topic = $('#Topic').val(); var Time = $('#Time').val(); table.reload('testReload', { page: { curr: 1 } ,where: { FlowNumber: FlowNumber ,UserName: UserName ,Topic: Topic ,Time: Time } }); }, //注释:layui 搜索模块 End //注释:layui 批量删除 Start getCheckData:function(){ var checkStatus = table.checkStatus('testReload');// table.checkStatus是Layui中自带,id: 'testReload'可自定义 if(checkStatus.data.length==0){ parent.layer.msg('请先选择要删除的数据行!', {icon: 2}); return ; } var codeId= ""; for(var i=0;i<checkStatus.data.length;i++){ codeId += checkStatus.data[i].id+","; } parent.layer.msg('删除中...', {icon: 16,shade: 0.3,time:5000}); // 注释:把删除接口替换成url,http:///www.baidu.com只是案例地址 layer.confirm("您确定要删除吗?"+codeId,function(){ $.ajax({ type:"POST", url: './json/servertheme.json', data:{"id":codeId}, success:function (data) { layer.closeAll('loading'); if(data.code==1){ parent.layer.msg('删除成功!', {icon: 1,time:2000,shade:0.2}); location.reload(true); }else{ parent.layer.msg('删除失败!', {icon: 2,time:3000,shade:0.2}); } } }) }) }; //注释:layui 批量删除 End //通用按钮 $('.layui-btn').on('click', function(){ var type = $(this).data('type'); active[type] ? active[type].call(this) : ''; }); }); </script>
以上这篇Layui 数据表格批量删除和多条件搜索的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年11月25日
2024年11月25日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]