开发工具与关键技术：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实现数据表格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; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});
六、效果展示
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

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组件分页功能，异步加载，表格渲染，含条件查询。


一：引入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">&#xe615;</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异步），含条件查询