Layui 数据表格批量删除和多条件搜索的实例
作者:彬_心 时间:2024-04-10 10:43:56
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>
来源:https://blog.csdn.net/u014012093/article/details/83341850
标签:Layui,表格,删除,搜索
0
投稿
猜你喜欢
php获取给定日期相差天数的方法分析
2024-05-02 17:34:20
表单相关特效整理
2013-06-29 15:42:26
浅谈pc端rem字体设置的问题
2024-05-22 10:27:44
python自动化测试之从命令行运行测试用例with verbosity
2021-09-20 07:32:16
常见的在Python中实现单例模式的三种方法
2022-11-08 01:42:09
python爬虫 正则表达式解析
2022-07-16 18:24:01
MySQL查询缓存优化示例详析
2024-01-27 12:21:32
python将邻接矩阵输出成图的实现
2022-11-12 01:58:39
python map比for循环快在哪
2021-06-16 09:39:04
如何利用python的tkinter实现一个简单的计算器
2021-09-12 09:19:52
Python tkinter实现简单加法计算器代码实例
2024-01-03 03:58:49
python模块导入的方法
2023-08-23 06:54:38
Python requests模块cookie实例解析
2023-11-18 15:44:56
交互设计的方法
2010-08-18 12:32:00
Django中的CACHE_BACKEND参数和站点级Cache设置
2022-03-19 11:54:47
解决PyCharm同目录下导入模块会报错的问题
2023-06-12 22:39:55
numpy.random.seed()的使用实例解析
2023-01-04 07:11:26
程序员的七种武器
2008-11-01 17:13:00
使用pandas的DataFrame的plot方法绘制图像的实例
2023-07-02 08:33:52
python实现中文文本分句的例子
2023-02-15 12:16:24