精华内容
下载资源
问答
  • 在关联表查询时,往往会出现一对多关系,这种表格一般情况下不适合联表查询,经常会拆分为两个表格进行查询,这种时候就适用此功能! 代码如下: 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实现数据表格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; //阻止表单跳转。如果需要表单跳转,去掉这段即可。

    });

    六、效果展示

    61a09048be0b8b6d9bc3771f359314d2.png

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

    展开全文
  • 主要为大家详细介绍了layui实现数据表格table分页功能、异步加载,表格渲染,含条件查询,具有一定参考价值,感兴趣小伙伴们可以参考一下
  • 前端使用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分页功能,异步加载,表格渲染,含条件查询。 一:引入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">&#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异步),含条件查询

    展开全文
  • Layui数据表格导出预览

    千次阅读 2019-04-18 08:28:33
    在有些时候我们在实现某些功能时需要获取数据表格的查询条件,例如导出Excel表格时就需要获取条件查询表单查询条件与数据表格查询条件对比,可以判断是否已经以条件查询表单查询条件查询数据,从而达到...
  • 这篇文章主要介绍如何实现条件查询分页。 ssm配置文件详情看我之前文章有介绍。 数据库表: 数据就随便填几个吧。 前端按条件分页代码如下: //按条件查询表格数据 $("#btnGet").click(function() { ...
  • 本文是实现layui数据表格的重载 话不多说,直接开始: 1、项目引入layui,引入较为简单,不会也可以百度百度,这里不再说明!!! 2、页面展示 3、页面代码展示 3.1 条件查询区 <div style="padding: 2%...
  • layui多个数据表格共存一个页面处理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...
  • 1、到官网下载layui,把layui的js和css文件引入到自己项目中,地址: https://www.layui.com/ 2、前台所需要html (1)显示表格的html <table class="layui-hide" id="test" lay-filter="demo"><...
  • layui当前内置导出表格数据只能是导出当前页面数据,不能导出全部数据,本来查阅了很多,大部分都是自己重新写导出,但是直接从url导出,我不知道怎么写也不知道怎么重新改变参数请求,所以想了一个模拟事件来...
  • layui多个数据表格共存一个页面处理

    千次阅读 2019-04-11 15:10:11
    今天在做后台时,遇到一个棘手问题,就是layui的数据表格如果两个表格在一个页面,每个表格有一个搜索查询的筛选条件,那么每个搜索结果对应只能刷新一个数据表格。如下图,当搜索药品时候只刷新左表,当搜索...
  • 然后实现条件查询,查看控制台,一开始正常是获取了一次列表, 但是设置了搜索条件,点击搜索后, 发送了一条带条件参数的请求去后台, 但是同时又发送了获取全部数据的请求 解决方案 我的搜索按钮设置在了表单里面...
  • 实现:开始是正常列表,当加了条件后重载表格,显示记录集是查询条件的数据 正常数据: 点击“查看全部已经分配用户”按钮时,只返回已经分配用户的数据,   1、模板 &lt;!DOCTYPE html&gt...
  • 导出表格数据

    2019-06-06 21:10:38
    导出表格数据有两种:一种是layui插件自带,自带有个缺陷,每次导出只能导出一页数据而不能导出第二页数据,而第二种是通过代码实现,代码实现的可以选中多少数据就导出多少数,也可以通过多条件查询导出查询...
  • 表格数据不出来,完全就是 视图层出了问题,就算 控制器 写错了,视图层 那边都会出来一个表格,只是没数据而已,而且表格大部分都是使用插件并调用插件里面方法来实现的,这次我使用的layui 这个插...
  • 怎么查询结果的数据在页面一闪而过 我想要在已有数据的...上图可实现条件查询、多条件查询、模糊查询,可是现在有一个奇怪的现象,当我输入了某一个条件点击查询按钮进行数据的筛选,我的查询结果一直无法显示...
  • 复杂联动表格使用 点击主表格,加载副表格数据,支持主、副表格...联动表格demo主表格demo主表格需要在基础表格上新增默认form表单id配置 defaultFormform查询条件配置功能号:名称:类型:--请选择--功能号实现类s...

空空如也

空空如也

1 2
收藏数 22
精华内容 8
关键字:

layui实现表格数据的条件查询