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为每行的id

                    var d = '<a href="#" mce_href="#" onclick="del(\'' + row.id + '\')">删除</a> ';

                    return e + d;

                }

            }

            ],

        });

    });

</script>

</body>

</html>

3.后端代码如下：

from random import choice

from flask import Flask, jsonify, render_template, request

app = 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'] = i

        d['name'] = choice(names) + choice(names)  # 随机选取汉字并拼接

        d['price'] = ''

        data.append(d)

    if request.method == 'POST':

        print('post')

    if request.method == 'GET':

        info = request.values

        limit = info.get('limit', 10)  # 每页显示的条数

         offset = info.get('offset', 0)  # 分片数，(页码-1)*limit，它表示一段数据的起点

         print('get', limit)

        print('get  offset', offset)

        return jsonify({'total': len(data), 'rows': data[int(offset):(int(offset) + int(limit))]})

        # 注意total与rows是必须的两个参数，名字不能写错，total是数据的总长度，rows是每页要显示的数据,它是一个列表

        # 前端根本不需要指定total和rows这俩参数，他们已经封装在了bootstrap table里了

@app.route('/')

def hi():

    return render_template('table-test1.html')

if __name__ == '__main__':

    app.run()

bootstrap-table使用记录的更多相关文章

bootstrap table 学习记录
效果: html代码:  <div id="toolbar" class="btn-group"> <b ...
BootStrap table使用
bootstrap table git address https://github.com/wenzhixin/bootstrap-table 引入文件 <link rel="sty ...
bootstrap Table 中给某一特定值设置table选中
bootstrap Table 中给某一特定值设置table选中需求: 如图所示:左边地图人员选定,右边表格相应选中. 功能代码: //表格和图标联动 function changeTableSel ...
JS组件系列——表格组件神器：bootstrap table
前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...
JS组件系列——表格组件神器：bootstrap table（二：父子表和行列调序）
前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...
JS组件系列——表格组件神器：bootstrap table（三：终结篇，最后的干货福利）
前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...
JS组件系列——Bootstrap Table 表格行拖拽
前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果项目涉及到订单模块,那天突然接到 ...
后台系统组件：一丶bootstrap table
http://www.cnblogs.com/landeanfen/p/4976838.html (bootstrap table) http://www.cnblogs.com/landeanfen ...
.Net MVC+bootstrap Table学习
一.效果展示二.使用方法 1).相关css和js的引用 <link href="~/Themes/Bootstrap/css/bootstrap.css" rel=&quo ...
161222、Bootstrap table 服务器端分页示例
bootstrap版本为 3.X bootstrap-table.min.css bootstrap-table-zh-CN.min.js bootstrap-table.min.js 前端boot ...

随机推荐

spring @Async 线程池使用
最近公司项目正逐渐从dubbo向springCloud转型,在本次新开发的需求中,全部使用springcloud进行,在使用时线程池,考虑使用spring封装的线程池,现将本次使用心得及内容记录下来 ...
上课总结-模电chapter 1
Chapter 1 半导体器件一.杂质半导体(N型半导体/P型半导体) N型 p型特点 N型将少量5价元素参入四价元素中==> 电子多 ==>电子为多子 p型将少量3价元素参入四价 ...
kali linux之防火墙识别
通过检查回包,可能识别端口是否经过防火墙过滤,设备多种多样,结果存在一定的误差 Send Response Type SYN NO Filtered(先发送syn 如果不给回复防火墙可 ...
将php命令加入cenos环境变量
0.修改/etc/profile文件使其永久性生效,并对所有系统用户生效,在文件末尾加上如下两行代码 1.PATH=$PATH:/usr/local/webserver/php/bin:/usr/lo ...
谈谈你对Java平台理解
一说起对Java理解很容易就联想到Java的一些特性: 1,面向对象(继承,多态,封装) 2,平台无关性(”一次书写,到处运行“,jvm运行.class文件) 3,语言(泛型,lambda) 4,类库 ...
使用原生实现jquery中的css方法
由于jquery放在mobile页面上,有时候还是显得有点大,所以今天尝试使用原生来开发,但是习惯了jquery之后,转用原生开发之后,发现原生中,找不到可以替代jquery的css方法,于是对原生的 ...
js 伪数组 arguments
/* 定义一个函数,如果不确定用户是否传入了参数, arguments可以获取到函数传入了多少个参数和每个参数的值 */ /* 定义 */ function f1() { //获取的是函数在调用的时 ...
docker 部署笔记
Docker虚拟机常用命令先更新软件包 yum -y update 安装Docker虚拟机 yum install -y docker 运行.重启.关闭Docker虚拟机 service d ...
LeetCode记录之9——Palindrome Number
LeetCode真是个好东西,本来闲了一下午不想看书,感觉太荒废时间了就来刷一道题.能力有限,先把easy的题目给刷完. Determine whether an integer is a palin ...
docker大概理解
#是啥# 轻量级的虚拟机,占用资源远小于一般意义上的虚拟机(例如:vmware,hyper-v) #特点# 启动快,体积小,开销少 #本质# Linux容器的一种封装参考: 阮一峰博客 http:/ ...

bootstrap-table使用记录

bootstrap-table使用记录的更多相关文章

随机推荐

热门专题