Mokey_D_Luffy_33
2021-06-04 13:34
采纳率: 100%
浏览 59
已结题

python web前端如何实现网格视图遍历数据库,可以给个大概前端代码吗?

座位表和预约表设计如图,想实现图1的遍历展示,主要是座位的前端代码不会实现。

floor,row,col,有点三维数组的感觉了。前端需要座位对象的两个属性值来遍历,然后展示第三个属性值。表格又有两个循环,但是jijia2语法遍历套不进去

我乱写了些东西来显示界面,没放对象属性值数据,不知道怎么放,用什么技术。会用js?jQuery吗?我不熟悉5555

相关前端代码如下:

{% extends "bases.html" %}

{% block ext_css %}
    <style>
        .bg {
            background-image: url("/static/img/background.jpg");
            background-repeat: no-repeat;
            background-size: cover;
        }
    </style>
{% endblock %}

{% block content1 %}
    <body class="bg">
    <div class="container">
        <div class="row clearfix">
            <div class="col-md-2 column">
                <label class="control-label">楼&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;层:</label>
            </div>
            <div class="col-md-2 column">
                <select class="form-control" id="group" value="1">
                    <option value="1">一楼</option>
                    <option value="2">二楼</option>
                    <option value="2">三楼</option>
                    <option value="2">四楼</option>
                    <option value="2">五楼</option>
                </select>
            </div>
            <div class="col-md-8 column">
                <a class="btn btn-success btn-xs" href="#">&nbsp;&nbsp;&nbsp;</a>&nbsp;空闲&nbsp;&nbsp;&nbsp;
                <a class="btn btn-warning btn-xs" href="#">&nbsp;&nbsp;&nbsp;</a>&nbsp;忙碌&nbsp;&nbsp;&nbsp;
                <a class="btn btn-danger btn-xs" href="#">&nbsp;&nbsp;&nbsp;</a>&nbsp;当前预约
            </div>
        </div>
        <br>
        <div class="row clearfix">
            <div class="col-md-2 column">
                <label class="control-label">选择时间:</label>
            </div>
            <div class="col-md-6 column">
                <div class="col-sm-4">
                    <input class="form-control" readonly="readonly" type="date" name="date">
                </div>
                <div class="col-sm-4">
                    <input class="form-control" type="time" name="time">
                </div>
                <div class="col-sm-4">
                    <input class="form-control" type="time" name="time">
                </div>
            </div>
            <div class="col-md-4 column">
                <button type="button" class="btn btn-default btn-info">查询</button>
            </div>
        </div>
        <h4></h4>
    </div>
    <hr>
    <div class="row clearfix">
        <div class="col-md-12 column">
            <table class="table">
                <thead>
                <tr class="info">
                    <th></th>
                    <th>1列</th>
                    <th>2列</th>
                    <th>3列</th>
                    <th>4列</th>
                </tr>
                </thead>
                <tbody>
                {% for row in range(n_row) %}
                <tr class="warning">
                    <td>第{<!-- -->{ row }}排</td>
                    <td><a class="btn btn-success btn-xs" href="/order/bookout">&nbsp&nbsp&nbsp</a></td>
                    <td><a class="btn btn-warning btn-xs" href="/order/bookout">&nbsp&nbsp&nbsp</a></td>
                    <td><a class="btn btn-danger btn-xs" href="/order/bookout">&nbsp&nbsp&nbsp</a></td>
                    <td><a class="btn btn-success btn-xs" href="/order/bookout">&nbsp&nbsp&nbsp</a></td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    </body>
{% endblock %}

相关python代码如下:

# 座位表
@order_bp.route('/seats', methods=('POST', 'GET'))
def seats():
    seat_list = Seat.query.order_by(Seat.id.desc())
    n_row=2
    return render_template('seat.html', seat_list=seat_list,n_row=n_row)

相关数据库模型设计:

class Seat(db.Model):
    """
    座位表
    """
    __tablename__ = 'seat'

    id = db.Column(db.Integer, primary_key=True)  # id
    floor = db.Column(db.String(128), nullable=True)  # 楼层
    row = db.Column(db.Integer, nullable=False)  # 排
    col = db.Column(db.Integer, nullable=False)  # 列
    uid = db.Column(db.Integer, nullable=False)  # 占座学生id


class Order(db.Model):
    """
    预约表
    """
    __tablename__ = 'order'

    id = db.Column(db.Integer, primary_key=True)  # id
    uid = db.Column(db.Integer, nullable=False)  # 占座学生id
    sid = db.Column(db.Integer, nullable=False)  # 座位id
    estimate_start_time = db.Column(db.DateTime)  # 预计开始时间
    estimate_end_time = db.Column(db.DateTime)  # 预计结束时间
    actual_start_time = db.Column(db.DateTime)  # 实际开始时间
    actual_end_time = db.Column(db.DateTime)  # 实际结束时间
    statu = db.Column(db.CHAR)  # 状态

球球大佬们帮忙指点,好人一生平安/(ㄒoㄒ)/~~

  • 收藏

3条回答 默认 最新

  • 有问必答小助手 2021-06-07 14:50
    已采纳

    您好,我是有问必答小助手,您的问题已经有小伙伴解答了,您看下是否解决,可以追评进行沟通哦~

    如果有您比较满意的答案 / 帮您提供解决思路的答案,可以点击【采纳】按钮,给回答的小伙伴一些鼓励哦~~

    ps:问答VIP仅需29元,即可享受5次/月 有问必答服务,了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632

    打赏 评论
  • 有问必答小助手 2021-09-07 15:22
    您好,我是有问必答小助手,您的问题已经有小伙伴帮您解答,感谢您对有问必答的支持与关注!
    PS:问答VIP年卡 【限时加赠:IT技术图书免费领】,了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632
    打赏 评论
  • CSDN专家-黄老师 2021-06-04 14:40

    你先确定你的数据结构,然后确定数据输出格式,然后结合模版语法的for和if控制语句输出,这是一个整体设计规划问题

    如果对你有帮助,可以点击我这个回答右上方的【采纳】按钮,给我个采纳吗,谢谢

    1 打赏 评论

相关推荐 更多相似问题