layui渲染数据的两种方式

最新推荐文章于 2023-07-06 18:42:51 发布

·暮雨·

最新推荐文章于 2023-07-06 18:42:51 发布

阅读量4.4k

点赞数 1

分类专栏： Java 文章标签： java

本文链接：https://blog.csdn.net/qq_43816654/article/details/106223664

版权

Java 专栏收录该内容

55 篇文章 2 订阅

订阅专栏

一.自动渲染
自动渲染直接拼接url

<%--
  Created by IntelliJ IDEA.
  User: Fetter
  Time: 21:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>塔机参数</title>
    <link href="/static/layui/css/layui.css" rel="stylesheet" />
    <script src="/static/layui/layui.js"></script>
    <script src="/static/js/jquery-3.4.1.min.js"></script>
</head>
<body>
<table class="layui-table" lay-data="{url:'/tower/selectTowerParam.json',page:true,limit:10,limits:[10,15,20,25,30]}">
    <thead>
    <tr>
        <th lay-data="{field:'id',width:40}"></th>
        <th lay-data="{field:'tjType',sort:true,width:100}">塔机型号</th>
        <th lay-data="{field:'tjMultiplying',sort:true,width:100}">倍率</th>
        <th lay-data="{field:'tjNumber',sort:true,width:100}">塔吊编号</th>
        <th lay-data="{field:'tjChannel',sort:true,width:120}">防碰撞频道</th>
        <th lay-data="{field:'tjBigarm',sort:true,width:100}">大臂长m</th>
        <th lay-data="{field:'tjForearm',sort:true,width:100}">小臂长m</th>
        <th lay-data="{field:'tjHoisting',sort:true,width:100}">最大吊重t</th>
        <th lay-data="{field:'tjHeight',sort:true,width:100}">塔高m</th>
        <th lay-data="{field:'tjXcoordinate',sort:true,width:100}">X坐标m</th>
        <th lay-data="{field:'tjYcoordinate',sort:true,width:100}">Y坐标m</th>
        <th lay-data="{field:'tjWeight',sort:true,width:150}">最大幅度起重量</th>
    </tr>
    </thead>
</table>
</body>
<script src="/static/layui/layui.js" type="text/javascript"></script>
<script>
    parent.$(".layui-form-item").hide();
    layui.use('table',function(){
        var table = layui.table;
    })
</script>

</html>

在这里插入图片描述
二.方法渲染
jsp

<%--
  Created by IntelliJ IDEA.
  User: Fetter
  Time: 14:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>历史数据</title>
    <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">
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
    <script src="/static/js/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        .layui-table-page{text-align: center;}
    </style>
</head>

<body>
<table class="layui-hide layui-table" id="hisTable" lay-filter="hisTable"></table>
<script src="/static/js/historyData.js"></script>
<script src="/static/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
</body>
</html>

window.onload = function () {

    parent.$(".layui-form-item").show();

    //获取设备名称
    var device = parent.$("#device").val();
    /*获取开始时间*/
    var firstTime = parent.$("#firstTime").val();
    /*获取结束时间*/
    var lastTime = parent.$("#lastTime").val();
    var infourl="";

    /*url判断：如果时间为空，就查询所有时间段数据，有时间就按时间段查询，*/
    if (firstTime.length > 6 && lastTime.length > 6) {
        infourl = '/history/querytHistoricalData.json/' + device + "/" + firstTime + "/" + lastTime;
    } else if (firstTime.length == 0 && lastTime.length == 0) {
        firstTime = "1970-01-01 00:00:00";
        lastTime = "9999-12-01 00:00:00";
        infourl = '/history/querytHistoricalData.json/' + device + "/" + firstTime + "/" + lastTime;
    } else {
        infourl = '/history/querytHistoricalData.json/' + device + "/" + firstTime + "/" + lastTime;
    }
    /*点击历史数据标签时处理，无时间条件*/
    historData(infourl);
    /*点击查询按钮传入数据*/
    quertyDate(device,firstTime,lastTime,infourl);
}
/*点击查询按钮后处理*/
function quertyDate(device,firstTime,lastTime,infourl) {

    $(parent.$("#queryBut")).click(function () {
        //获取设备名称
        device = parent.$("#device").val();
        /*获取开始时间*/
        firstTime = parent.$("#firstTime").val();
        /*获取结束时间*/
        lastTime = parent.$("#lastTime").val();
        /*url判断：如果时间为空，就查询所有时间段数据，有时间就按时间段查询，*/
        if (firstTime.length > 6 && lastTime.length > 6) {
            infourl = '/history/querytHistoricalData.json/' + device + "/" + firstTime + "/" + lastTime;
        } else if (firstTime.length == 0 && lastTime.length == 0) {
            firstTime = "1970-01-01 00:00:00";
            lastTime = "9999-12-01 00:00:00";
            infourl = '/history/querytHistoricalData.json/' + device + "/" + firstTime + "/" + lastTime;
        } else {
            infourl = '/history/querytHistoricalData.json/' + device + "/" + firstTime + "/" + lastTime;
        }
        historData(infourl);
    });
}

function historData(infourl) {
    layui.use('table', function () {
        var table = layui.table;
        //执行一个 table 实例
        table.render({
            elem: '#hisTable'
            , url: infourl
            , page: true //开启分页
            , limit: 10
            , limits: [10, 15, 20, 25, 30]
            , cols: [[ //表头
                {width: 40}
                , {
                    field: 'date_time.time',
                    title: '时间',
                    sort: true,
                    width: 200,
                    templet: "<div>{{layui.util.toDateString(d.date_time.time, 'yyyy-MM-dd HH:mm:ss')}}</div>"
                }
                , {field: 'tower_height', title: '高度(m)', sort: true, width: 100}
                , {field: 'tower_range', title: '幅度(°)', sort: true, width: 100}
                , {field: 'tower_rotation', title: '回转(t)', sort: true, width: 100}
                , {field: 'tower_hoisting', title: '吊重(t)', sort: true, width: 100}
                , {field: 'tower_moment', title: '力矩(%)', sort: true, width: 100}
                , {field: 'tower_air_speed', title: '风速(m/s)', sort: true, width: 100}
                , {field: 'tower_dip', title: '倾角(°)', sort: true, width: 100}
                , {field: 'tower_picture', width: 60, title: '图片'}
            ]]
        });
    });
}