当前位置：首页 >前端技术 > bootstrap-table使用记录

bootstrap-table使用记录

效果如图所示：

1.框架用的flask

　　目录结构如下：

2.前端代码如下：

　　table-test1.html

<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width" /><title>BootStrap Table使用</title><!--@*1、Jquery组件引用*@--><script src="../static/jquery-1.12.4.js"></script><!--@*2、bootstrap组件引用*@--><script src="../static/bootstrap-3.3.0-dist/dist/js/bootstrap.js"></script><link href="../static/bootstrap-3.3.0-dist/dist/css/bootstrap.css" rel="stylesheet" /><!--@*3、bootstrap table组件以及中文包的引用*@--><script src="../static/bootstrap-table-1.11.0/dist/bootstrap-table.js"></script><link href="../static/bootstrap-table-1.11.0/dist/bootstrap-table.css" rel="stylesheet" /><script src="../static/bootstrap-table-1.11.0/dist/locale/bootstrap-table-zh-CN.js"></script></head><body>{# 推荐用这种方式，比较灵活#}<div style="width: 80%;margin: 0 auto"><table id="table" ></table></div>{# 1.先定义一个空表#}{# 2.用js初始化表，并填充数据#}<script type="text/javascript">$(function () {$('#table').bootstrapTable({url: '/jsondata',  // 请求数据源的路由dataType: "json",pagination: true, //前端处理分页singleSelect: false,//是否只能单选search: true, //显示搜索框，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大toolbar: '#toolbar', //工具按钮用哪个容器striped: true, //是否显示行间隔色cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）pageNumber: 1, //初始化加载第10页，默认第一页pageSize: 10, //每页的记录行数（*）pageList: [10, 20, 50, 100], //可供选择的每页的行数（*）strictSearch: true,//设置为 true启用 全匹配搜索，false为模糊搜索showColumns: true, //显示内容列下拉框showRefresh: true, //显示刷新按钮minimumCountColumns: 2, //当列数小于此值时，将隐藏内容列下拉框clickToSelect: true, //设置true， 将在点击某行时，自动勾选rediobox 和 checkbox{#height: 500, //表格高度，如果没有设置height属性，表格自动根据记录条数决定表格高度#}uniqueId: "id", //每一行的唯一标识，一般为主键列showToggle: true, //是否显示详细视图和列表视图的切换按钮cardView: false, //是否显示详细视图{#detailView: true, //是否显示父子表，设置为 true 可以显示详细页面模式,在每行最前边显示+号#}sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）columns: [{  //定义表头,这个表头必须定义,下边field后边跟的字段名字必须与后端传递的字段名字相同.如:id、name、price
　　　　　　　　　　　　　　　　跟后端的字段名id  name price是完全一样的.
field: 'id',title: '序号',align: 'center',  //对齐方式，居中{#width: '200px'  // 可以写各种样式#}}, {field: 'name',title: '名称',align: 'center'}, {field: 'price',title: '价格',align: 'center',}, {title: '操作',field: 'id',align: 'center',formatter: function (value, row, index) {var e = '<a href="#" mce_href="#" onclick="edit(\'' + row.id + '\')">编辑</a> ';  //row.id为每行的idvar d = '<a href="#" mce_href="#" onclick="del(\'' + row.id + '\')">删除</a> ';retu e + d;}}],});});</script></body></html>

3.后端代码如下：

from random import choicefrom flask import Flask, jsonify, render_template, requestapp = Flask(__name__)@app.route('/jsondata', methods=['POST', 'GET'])def infos():""" 请求的数据源，该函数模拟数据库中存储的数据，返回以下这种数据的列表：{'name': '香蕉', 'id': 1, 'price': '10'}{'name': '苹果', 'id': 2, 'price': '10'}"""data = []names = ['香', '草', '瓜', '果', '桃', '梨', '莓', '橘', '蕉', '苹']for i in range(1, 1001):d = {}d['id'] = id['name'] = choice(names) + choice(names)  # 随机选取汉字并拼接d['price'] = '10'data.append(d)if request.method == 'POST':print('post')if request.method == 'GET':info = request.valueslimit = info.get('limit', 10)  # 每页显示的条数 offset = info.get('offset', 0)  # 分片数，(页码-1)*limit，它表示一段数据的起点 print('get', limit)print('get  offset', offset)retu jsonify({'total': len(data), 'rows': data[int(offset):(int(offset) + int(limit))]})# 注意total与rows是必须的两个参数，名字不能写错，total是数据的总长度，rows是每页要显示的数据,它是一个列表# 前端根本不需要指定total和rows这俩参数，他们已经封装在了bootstrap table里了@app.route('/')def hi():retu render_template('table-test1.html')if __name__ == '__main__':app.run()