layui进行分页处理，后端返回数据没有count字段，需要单独获取再添加到数据中，再进行项渲染，另有layui表格数据增删改查前后端交互

其他 2018-11-16 03:04:17 阅读次数: 0

整体效果图如下：
在这里插入图片描述

（1）分页前端界面处理

在这里插入图片描述

（2）分页后端的数据处理
在这里插入图片描述

具体代码如下：
前端界面代码：包括分页，增删改查，刷新（搜索功能还没做，后端是java代码）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Data-Table 表格</title>
    <link rel="stylesheet" href="../frame/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../frame/static/css/style.css">
    <link rel="icon" href="../frame/static/image/code.png">
    <!--//表单样式的修改-->
    <style>
        .layui-form-label{
            width: 100px;
        }
        .layui-input-block {
            margin-left: 130px;
            min-height: 36px
        }
    </style>
</head>

<body class="body">

<!-- 工具集 -->
<div class="my-btn-box">
    <span class="fl">
        <a class="layui-btn layui-btn-danger radius btn-delect" id="btn-delete-all">批量添加</a>
        <a class="layui-btn btn-add btn-default" id="btn-get">采集设备总数</a>
        <a class="layui-btn btn-add btn-default" id="btn-add">添加</a>
        <a class="layui-btn btn-add btn-default" id="btn-refresh"><i class="layui-icon">&#x1002;</i></a>
    </span>
    <span class="fr">
        <div class="demoTable">
            <span class="layui-form-label">搜索条件：</span>
            <!--// 搜索ID：-->
        <div class="layui-inline">
         <input class="layui-input" name="id" id="demoReload" autocomplete="off" placeholder="请输入搜索条件">
        </div>
        <button class="layui-btn" data-type="reload">查询</button>
        </div>
    </span>
</div>


<!--&lt;!&ndash; 表格 &ndash;&gt;-->
<script type="text/javascript" src="../frame/layui/layui.js"></script>
<script type="text/javascript" src="../js/index.js"></script>
<table class="layui-hide" id="test" lay-filter="test"></table>
<!-- 表格操作按钮集 -->
<script type="text/html" id="barOption">
    <a class="layui-btn layui-btn-mini" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-mini layui-btn-normal" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-mini layui-btn-danger" lay-event="del">删除</a>
</script>
<script>
    layui.use(['table', 'form', 'layer', 'vip_table'], function () {

// 操作对象
        var form = layui.form
            , table = layui.table
            , layer = layui.layer
            , vipTable = layui.vip_table
            , $ = layui.jquery
        var totals= $.ajax({
            url: "/getCollectorInfoTotalRow",
            type: "get",
            success: function (data) {
                var json=JSON.parse(data)
                return json.count
            }
        });

        table.renderBefore=function(res){ //修改res
            var counts=totals; //数据总量
            res.count = counts;
            return res; //此时的res就有count属性了
        }
        // 表格渲染
        var tableIns = table.render({
            elem: '#test'                  //指定原始表格元素选择器（推荐id选择器）
            , height: vipTable.getFullHeight()    //容器高度
            , toolbar: '#toolbarDemo'
            , title: '采集设备表'
            , cols: [[                  //标题栏
                {checkbox: true, sort: true, fixed: true, space: true}
                , {field: 'eqptType', title: 'eqptType', width: 150}
                , {field: 'eqptTypeName', title: 'eqptTypeName', width: 150}
                , {field: 'eqptIdCode', title: 'eqptIdCode', width: 150}
                , {field: 'eqptName', title: 'eqptName', width: 180}
                , {field: 'createTime', title: 'createTime', width: 200}
                , {field: 'creator', title: 'creator', width: 100}
                , {fixed: 'right', width: 178, align: 'center', toolbar: '#barOption', title: '操作'}
            ]]
            , id: 'dataCheck'
            // , url: '../json/decice_type.json'//本地数据
            ,url:'/getCollectorInfo'
            , page: true
             ,limit:15
            , limits: [ 15, 30, 40, 50]
            , loading: true
            , done: function (res) {
                console.log(res);
            }
        });
        //监听表格复选框选择
        table.on('checkbox(demo)', function (obj) {
            console.log(obj)
        });
        //监听工具条
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                layer.alert(JSON.stringify(data));
            } else if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    $.ajax({
                        url: "/deleteCollector",
                        type: "POST",
                        data: {eqptType: data.eqptType, eqptIdCode: data.eqptIdCode},
                        success: function (msg) {
                            var json = JSON.parse(msg);
                            var returnCode = json.returnCode;
                            if (returnCode == 200) {
                                //删除这一行
                                obj.del();
                                //关闭弹框
                                layer.close(index);
                                layer.msg("删除成功", {icon: 6});
                            } else {
                                layer.msg("删除失败", {icon: 5});
                            }
                        }
                    });
                    return false;
                });
            } else if (obj.event === 'edit') {
                //formData = data;
                if (obj.event === 'del') {
                    layer.confirm('真的删除行么', function (index) {
                        obj.del();
                        layer.close(index);
                    });
                } else if (obj.event === 'edit') {

                    layer.open({
                        //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                        type: 1,
                        title: "修改采集设备信息",
                        area: ['420px', '330px'],
                        content: $("#popUpdateTest")
                    });
                    setFormValue(obj,data);//动态向表单赋值
                }
            }
        });
        //监听弹出框表单提交
        function setFormValue(obj,data){
            form.on('submit(demo11)', function(massage) {
                $.ajax({
                    url:'/updateCollectorAndConfig',
                    type:'POST',
                    dataType:'json',
                    data:{
                        oldeqptType:data.eqptType,
                        oldeqptIdCode:data.eqptIdCode,
                        neweqptType:massage.field.neweqptType,
                        neweqptIdCode:massage.field.neweqptIdCode,
                        eqptName:massage.field.neweqptName
                    },
                    success:function (msg) {
                        var returnCode = msg.returnCode;
                        if(returnCode==200){
                            layer.closeAll('loading');
                            layer.load(2);
                            layer.msg("修改成功", {icon: 6});
                            setTimeout(function(){
                                obj.update({
                                    eqptType:massage.field.neweqptType,
                                    eqptIdCode:massage.field.neweqptIdCode,
                                    eqptName:massage.field.neweqptName
                                });//修改成功修改表格数据不会跳转到首页
                                layer.closeAll();
                            }, 1000);
                        }else{
                            layer.msg("修改失败", {icon: 5});
                        }
                    }
                })
                return false;
            })

        }



        //添加采集设备
        $('#btn-add').on('click', function () {
            layer.open({
                type: 2,
                title: '采集设备添加',
                maxmin: true,
                area: ['420px', '330px'],
                shadeClose: false, //点击遮罩关闭
                content: 'CollectorAdd-form.html',//下面是添加界面的代码
            });
        });


        //获取采集设备总数
        $('#btn-get').on('click', function () {
            var msg = "";
            $.ajax({
                url: "/getCollectorInfoTotalRow",
                type: "get",
                success: function (data) {
                    var json = JSON.parse(data)
                    msg = "采集设备的总数为：" + json.count;
                    layer.open({
                        type: 1,
                        area: ['250px', '180px'],
                        btn: '关闭',
                        shadeClose: true, //点击遮罩关闭
                        content: '<div style="padding:30px;">' + msg + '</div>'
                        , yes: function () {
                            layer.closeAll();
                        }
                    });
                }
            });

        });

        //搜索功能的实现
        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        var $ = layui.$, active = {
            reload: function () {
                var demoReload = $('#demoReload');

                //执行重载
                table.reload('idTest', {
                    where: {
                        key: {
                            field: demoReload.val()
                        }
                    }
                });
            }
        };
        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        // 刷新表格
        $('#btn-refresh').on('click', function () {
            tableIns.reload()
        });
    });
</script>

//这是修改弹出框的代码style="display:none是界面的隐藏，只有调用才会在界面显示
<div class="layui-row" id="popUpdateTest" style="display:none;">
    <div class="layui-col-md10">
        <form class="layui-form layui-from-pane" style="margin-top:20px" >
            <div class="layui-form-item">
                <label class="layui-form-label">采集设备类型</label>
                <div class="layui-input-block">
                    <select name="neweqptType" lay-filter="eqptType">
                        <option value="0a0003biac">0a0003biac</option>
                        <option value="0a0003ahup" selected="">0a0003ahup</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">eqptIdCode</label>
                <div class="layui-input-block">
                    <input type="text" name="neweqptIdCode"  required  lay-verify="required" autocomplete="off" placeholder="请输入采集设备地址" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">eqptName</label>
                <div class="layui-input-block">
                    <input type="text" name="neweqptName"  required  lay-verify="required" autocomplete="off" placeholder="请输入采集设备名称" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item" style="margin-top:40px">
                <div class="layui-input-block">
                    <button class="layui-btn  layui-btn-submit " lay-submit="" lay-filter="demo11">确认修改</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
</html>

添加功能的界面和代码
在这里插入图片描述

添加界面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>表单</title>
    <link rel="stylesheet" href="../frame/layui/css/layui.css">
    <link rel="stylesheet" href="../frame/static/css/style.css">
    <link rel="icon" href="../frame/static/image/code.png">
    <style>
        .layui-form-label{
            width: 100px;
        }
        .layui-input-block {
            margin-left: 130px;
            min-height: 36px
        }
    </style>
</head>
<body class="body">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>添加采集设备</legend>
</fieldset>

<form class="layui-form layui-from-pane" action="/addCollector" style="margin-top:20px" method="post">
    <div class="layui-form-item">
        <label class="layui-form-label">采集设备类型</label>
        <div class="layui-input-block">
            <select name="eqptType" lay-filter="eqptType">
                <option value="0a0003biac">0a0003biac</option>
                <option value="0a0003ahup" selected="">0a0003ahup</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">eqptIdCode</label>
        <div class="layui-input-block">
            <input type="text" name="eqptIdCode"  required  lay-verify="required" autocomplete="off" placeholder="请输入采集设备地址" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">eqptName</label>
        <div class="layui-input-block">
            <input type="text" name="eqptName"  required  lay-verify="required" autocomplete="off" placeholder="请输入采集设备名称" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item" style="margin-top:40px">
        <div class="layui-input-block">
            <button class="layui-btn  layui-btn-submit " lay-submit="" lay-filter="demo1">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script src="../frame/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form','layer','jquery'], function(){
        var form = layui.form
                ,layer = layui.layer
                 ,$=layui.jquery,
                  table= layui.table
        //监听提交
        form.on('submit(demo1)', function(data){
            //layer.alert(JSON.stringify(data.field))
              //data=JSON.stringify(data.field)
            $.ajax({
                url:'/addCollector',
                type:'POST',
                dataType:'json',
               data:{eqptType:data.field.eqptType,eqptIdCode:data.field.eqptIdCode,eqptName:data.field.eqptName},
                success:function (msg) {
                    var returnCode=msg.returnCode;
                    if(returnCode==200){
                        layer.msg("添加成功", {icon: 6});
                        setTimeout(function(){
                           window.parent.location.reload();//添加成功后刷新父界面
                        }, 1000);
                    }else{
                        layer.msg("已经存在该设备,不支持重复添加", {icon: 5});
                    }
                }
            })
            return false;
        });
    });
</script>
</body>
</html>

后端的分页数据返回代码

  //获取采集设备总记录数
     String getCollectorInfoTotalRow="";
    @RequestMapping("/getCollectorInfoTotalRow")
    public  String getCollectorInfoTotalRow() throws Exception {
        String url = "/getCollectorInfoTotalRow";
        String equirments = equipmentService.getEquirement(url);
        JSONObject json = JSONObject.parseObject(equirments);
        getCollectorInfoTotalRow=json.get("count").toString();
        System.out.print(equirments);
        return equirments;
    }
    //获取采集设备信息
    @RequestMapping("getCollectorInfo")
    public  String getCollectorInfo(int page,int limit) throws Exception {
        String url = "/getCollectorInfo?page="+page+"&pageSize="+limit;
        String equirments = equipmentService.getEquirement(url);
        JSONObject json = JSONObject.parseObject(equirments);//将数据转化为json对象
        json.put("count",getCollectorInfoTotalRow);//把对象的count，进行赋值
        System.out.println(json.toString());
        return json.toString();
    }
返回的数据为：
//返回数据的总的记录数
{"msg":"200","code":0,"count":4}
//返回后台的数据不带count字段
{"returnCode":"200","data":[{"eqptIdCode":"075500005","eqptTypeName":"北电国网I型集中器","creator":"dyd","createTime":"2018-09-04 19:26:54","eqptName":"075500005","eqptType":"0a0003biac"},{"eqptIdCode":"075500006","eqptTypeName":"北电国网I型集中器","creator":"dyd","createTime":"2018-09-04 19:27:02","eqptName":"075500006","eqptType":"0a0003biac"},{"eqptIdCode":"000075500907","eqptTypeName":"北电以太网采集器","creator":"dyd","createTime":"2018-09-07 14:17:33","eqptName":"无锡展会zigbee网关","eqptType":"0a0003ahup"},{"eqptIdCode":"075500009","eqptTypeName":"北电国网I型集中器","creator":"dyd","createTime":"2018-09-10 13:51:21","eqptName":"水电集中器","eqptType":"0a0003biac"}]}

//经过处理后的字段，返回前端需要自动渲染的格式：
{"msg":"200","code":0,"data":[{"eqptIdCode":"075500005","eqptTypeName":"北电国网I型集中器","creator":"dyd","createTime":"2018-09-04 19:26:54","eqptName":"075500005","eqptType":"0a0003biac"},{"eqptIdCode":"075500006","eqptTypeName":"北电国网I型集中器","creator":"dyd","createTime":"2018-09-04 19:27:02","eqptName":"075500006","eqptType":"0a0003biac"},{"eqptIdCode":"000075500907","eqptTypeName":"北电以太网采集器","creator":"dyd","createTime":"2018-09-07 14:17:33","eqptName":"无锡展会zigbee网关","eqptType":"0a0003ahup"},{"eqptIdCode":"075500009","eqptTypeName":"北电国网I型集中器","creator":"dyd","createTime":"2018-09-10 13:51:21","eqptName":"水电集中器","eqptType":"0a0003biac"}],"count":"4"}

猜你喜欢

转载自blog.csdn.net/Hui_Hong_TaiLang/article/details/84108634
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
BPM为企业带来的实际利益
好程序员web前端分享css常用属性缩写
Java文件下载（excel）
css样式的动态添加及显示和隐藏等零碎用法
axios全局配置以及拦截器
使用Logstash来实时同步MySQL和log日志数据到ES
C++获取当前时间（年月日、时分秒、毫秒）
Odoo产品分析 (四) -- 工具板块(11) -- 网站即时聊天(1)
Java环境配置正确，但是java、javac、java -version均返回“不是内部或外部命令，也不是可运行的程序或批处理文件”？
01 官网下载各种CentOS教程（超详细版）
每日归档
更多
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022