【Flask】bootstrap table基礎

時間 2019-11-11

標籤 Flask bootstrap table 基礎欄目 Python 简体版

原文原文鏈接

經過bootstrap table實現基於flask框架，經過後端傳送的json數據建立table標籤。css

py文件

須要注意json數據的格式

#!/usr/bin/python
# coding=utf-8
from flask import Flask,render_template,redirect,json,url_for
import sys
app = Flask(__name__)

reload(sys)
sys.setdefaultencoding('utf-8')

@app.route('/')
def hello_world():
    return 'Hello World!'

@app.route('/index',methods=['GET','POST'])
def index():
    return render_template("index.html")
#經過/index路由的html中bootstrap table的ajax獲取query函數的json數據

@app.route('/query',methods=['GET','POST'])
def query():
    print url_for('hello_world')   #能夠獲取hello_world函數的路由
    row=[{'字段一':'value1','字段二':'value2'},{'字段一':'value3','字段二':'value4'}]
    result = json.dumps(row)
    return result


if __name__ == '__main__':
    app.run()

html文件

須要注意的是ajax的method方式須要是post

另外須要確保js和css等靜態文件引入成功

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

{#        <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">#}
{#        <link rel="stylesheet" href="/static/bootstrap-table-master/dist/bootstrap-table.min.css">#}
{#      <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>#}
{#         <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/js/bootstrap.min.js">#}
{#     <link rel="stylesheet" href="/static/bootstrap-table-master/dist/bootstrap-table.min.js">#}
{#    <link rel="stylesheet" href="/static/bootstrap-table-master/src/locale/bootstrap-table-zh-CN.js">#}


    <!-- 引入bootstrap樣式 -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- 引入bootstrap-table樣式 -->
<link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">

<!-- jquery -->
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<!-- bootstrap-table.min.js -->
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<!-- 引入中文語言包 -->
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>




</head>
<body>

<h1 class="col-md-offset-1">welcome</h1>
<div class="col-md-5">
<table  id="table">

</table>
</div>
  <script>
      var abc = $('#table');
abc.bootstrapTable({
    method: 'post',
    url:'/query',
    columns: [
        { field: '字段一',
        title: '標題一'},
          { field: '字段二',
        title: '標題二'},
    ]
});
  </script>
</body>
</html>