-
Layui数据表格点击事件实现其他表格的多条件查询
2019-04-18 08:33:09在关联表查询时,往往会出现一对多的关系,这种表格一般情况下不适合联表查询,经常会拆分为两个表格进行查询,这种时候就适用此功能! 代码如下: var tableSupplier;//供应商 var tableSupplierLinkman;//供应商...开发工具与关键技术:MVC、C#、Layui
作者:张俊辉
撰写时间:2019年04月17日- 在关联表查询时,往往会出现一对多的关系,这种表格一般情况下不适合联表查询,经常会拆分为两个表格进行查询,这种时候就适用此功能!
代码如下:
var tableSupplier;//供应商 var tableSupplierLinkman;//供应商联系人 //表格渲染 layui.use(['table', 'layer'], function () { var table = layui.table; var layer = layui.layer; //供应商信息表 tableSupplier = table.render({ elem: '#Supplier' , method: 'post' , toolbar: '#toolbarDemo' , id: 'idTest' , url: 'SelectSupplier' //数据接口 , page: true //开启分页 , cols: [[ //表头 //具体相关参数请产考Layui说明文 ]] , limit: 5 , response: { statusName: 'success' //规定数据状态的字段名称,默认:code , statusCode: true //规定成功的状态码,默认:0 , countName: 'totalRows' //规定数据总数的字段名称,默认:count } , request: { pageName: 'curPage' //页码的参数名称,默认:page , limitName: 'pageSize' } }); //供应商联系人表 tableSupplierLinkman = table.render({ elem: '#SupplierLinkman' , method: 'post' , id: 'idTest2' , url: 'SelectSupplierLinkman' //数据接口 , toolbar: '#toolbarDemo' , height: 215 , page: false //开启分页 , cols: [[ //表头 具体相关参数请产考Layui说明文档 ]] , response: { statusName: 'success' //规定数据状态的字段名称,默认:code , statusCode: true //规定成功的状态码,默认:0 , countName: 'totalRows' //规定数据总数的字段名称,默认:count } , request: { pageName: 'curPage' //页码的参数名称,默认:page , limitName: 'pageSize' } }); //监听供应商信息行单击事件 table.on('row(Supplier)', function (obj) { tableSupplierLinkman2 = table.reload('idTest2', { where: { //设定异步数据接口的额外参数,任意设 SupplierID: obj.data.SupplierID } }); }); });
效果图如下:
- 在关联表查询时,往往会出现一对多的关系,这种表格一般情况下不适合联表查询,经常会拆分为两个表格进行查询,这种时候就适用此功能!
-
layui表格接受list_layui实现数据表格table分页功能(ajax异步)
2021-02-01 07:58:44layui实现数据表格table分页功能,异步加载,表格渲染,含条件查询。一、引入layUI的相关资源二、html页面代码搜索表单:项目搜索:业务员厂家代表渠道客户项目阶段货物情况实施情况收款情况数据表格:三、后台接收...layui实现数据表格table分页功能,异步加载,表格渲染,含条件查询。
一、引入layUI的相关资源
二、html页面代码
搜索表单:
项目搜索:
业务员
厂家代表
渠道
客户
项目阶段
货物情况
实施情况
收款情况
数据表格:
三、后台接收分页参数以及查询条件,获取并返回数据
主要注意下:
page: 前台分页插件传入的当前页数,
limit: 前台分页插件传入的每页个数,
projectInfo :接收前台传入的查询条件的实体
jsonResult :后台返回的相关数据的响应实体
@ResponseBody
@RequestMapping("/project/list")
public JsonResult list(@RequestParam("page") Integer page, @RequestParam("limit") Integer size, ProjectInfoEntity projectInfo){
JsonResult jsonResult = projectService.getProjectList(page,size,projectInfo);
return jsonResult;
}
后台响应类必须包含code与count字段,因为前台layui会自动获取
自定义后台数据响应实体 JsonResult:
package com.bhy702.jfkj.common.util;
/**
* JSON结果响应
*
*/
@Data
public class JsonResult {
private static final String SUCCESS = "成功";
private static final String ERROR = "失败";
/**
* 响应状态code,因为前台layui默认0为响应成功,所以此处默认为0
*/
private Integer code = 0;
/**
* 数据总条数
*/
private Long count = 0L;
/**
* 返回是否成功
*/
private Boolean result = false;
/**
* 返回提示信息
*/
private String msg = "";
/**
* 返回数据信息
*/
private Object data;
private JsonResult() {
}
/**
* 成功的响应
*
* @return
*/
public static JsonResult success() {
return result(true, SUCCESS, null,null);
}
public static JsonResult success(String msg) {
return result(true, msg, null,null);
}
public static JsonResult success(Object data) {
return result(true, SUCCESS, data,null);
}
public static JsonResult success(Object data,Long count) {
return result(true, SUCCESS, data,count);
}
public static JsonResult success(String msg, Object data) {
return result(true, msg, data,null);
}
public static JsonResult success(String msg, Object data,Long count) {
return result(true, msg, data,count);
}
/**
* 失败的响应
*
* @return
*/
public static JsonResult error() {
return result(false, ERROR, null,null);
}
public static JsonResult error(String msg) {
return result(false, msg, null,null);
}
public static JsonResult error(Object data) {
return result(false, ERROR, data,null);
}
public static JsonResult error(Object data,Long count) {
return result(false, ERROR, data,count);
}
public static JsonResult error(String msg, Object data) {
return result(false, msg, data,null);
}
public static JsonResult error(String msg, Object data,Long count) {
return result(false, msg, data,count);
}
public static JsonResult result(Boolean result, String msg, Object data,Long count) {
JsonResult jsonResult = new JsonResult();
jsonResult.setResult(result);
jsonResult.setMsg(msg);
jsonResult.setData(data);
jsonResult.setCount(count);
return jsonResult;
}
}
四、渲染table表格数据
主要注意下:
elem: ‘#projectList': projectList为表格id,
page: true: 设置表格分页,
url: ‘/project/list' :数据请求url
fixed: true:固定列
done : function(res, curr, count){…}:数据加载成功后的回调函数
var tableIns = table.render({
elem: '#projectList',
cellMinWidth: 150,
url: '/project/list',
cols: [
[{
// type: 'checkbox',fixed: 'left'
checkbox: true, fixed: true
}, {
field: 'id',title: 'ID',align:'center',width:50,fixed: true
}, {
field: 'name',title: '项目名称',align:'center',fixed: true
}, {
field: 'businessOperatorStr',title: '经办人',align:'center',fixed: true
}, {
field: 'mftRepresentativeStr',title: '厂家代表',align:'center',fixed: true
}, {
field: 'channelStr',title: '渠道',align:'center',fixed: true
}, {
field: 'customerStr',title: '客户',align:'center',fixed: true
}, {
field: 'projectPhaseStr',title: '项目阶段',align:'center',fixed: true
}, {
field: 'amount',title: '金额',align:'center'
}, {
field: 'businessSource',title: '商机来源',align:'center'
}, {
field: 'mainProduct',title: '主要产品',align:'center'
}, {
field: 'productLineStr',title: '产品线',align:'center'
}, {
field: 'goodsConditionStr',title: '货物情况',align:'center'
}, {
field: 'implementConditionStr',title: '实施情况',align:'center'
}, {
field: 'payAmount',title: '已付金额',align:'center'
}, {
field: 'payConditionStr',title: '收款情况',align:'center'
}, {
field: 'startTime',title: '开项时间',align:'center'
}, {
field: 'endTime',title: '结项时间',align:'center'
}, {
field: 'remark',title: '备注',align:'center'
}, {
field: 'operate',title: '操作',toolbar: '#operateTpl',fixed: 'right',unresize: true
}]
],
id: 'testReload',
// skin: 'row', //表格风格
even: true, //隔行背景
event: true,
page: true,
done : function(res, curr, count){
$('#totalProjectNumber').text("共有数据:"+count+" 条");
table_data=res.data;
layer.closeAll('loading');
// layer.close(layer.index); //它获取的始终是最新弹出的某个层,值是由layer内部动态递增计算的
// layer.close(index); //返回数据关闭loading
}
});
五、监听搜索表单的提交事件,并重新渲染table表格数据
主要注意下:
sreach: 为搜索按钮的lay-filter=“sreach”,
where 中的数据对应搜索表单,为搜索的条件,后台使用这些条件进行筛选数据返回
form.on('submit(sreach)', function(data){
layer.load();
tableIns.reload({
url:"/project/list",
page: {
curr: 1 //重新从第 1 页开始
},
where:{
name:data.field.projectName,
businessOperatorId:data.field.businessOperatorId,
mftRepresentativeId:data.field.mftRepresentativeId,
channelId:data.field.channelId,
customerId:data.field.customerId,
projectPhase:data.field.projectPhase,
goodsCondition:data.field.goodsCondition,
implementCondition:data.field.implementCondition,
payCondition:data.field.payCondition,
startTime:data.field.startTime,
endTime:data.field.endTime
}
});
return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
});
六、效果展示
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
-
layui实现数据表格table分页功能(ajax异步)
2020-10-16 15:49:22主要为大家详细介绍了layui实现数据表格table分页功能、异步加载,表格渲染,含条件查询,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 -
flask、layui实现前端后端数据交互,实现数据表格的添加、删除、修改、查询
2020-07-28 15:02:18前端使用layui框架、后端使用flask框架,实现数据表格的按条件查询,实现添加、删除、修改数据同步回显到页面flask、layui实现前端后端数据交互,实现数据表格的添加、删除、修改、查询
前端使用layui框架、后端使用flask框架,实现数据表格的按条件查询,实现添加、删除、修改数据同步回显到页面
前端框架Layui学习一:图标,按钮,导航菜单,选项卡,进度条
前端框架Layui学习二:面板、布局、徽章、时间线、颜色选择器
前端框架Layui学习三:表单元素、表单对象
前端框架Layui学习四:滑块、评分、轮播、代码修饰器、时间和日期选择器
前端框架Layui学习五:弹出层和数据表格一、查询页面与数据库表格样式
1)数据库表格样式前端layui代码如下所示:<head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../static/css/layui.css"> <link rel="stylesheet" href="../static/css/layer.css"> <link rel="stylesheet" href="../static/css/laydate.css"> </head> <body> <!--搜索条件开始--> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;" > <legend>查询条件</legend> </fieldset> <form class="layui-form" action="" method="post" id="formTest"> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">学号</label> <div class="layui-input-inline"> <input type="text" name="学号" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-inline"> <label class="layui-form-label">姓名</label> <div class="layui-input-inline"> <input type="text" name="姓名" autocomplete="off" class="layui-input"> </div> </div> </div> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">邮箱</label> <div class="layui-input-inline"> <input type="text" name="邮箱" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-inline"> <label class="layui-form-label">单选框</label> <div class="layui-input-block"> <input type="radio" name="性别" value="男" title="男" checked=""> <input type="radio" name="性别" value="女" title="女"> </div> </div> </div> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">开始时间</label> <div class="layui-input-inline"> <input type="text" class="layui-input" name="start_time" readonly="readonly" id="start_time" placeholder="yyyy-MM-dd"> </div> </div> <div class="layui-inline"> <label class="layui-form-label">结束时间</label> <div class="layui-input-inline"> <input type="text" class="layui-input" name="endtime" readonly="readonly" id="endtime" placeholder="yyyy-MM-dd"> </div> </div> </div> <div class="layui-form-item" style="text-align: center;"> <div class="layui-input-block"> <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-search" id="doSubmit" lay-submit="" lay-filter="demo1">查询</button> <button type="reset" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh" id="doReset">重置</button> </div> </div> </form> <!--搜索条件结束--> <!--数据表格开始--> <div type="text/html" style="display: none" id="userToolBar"> <a type="submit" class="layui-btn layui-btn-xs" lay-filter="add" lay-event="add">添加</a> <a type="submit" class="layui-btn layui-btn-xs" id="batch_del" lay-filter="batch_del" lay-event="batch_del">批量删除</a> </div> <div id="userBar" style="display: none;"> <a class="layui-btn layui-btn-xs" lay-event="edit" id="modify">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </div> <table class="'layui-hide" id="userTable" lay-filter="userTable"></table> <!--数据表格结束--> <!--添加和修改弹出层开始--> <div style="display:none;padding: 20px" id="addnewdata"> <form class="layui-form" action="" method="post" lay-filter="dataFrm" id="dataFrm"> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">学号</label> <div class="layui-input-inline"> <input type="text" name="学号" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-inline"> <label class="layui-form-label">姓名</label> <div class="layui-input-inline"> <input type="text" name="姓名" autocomplete="off" class="layui-input"> </div> </div> </div> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">邮箱</label> <div class="layui-input-inline"> <input type="text" name="邮箱" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-inline"> <label class="layui-form-label">城市</label> <div class="layui-input-inline"> <input type="text" name="城市" autocomplete="off" class="layui-input"> </div> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">性别</label> <div class="layui-input-block"> <input type="radio" name="性别" value="男" title="男" checked=""> <input type="radio" name="性别" value="女" title="女"> </div> </div> <div class="layui-form-item" style="text-align: center;"> <div class="layui-input-block"> <button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release" id="dosubmit1" lay-submit="" lay-filter="dosubmit1">提交</button> <button type="reset" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh" id="doclose" lay-submit="" lay-filter="doclose" lay-event="doclose">重置</button> </div> </div> </form> </div> <!--添加和修改弹出层结束--> <script src="../static/css/layui.js"></script> <script type="text/javascript"> layui.use(["jquery",'form','element','layer','table','laydate'],function() { let $ = layui.jquery; let form = layui.form; let element = layui.element; let layer = layui.layer; let table = layui.table; let laydate = layui.laydate; laydate.render({ elem: '#start_time', type: 'datetime', calendar: 'True' }); laydate.render({ elem: '#endtime', type: 'datetime', calendar: 'True' }); //渲染数据表格 var tableIns = table.render({ elem: '#userTable', //渲染的目标对象 data: [], initSort: { field: '学号', type: 'asc' }, title: '用户数据登录表',//数据导出的标题 page: true,//是否启动分页 toolbar: "#userToolBar",//表格的工具条 defaultToolbar: ['filter', 'exports', 'print'], hight: "full-300", down: function (res, curr, count) { alert(res);//后台url返回的json串 alert(curr);//当前页 alert(count);//数据总条数 }, //totalRow:true,//开启合并行 limit: 30,//设置每页显示的条数,默认为10 //limits:[20,40,60,80], loading: true, //text: { // none: "未查询到数据" //默认无数据 //}, cols: [ [{title: '数据表格增删改查', align:'center', colspan: 15}], [ //列表数据 {type: 'checkbox', fixed: 'left'}, {field: '学号', title: '学号', sort: true}, //field设定字段名,title设定标题名称,sort排页面已有数据 {field: '姓名', title: '姓名', edit: true, align: 'center'},//edit可编辑 {field: '邮箱', title: '邮箱', align: 'center', edit: 'text', width: 300}, {field: '性别', title: '性别', align: 'center', edit: 'text', sort: true}, {field: '城市', title: '城市', align: 'center'}, {fixed: 'right', title: '操作', align: 'center', toolbar: "#userBar"} ]] }); }) </script> </body>
2)数据库表格样式
建表语句如下create table `student_info` (`id` int(11) NOT NULL AUTO_INCREMENT, `student_id` varchar(30) NOT NULL DEFAULT '', `student_name` varchar(30) NOT NULL DEFAULT '', `email` varchar(30) NOT NULL DEFAULT '', `sex` varchar(10) NOT NULL DEFAULT '', `city` varchar(30) NOT NULL DEFAULT '', `insert_time` datetime DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (`id`) ) insert into student_info (`student_id`,`student_name`,`email`,`sex`,`city`) values ('10000',"张飞","123456789@qq.com",'男','南京') insert into student_info (`student_id`,`student_name`,`email`,`sex`,`city`) values ('10001',"大乔","123451111@qq.com",'女','苏州')
二、指定条件查询数据
指定条件查出数据,未指定条件时随机查询数据
前端layui代码如下所示:form.on('submit(demo1)', function (data) { //发送一个ajax $.ajax({ url: '/search', type: 'post', data: {'data': data.field}, dataType: 'json', success: function (res) { let datalist = res.data; let datalen = datalist.length; if (datalen === 0){ table.reload('userTable', { data: ["未查询到数据"] }) } else { table.reload('userTable', { data: datalist }) } } }); return false; });
后端flask代码如下所示:
@app.route("/search",methods=["POST","GET"]) def search(): dic = request.form.to_dict() id = dic['data[学号]'] name = dic['data[姓名]'] email = dic['data[邮箱]'] sex = dic['data[性别]'] #从数据库查询数据 data = connect_db(id, name, email, sex) datalist = {"code":1,"msg":"","count":1,"data":data} return datalist
三、 添加数据
前端layui代码如下所示:
//头工具栏事件 table.on('toolbar(userTable)', function (obj) { let tablelist = table.cache['userTable']; switch (obj.event) { case 'add': openAddUser(obj,tablelist); break; case 'batch_del': batch_del(obj,tablelist); break; } }) //打开添加页面 function openAddUser(obj,tablelist) { mainIndex = layer.open({ type: 1, title: "添加用户", content: $("#addnewdata"), area: ['800px', '400px'], success: function (index) { form.on("submit(dosubmit1)", function (message) { let jsondata = JSON.stringify(message.field); $.ajax({ url: '/add', type: "POST", dataType: "json", data: {'data': jsondata}, beforeSend: function () { layer.load({ shade: [0.1, '#fff'] //0.1透明度的白色背景 }); }, success: function (res) { let datalist = res.data; let returnCode = res.code; if (returnCode === 1) { layer.msg("添加成功", {icon: 1}); tablelist.push(datalist[0]); table.reload('userTable',{ data: tablelist }) layer.closeAll(); } else { layer.closeAll('loading'); layer.msg("修改失败", {icon: 5}); } } }); return false; }) } }) }
后端flask代码如下所示:
@app.route("/add",methods=["POST","GET"]) def add(): edit_data = request.form.to_dict() student_info = edit_data['data'] student_info = json.loads(student_info) student_id = student_info["学号"] student_name = student_info["姓名"] email = student_info["邮箱"] sex = student_info["性别"] city = student_info["城市"] edit_status = add_db(student_id, student_name, email, sex,city) datalist = {'code':edit_status,'data':[student_info]} return datalist
四、批量删除数据
删除后回显数据
前端layui代码如下所示://头工具栏事件 table.on('toolbar(userTable)', function (obj) { let tablelist = table.cache['userTable']; switch (obj.event) { case 'add': openAddUser(obj,tablelist); break; case 'batch_del': batch_del(obj,tablelist); break; } }) function batch_del(obj,tablelist){ var checkData = table.checkStatus('userTable'); var data = checkData.data; var ids = []; if(data.length === 0){ alert("请选择要删除的数据"); } for(i=0;i<data.length;i++){ ids.push(data[i].学号); for(j=0;j<tablelist.length;j++){ if(data[i].学号=== tablelist[j].学号) tablelist.splice(j,1); } } $.ajax({ url:"/batch_delete", data:{'aaa':ids.toString()}, type:'post', dataType: "json", success:function (res) { if (res.code===1){ layer.msg("删除成功") table.reload('userTable',{ data: tablelist }) }else{ layer.msg("删除失败") } } }) }
后端flask代码如下所示:
@app.route("/batch_delete",methods=["POST","GET"]) def batch_delete(): student_id = request.form.get("aaa").split(",") if len(student_id)==1: sql = f"delete from dw.student_info where student_id in ('{student_id[0]}')" else: student_id= tuple(map(str, student_id)) sql = f"delete from dw.student_info where student_id in {student_id}" batch_delete_status = batch_del_db(sql) return {'code': batch_delete_status}
五、编辑数据
点击编辑,编辑的数据自动加载到弹出层
数据修改成功
前端layui代码如下所示:
//监听工具条 table.on('tool(userTable)', function (obj) { //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值" var data = obj.data; //获得当前行数据 var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值) var jsonData = JSON.stringify(data); let tablelist = table.cache['userTable']; if (layEvent === 'del') { //删除数据代码 } else if (layEvent === 'edit') { //编辑 //do something //加载数据到弹出层 openUpdateUser(data); //同步更新缓存对应的值 //编辑保存 //修改数据,并把数据发送到后端 form.on("submit(dosubmit1)", function (message) { let newparams = JSON.stringify(message.field); $.ajax({ url: '/edit', type: "POST", dataType: "json", data: {'newparams': newparams}, beforeSend: function () { layer.load({ shade: [0.1, '#fff'] //0.1透明度的白色背景 }); }, success: function (res) { let returnCode = res.code; if (returnCode === 1) { layer.closeAll('loading'); layer.msg("修改成功", {icon: 6}); // 更新被编辑那条记录 setTimeout(function () { obj.update({ '姓名': message.field.姓名, '邮箱': message.field.邮箱, '性别': message.field.性别, '城市': message.field.城市 }); layer.closeAll(); }, 1000) } else { layer.closeAll('loading'); layer.msg("修改失败", {icon: 5}); } } }); return false; }); } else if (layEvent === 'doclose') { layer.closeAll(); } }); //打开修改页面,并把数据发送到后端 function openUpdateUser(data) { mainIndex = layer.open({ type: 1, title: "修改用户", content: $("#addnewdata"), area: ['800px', '400px'], success: function (index) { console.log("33333"); form.val("dataFrm", data); } }) }
后端flask代码如下所示:
@app.route("/edit",methods=["POST","GET"]) def edit(): edit_data = request.form.to_dict() student_info = edit_data['newparams'] student_info = json.loads(student_info) student_id = student_info["学号"] student_name = student_info["姓名"] email = student_info["邮箱"] sex = student_info["性别"] city = student_info["城市"] edit_status = edit_db(student_id, student_name, email, sex,city) return {'code':edit_status}
六、删除单条数据
删除单条数据,实现数据库删除和页面更新
页面同步更新
前端layui代码如下所示:
//监听工具条 table.on('tool(userTable)', function (obj) { //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值" var data = obj.data; //获得当前行数据 var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值) var jsonData = JSON.stringify(data); let tablelist = table.cache['userTable']; //tablielist保存除要删除的数据以外的全部数据,删除数据后重新加载数据 if (layEvent === 'del') { layer.msg("删除"); for(i=0;i<tablelist.length;i++){ if(tablelist[i].学号 === data.学号){ //从tablelist列表中删除这条数据 tablelist.splice(i,1); } } layer.confirm('真的删除这行数据么', {icon: 3, title: '提示'}, function (index) { $.ajax({ url: "/delete", type: "POST", dataType: "json", data: {'data': jsonData}, beforeSend: function () { layer.load({ shade: [0.1, '#fff'] //0.1透明度的白色背景 }); }, success: function (res) { let returnCode = res.code; if (returnCode === 1) { layer.closeAll('loading'); layer.msg("删除成功", {icon: 6}); // 更新被编辑那条记录 setTimeout(function () { layer.closeAll(); table.reload('userTable', { data: tablelist }) }, 1000) } } }) layer.close(index); }); } else if (layEvent === 'edit') { //编辑修改数据 } );
后端flask代码如下所示:
@app.route("/delete",methods=["POST","GET"]) def delete(): edit_data = request.form.to_dict() student_info = edit_data['data'] student_info = json.loads(student_info) student_id = student_info["学号"] student_name = student_info["姓名"] email = student_info["邮箱"] sex = student_info["性别"] city = student_info["城市"] edit_status = del_db(student_id, student_name, email, sex,city) return {'code':edit_status}
七、双击页面行数据只从页面删除数据
双击后页面如下所示
//监听行双击事件 table.on('rowDouble(userTable)', function(obj){ console.log(obj.tr) //得到当前行元素对象 console.log(obj.data) //得到当前行数据 obj.del(); //删除当前行 //obj.update(fields) //修改当前行数据 });
八、重置按钮清空页面和弹出层数据
form.on('#doReset', function (data) { $('#formTest')[0].reset(); return false; });
九、选择显示的字段
十、数据导出到CSV
十一、打印页面数据
-
layui实现自带table表格组件分页功能(ajax异步),含条件查询
2019-06-10 15:34:15layui实现数据表格table分页功能,异步加载,表格渲染,含条件查询。 一:引入layUI的相关资源 <link rel="stylesheet" href="${ctxPath}/vendor/layui/css/layui.css"> <script src="${ctxPath}/...layui实现自带的table组件分页功能,异步加载,表格渲染,含条件查询。
一:引入layUI的相关资源
<link rel="stylesheet" href="${ctxPath}/vendor/layui/css/layui.css"> <script src="${ctxPath}/vender/layui/layui.js" charset="utf-8"></script>
二:html页面代码
搜索表单:
<div class="layui-row"> <form class="layui-form layui-col-md12 we-search"> 项目搜索: <div class="layui-inline"> <input type="text" name="projectName" id="projectName" placeholder="项目名称" autocomplete="off" class="layui-input"> </div> <div class="layui-input-inline"> <select name="businessOperatorId" id="businessOperatorId" lay-verify="" lay-search> <option value="">业务员</option> </select> </div> <div class="layui-input-inline"> <select name="mftRepresentativeId" id="mftRepresentativeId" lay-verify="" lay-search> <option value="">厂家代表</option> </select> </div> <div class="layui-input-inline"> <select name="channelId" id="channelId" lay-search> <option value="">渠道</option> </select> </div> <div class="layui-input-inline"> <select name="customerId" id="customerId" lay-search> <option value="">客户</option> </select> </div> <div class="layui-input-inline"> <select name="projectPhase" id="projectPhase" lay-search> <option value="">项目阶段</option> </select> </div> <div class="layui-input-inline"> <select name="goodsCondition" id="goodsCondition" lay-search> <option value="">货物情况</option> </select> </div> <div class="layui-input-inline"> <select name="implementCondition" id="implementCondition" lay-search> <option value="">实施情况</option> </select> </div> <div class="layui-input-inline"> <select name="payCondition" id="payCondition" lay-search> <option value="">收款情况</option> </select> </div> <div class="layui-inline"> <input class="layui-input" placeholder="开项时间" name="startTime" id="startTime"> </div> <div class="layui-inline"> <input class="layui-input" placeholder="结项时间" name="endTime" id="endTime"> </div> <button class="layui-btn" lay-submit="" lay-filter="sreach"><i class="layui-icon"></i></button> </form> </div>
【注】以上搜索表单中select具体下拉选项的数据为Ajax异步加载,代码就不贴了。
数据表格:
<table class="layui-hide" id="projectList" lay-filter="projectList"></table>
三:后台接收分页参数以及查询条件,获取并返回数据
主要注意下:
page: 前台分页插件传入的当前页数,
limit: 前台分页插件传入的每页个数,
projectInfo :接收前台传入的查询条件的实体
jsonResult :后台返回的相关数据的响应实体@ResponseBody @RequestMapping("/project/list") public JsonResult list(@RequestParam("page") Integer page, @RequestParam("limit") Integer size, ProjectInfoEntity projectInfo){ JsonResult jsonResult = projectService.getProjectList(page,size,projectInfo); return jsonResult; }
后台响应类必须包含code与count字段,因为前台layui会自动获取
自定义后台数据响应实体 JsonResult:
package com.bhy702.jfkj.common.util; /** * JSON结果响应 * */ @Data public class JsonResult { private static final String SUCCESS = "成功"; private static final String ERROR = "失败"; /** * 响应状态code,因为前台layui默认0为响应成功,所以此处默认为0 */ private Integer code = 0; /** * 数据总条数 */ private Long count = 0L; /** * 返回是否成功 */ private Boolean result = false; /** * 返回提示信息 */ private String msg = ""; /** * 返回数据信息 */ private Object data; private JsonResult() { } /** * 成功的响应 * * @return */ public static JsonResult success() { return result(true, SUCCESS, null,null); } public static JsonResult success(String msg) { return result(true, msg, null,null); } public static JsonResult success(Object data) { return result(true, SUCCESS, data,null); } public static JsonResult success(Object data,Long count) { return result(true, SUCCESS, data,count); } public static JsonResult success(String msg, Object data) { return result(true, msg, data,null); } public static JsonResult success(String msg, Object data,Long count) { return result(true, msg, data,count); } /** * 失败的响应 * * @return */ public static JsonResult error() { return result(false, ERROR, null,null); } public static JsonResult error(String msg) { return result(false, msg, null,null); } public static JsonResult error(Object data) { return result(false, ERROR, data,null); } public static JsonResult error(Object data,Long count) { return result(false, ERROR, data,count); } public static JsonResult error(String msg, Object data) { return result(false, msg, data,null); } public static JsonResult error(String msg, Object data,Long count) { return result(false, msg, data,count); } public static JsonResult result(Boolean result, String msg, Object data,Long count) { JsonResult jsonResult = new JsonResult(); jsonResult.setResult(result); jsonResult.setMsg(msg); jsonResult.setData(data); jsonResult.setCount(count); return jsonResult; } }
四:渲染table表格数据
主要注意下:
elem: ‘#projectList’: projectList为表格id,
page: true: 设置表格分页,
url: ‘/project/list’ :数据请求url
fixed: true:固定列
done : function(res, curr, count){…}:数据加载成功后的回调函数var tableIns = table.render({ elem: '#projectList', cellMinWidth: 150, url: '/project/list', cols: [ [{ // type: 'checkbox',fixed: 'left' checkbox: true, fixed: true }, { field: 'id',title: 'ID',align:'center',width:50,fixed: true }, { field: 'name',title: '项目名称',align:'center',fixed: true }, { field: 'businessOperatorStr',title: '经办人',align:'center',fixed: true }, { field: 'mftRepresentativeStr',title: '厂家代表',align:'center',fixed: true }, { field: 'channelStr',title: '渠道',align:'center',fixed: true }, { field: 'customerStr',title: '客户',align:'center',fixed: true }, { field: 'projectPhaseStr',title: '项目阶段',align:'center',fixed: true }, { field: 'amount',title: '金额',align:'center' }, { field: 'businessSource',title: '商机来源',align:'center' }, { field: 'mainProduct',title: '主要产品',align:'center' }, { field: 'productLineStr',title: '产品线',align:'center' }, { field: 'goodsConditionStr',title: '货物情况',align:'center' }, { field: 'implementConditionStr',title: '实施情况',align:'center' }, { field: 'payAmount',title: '已付金额',align:'center' }, { field: 'payConditionStr',title: '收款情况',align:'center' }, { field: 'startTime',title: '开项时间',align:'center' }, { field: 'endTime',title: '结项时间',align:'center' }, { field: 'remark',title: '备注',align:'center' }, { field: 'operate',title: '操作',toolbar: '#operateTpl',fixed: 'right',unresize: true }] ], id: 'testReload', // skin: 'row', //表格风格 even: true, //隔行背景 event: true, page: true, done : function(res, curr, count){ $('#totalProjectNumber').text("共有数据:"+count+" 条"); table_data=res.data; layer.closeAll('loading'); // layer.close(layer.index); //它获取的始终是最新弹出的某个层,值是由layer内部动态递增计算的 // layer.close(index); //返回数据关闭loading } });
五:监听搜索表单的提交事件,并重新渲染table表格数据
主要注意下:
sreach: 为搜索按钮对应的事件过滤器,lay-filter=“sreach”,
where 中的数据对应搜索表单,为搜索的条件,后台使用这些条件进行筛选数据返回form.on('submit(sreach)', function(data){ layer.load(); tableIns.reload({ url:"/project/list", page: { curr: 1 //重新从第 1 页开始 }, where:{ name:data.field.projectName, businessOperatorId:data.field.businessOperatorId, mftRepresentativeId:data.field.mftRepresentativeId, channelId:data.field.channelId, customerId:data.field.customerId, projectPhase:data.field.projectPhase, goodsCondition:data.field.goodsCondition, implementCondition:data.field.implementCondition, payCondition:data.field.payCondition, startTime:data.field.startTime, endTime:data.field.endTime } }); return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。 });
六:效果展示
欢迎访问本文的个人博客链接: https://br-bai.github.io/2019/06/10/layui实现数据表格table分页功能(ajax异步),含条件查询
-
Layui数据表格导出预览
2019-04-18 08:28:33在有些时候我们在实现某些功能时需要获取数据表格的查询条件,例如导出Excel表格时就需要获取条件查询表单的查询条件与数据表格内的查询条件对比,可以判断是否已经以条件查询表单的查询条件查询出数据,从而达到... -
ssm框架和layui实现按条件分页查询数据记录
2019-11-24 14:36:12这篇文章主要介绍如何实现按条件查询分页的。 ssm配置文件详情看我之前的文章有介绍。 数据库表: 数据就随便填几个吧。 前端按条件分页代码如下: //按条件查询表格数据 $("#btnGet").click(function() { ... -
Layui+SSM实现数据表格的重载
2019-05-04 16:52:49本文是实现layui数据表格的重载 话不多说,直接开始: 1、项目引入layui,引入较为简单,不会的也可以百度百度,这里不再说明!!! 2、页面展示 3、页面代码展示 3.1 条件查询区 <div style="padding: 2%... -
layui一个表格中怎么接两个接口的值_layui多个数据表格共存一个页面处理
2020-12-21 01:55:12layui多个数据表格共存一个页面处理1、html代码2、jq代码3、数据表格重载方式今天在做后台时,遇到一个棘手的问题,就是layui的数据表格如果两个表格在一个页面,每个表格有一个搜索查询的筛选条件,那么每个搜索... -
layui table组件按条件查询的实现
2020-02-17 18:29:33主要是在后台实现数据的条件查询,然后将按条件查询出来的结果返回给前端,重载表格。 这里实现环境我使用的是.net mvc框架。 1.首先定义查询按钮; <button id="reloadBtn" class="layui-btn" data-type="reload... -
(超详细)spring-boot+layui实现根据条件查询+异步加载分页查询+数据操作
2019-04-28 18:06:501、到官网下载layui,把layui的js和css文件引入到自己的项目中,地址: https://www.layui.com/ 2、前台所需要的html (1)显示表格的html <table class="layui-hide" id="test" lay-filter="demo"><... -
layui 从表格导出全部数据(不需外部加载任何类)
2019-07-08 14:47:36layui当前内置的导出表格数据只能是导出当前页面的数据,不能导出全部的数据,本来查阅了很多,大部分都是自己重新写导出,但是直接从url导出,我不知道怎么写也不知道怎么重新改变参数请求,所以想了一个模拟事件来... -
layui多个数据表格共存一个页面处理
2019-04-11 15:10:11今天在做后台时,遇到一个棘手的问题,就是layui的数据表格如果两个表格在一个页面,每个表格有一个搜索查询的筛选条件,那么每个搜索结果对应的只能刷新一个数据表格。如下图,当搜索药品的时候只刷新左表,当搜索... -
layui解决数据表格搜索时发送了两次请求问题
2019-04-01 16:10:40然后实现条件查询,查看控制台,一开始正常是获取了一次列表, 但是设置了搜索条件,点击搜索后, 发送了一条带条件参数的请求去后台, 但是同时又发送了获取全部数据的请求 解决方案 我的搜索按钮设置在了表单里面... -
重载/刷新/更新渲染 表格带参数 TP5 layui.table 数组表格
2018-09-25 16:54:49实现:开始是正常的列表,当加了条件后重载表格,显示记录集是查询条件后的数据 正常数据: 点击“查看全部已经分配的用户”按钮时,只返回已经分配用户的数据, 1、模板 <!DOCTYPE html>... -
导出表格数据
2019-06-06 21:10:38导出表格数据有两种:一种是layui插件自带的,自带的有个缺陷,每次导出只能导出一页数据而不能导出第二页数据,而第二种是通过代码实现,代码实现的可以选中多少数据就导出多少数,也可以通过多条件查询导出查询的... -
ASP.NET.MVC查询数据表格不出来解决方法
2019-04-27 18:19:20表格数据不出来,完全就是 视图层出了问题,就算 控制器 写错了,视图层 那边都会出来一个表格,只是没数据而已,而且表格大部分都是使用插件并调用插件里面的方法来实现的,这次我使用的layui 这个插... -
怎么查询结果的数据在页面一闪而过
2019-07-06 17:58:50怎么查询结果的数据在页面一闪而过 我想要在已有数据的...上图可实现单条件查询、多条件查询、模糊查询,可是现在有一个奇怪的现象,当我输入了某一个条件点击查询按钮进行数据的筛选,我的查询结果一直无法显示... -
layui分成两列相同的表格_fsLayui联动表格使用(二)
2021-01-27 04:28:05复杂联动表格使用 点击主表格,加载副表格数据,支持主、副表格...联动表格demo主表格demo主表格需要在基础表格上新增默认form表单id配置 defaultFormform查询条件配置功能号:名称:类型:--请选择--功能号实现类s...
-
华为1+X——网络系统建设与运维(高级)
-
基于Qt的LibVLC开发教程
-
拼多多直播助手,拼多多直播互动神器,拼多多直播互动软件
-
自动化测试Python3+Selenium3+Unittest
-
NFS 实现高可用(DRBD + heartbeat)
-
10款响应式自适应网站模板(三)
-
《轴流泵和斜流泵》关醒凡.rar
-
TL1771_V1.2_20050501.pdf
-
投标方法论
-
spring注解-AOP动态代理-@EnableAspectJAutoProxy注解如何
-
LVS + Keepalived 实现 MySQL 负载均衡与高可用
-
TL1769 Qualification Report_20050809.pdf
-
SpringBoot异步多线程调用注解@Async使用和CountDown
-
TAMU首篇《图神经网络自监督学习》综述论文
-
用Go语言来写区块链(一)
-
TL1761_V0.6_20040701.pdf
-
HX8227-A01_datasheet_preliminary_v04_060320.pdf
-
owasp mantra.zip
-
TL1771_V1.1_20050301.pdf
-
基于python的dango框架购物商城毕业设计毕设源代码使用教程