发布于2019-08-23 16:54 阅读(859) 评论(0) 点赞(1) 收藏(0)
通过bootstrap table实现基于flask框架,通过后端传送的json数据创建table标签。
#!/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()
<!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>
作者:38373
链接:https://www.pythonheidong.com/blog/article/55427/db70d6605bfddc41191b/
来源:python黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容:(最多支持255个字符)
---无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事,而不是让内心的烦躁、焦虑,坏掉你本来就不多的热情和定力
Copyright © 2018-2021 python黑洞网 All Rights Reserved 版权所有,并保留所有权利。 京ICP备18063182号-1
投诉与举报,广告合作请联系vgs_info@163.com或QQ3083709327
免责声明:网站文章均由用户上传,仅供读者学习交流使用,禁止用做商业用途。若文章涉及色情,反动,侵权等违法信息,请向我们举报,一经核实我们会立即删除!