引用css和js

Bootstrap-table为这些文件提供了 CDN 的支持，所以不需要下载.js .css文件就可以直接用了，十分方便

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.css">
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.js"></script>
<!-- Latest compiled and minified Locales -->
<script src="https://unpkg.com/bootstrap-table@1.19.1/dist/locale/bootstrap-table-zh-CN.min.js"></script>

使用

html

在html上添加一行table。

<table id="table"></table>

javascript

在js里面添加：

// 获取后台数据
function MyupdateTable(evn, col_name) {var xmlhttp = new XMLHttpRequest();var json_rep;xmlhttp.onreadystatechange = function(){if (xmlhttp.readyState == 4 && xmlhttp.status == 200){// var json_rep = xmlhttp.responseText.parseJSON();  json_rep = JSON.parse(xmlhttp.responseText)}}xmlhttp.open("GET","http://9.135.90.225:8090/getAlarmMsg?evn=" + evn + "&&col_name=" + col_name, false);xmlhttp.send();return json_rep;
}function judge_except(val) {if (val == 0) return "是";else return "否";
}
// 将json数据转成obj数组
function transData(json_rep, dataTable) {len = json_rep['len']for (var i = 0; i < len; i++) {dataTable.push({id: json_rep['id'][i],time: json_rep['date'][i],col_name: json_rep['colname'][i],actual: json_rep['actual'][i],scope: json_rep['scope'][i],if_except: judge_except(json_rep['if_except'][i])})}
}
var tke_room_nums_data = []
rep_tke_room_nums = MyupdateTable("tke","room_nums")
transData(rep_tke_room_nums, tke_room_nums_data)
// 对于表单结构、模式进行设置
$('#table').bootstrapTable({search: true,pagination: true,   //启动分页striped: true,    //设置为 true 会有隔行变色效果cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）pageSize: 6,//初始页记录数sortable: true,    //排序pageList: [6,36,72,144], //记录数可选列表smartDisplay: false,    //程序自动判断显示分页信息columns: [{field: 'id',title: 'ID'}, {field: 'time',title: '时间'}, {field: 'col_name',title: '参数名'}, {field: 'actual',title: '实际值'},{field: 'scope',title: '预测范围'},{field: 'if_except',title: '是否告警'},],data: tke_room_nums_data
})

flask

在flask里添加这样的py程序

# author：hanhandi
# flask学习网址：https://www.w3cschool.cn/flask/flask_routing.html
# pymsql学习网址：
from flask import Flask, render_template, request, jsonify
import pymysql
import json
import logging
from dbutils.pooled_db import PooledDB
# 导入mylib
import sys
sys.path.append('/var/www/html/NewTest/InternShipProject/my_pylib')
from my_global_logic import adjust_table_name
from my_global_logic import Reverse
from my_sql import SELECTapp = Flask(__name__)# @app.route('/')
# def index():
#     return render_template("index.html")# 一些配置参数，需要从json文件中读取
with open("/var/www/html/NewTest/InternShipProject/middle_back_end/backend/param_config/179_frame_param_config.json",'r+') as f:load_dict = json.load(f)mapping_path = load_dict["mapping_path"]    # 机房与机器ip映射关系文件db_password = load_dict["db_password"]# 初始化日志记录文件
LOG_FORMAT = "%(asctime)s - %(levelname)s - %(message)s"
DATE_FORMAT = "%m/%d/%Y %H:%M:%S %p"
logging.basicConfig(filename = '/var/www/html/NewTest/logfiles/alarm_flask_backend.log', level = logging.WARNING, format = LOG_FORMAT, datefmt = DATE_FORMAT)# 解决跨域问题
@app.after_request
def cors(environ):environ.headers['Access-Control-Allow-Origin']='*'environ.headers['Access-Control-Allow-Method']='*'environ.headers['Access-Control-Allow-Headers']='x-requested-with,content-type'return environdef getMsg(evn, col_name):table_name = evn + "_" + col_name# 返回结果response_data = {'code': 0, 'msg': 'ok'}# 打开数据库连接db = pymysql.connect(host='localhost',user='root',password=db_password,database='alarm_msg')# 使用 cursor() 方法创建一个游标对象 cursorcursor = db.cursor()try:select_sql = "SELECT id, order_date, col_name, actual, scope_left, scope_right, if_except FROM %s order by id desc" % table_nameresult = SELECT(db, cursor, select_sql)id = []date = []colname = []actual = []scope_left = []scope_right = []scope = []if_except = []for row in result:id.append(row[0])date.append(row[1])colname.append(row[2])actual.append(row[3])scope_left.append(row[4])scope_right.append(row[5])if_except.append(row[6])for i in range(len(scope_left)):scope.append("[" + str(scope_left[i]) + ", "+ str(scope_right[i]) + "]")# 关闭数据库连接cursor.close()db.close()response_data['len'] = len(id)response_data['id'] = idresponse_data['date'] = dateresponse_data['colname'] = colnameresponse_data['actual'] = actualresponse_data['scope'] = scoperesponse_data['if_except'] = if_exceptreturn json.dumps(response_data, default=str)   except BaseException:logging.critical("Function: getMsg stop ...")cursor.close()db.close()return json.dumps(response_data) @app.route('/getAlarmMsg', methods=['GET'])
def getAlarmMsg():try:evn = request.args['evn']col_name = request.args['col_name']return getMsg(evn, col_name)except BaseException:response_data = {'code': 0, 'msg': 'error'}return json.dumps(response_data) if __name__ == '__main__':   try:                                                           app.run(host='0.0.0.0', port=8090, debug=True)except BaseException:logging.critical("app stop ...")

mysql

mysql里面的表单存储结构为：

mysql> use alarm_msg;
Reading table information for completion of table and column names
You can turn off this feature to get a quicker startup with -ADatabase changed
mysql> show tables;
+---------------------+
| Tables_in_alarm_msg |
+---------------------+
| cvm_flow_down       |
| cvm_flow_up         |
| cvm_room_nums       |
| cvm_user_nums       |
| tke_flow_down       |
| tke_flow_up         |
| tke_room_nums       |
| tke_user_nums       |
+---------------------+
8 rows in set (0.00 sec)mysql> select * from cvm_flow_down;
+-----+---------------------+----------+-----------+------------+------------+-------------+-----------+
| id  | order_date          | today_id | col_name  | actual     | scope_left | scope_right | if_except |
+-----+---------------------+----------+-----------+------------+------------+-------------+-----------+
|   1 | 2022-03-14 18:20:43 |      110 | flow_down |  392615039 |    -628001 |   336556517 |         1 |
|   2 | 2022-03-14 18:30:42 |      111 | flow_down |  409642229 |     746497 |   383903533 |         1 |
|   3 | 2022-03-14 18:40:41 |      112 | flow_down |  526891185 |    4350006 |   419925905 |         1 |
|   4 | 2022-03-14 18:50:39 |      113 | flow_down |  557464437 |   10199705 |   451904363 |         1 |
|   5 | 2022-03-14 19:00:48 |      114 | flow_down |  648641400 |   22094813 |   481082273 |         1 |
|   6 | 2022-03-14 19:10:45 |      115 | flow_down |  884153264 |   36335606 |   502285379 |         1 |

最后结果：

参考

https://v3.bootcss.com/getting-started/
https://bootstrap-table.com/docs/getting-started/download/

使用Bootstrap-table创建表单，并且与flask后台进行数据交互相关推荐

webform快速创建表单内容文件--oracle 数据库
使用方法前台页面这样写就足够了 <form class="stdform" runat="server"><div id="fie ...
JavaFX官方教程（五）之在JavaFX中创建表单
翻译自在JavaFX中创建表单在开发应用程序时,创建表单是一项常见活动.本教程将向您介绍屏幕布局的基础知识,如何将控件添加到布局窗格以及如何创建输入事件. 在本教程中,您将使用JavaFX构建如 ...
angular js创建表单_如何优雅的使用 Angular 表单验证
随便说说,这一节可以跳过去年参加 ngChine 2018 杭州开发者大会的时候记得有人问我: Worktile 是什么时候开始使用 Angular 的,我说是今年(2018年) 3 月份开始在新模 ...
Flask——创建表单模型类与模板使用
首先引入表单扩展Flask-WTF: pip install Flask-WTF 使用Flask-WTF扩展可以验证后端接受到的信息,防止恶意攻击. WTForms支持的HTML标准字段字段对象说 ...
HTML表单--如何使用HTML创建表单
HTML表单是什么? HTML 表单用于收集用户输入,与服务器进行交互,使用form元素来定义一个HTML表单. 下面简单介绍表单中常见元素的用法. 1.表单标签 form 属性: action -数 ...
input标签的值只能两位小数_Day51 HTML表格表单标签、flask框架
目录表格标签表单标签 action标签 input标签 select标签 textarea标签 form表单提交文件需要注意 flask框架 1.表格标签 <!DOCTYPE html> ...
layui删除后刷新表格_layui form表单提交之后重新加载数据表格的方法
如下图,在我们做高级查询的时候需要重新加载数据表格table.reload(); HTML form表单菜单:  JS $(function () { //注意:这里是数据表格的加载数据,必须写 ...
在Excel每个表单的相同位置插入相同数据
有时需要在Excel文件每个表单的相同位置插入相同数据,一个一个输入过于繁琐,有没有简便的方法呢?是有的! 首先要选中需要填写相同数据的表单,例如需要在1-20表单中的D25单元格中插入字符串&quo ...
html创建一个四行三列表单,HTML（三）表格table与表单form的基本使用
table的基本使用表格的作用除了可以显示一个表格外,有的时候还可以用于辅助排版.以前的网页都是使用表格进行排版的,不过现在都不流行了,因为表格排版不利于网页结构. 1.新建表格 table就是表格 ...

使用Bootstrap-table创建表单，并且与flask后台进行数据交互

文章目录