文章目錄

• 引用css和js
• 使用
• • html
  • javascript
  • flask
  • mysql
• 參考

引用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后台进行数据交互的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。