@chenbinghua 2019-03-02T06:40:05.000000Z 字数 3631 阅读 602

Bootstrap_table学习

javascript

前言

一个后台管理系统最大功能就是增删改查找

学习参考

https://blog.csdn.net/javahighness/article/details/73929108

官网介绍

基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。

开始

引入一下文件
<!-- 引入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>

1.data-toggle="table" 无需JavaScript启用bootstrap table

分页

思考一下参数
请求第几条开始的数据 offset
每页显示多少条数据 limit
怎样发送查询数据

具体代码

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入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>
<button type="button" class="btn btn-success" aria-label="Left Align">
    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>添加组件
</button>
<table id="table"></table>
<script>
    $("#table").bootstrapTable({ // 对应table标签的id
        url: "demo1.json", // 获取表格数据的url
        cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
        striped: true,  //表格显示条纹，默认为false
        pagination: true, // 在表格底部显示分页组件，默认false
        pageList: [10, 20], // 设置页面可以显示的数据条数
        pageSize: 10, // 页面数据条数
        pageNumber: 1, // 首页页码
        sidePagination: 'server', // 设置为服务器端分页
        showToggle:true,    // 是否显示切换视图（table/card）按钮。
        showColumns:true,   // 是否显示内容列下拉框。
        showRefresh:true,       // 是否显示 刷新按钮
        singleSelect:true,  //  设置True 将禁止多选
        clickToSelect:true,     // 设置true 将在点击行时，自动选择rediobox 和 checkbox
           // 是否显示切换视图（table/card）按钮。
        queryParams: function (params) { // 请求服务器数据时发送的参数，可以在这里添加额外的查询参数，返回false则终止请求
            return {
                pageSize: params.limit, // 每页要显示的数据条数
                offset: params.offset, // 每页显示数据的开始行号
                sort: params.sort, // 要排序的字段
                sortOrder: params.order, // 排序规则
                dataId: $("#dataId").val() // 额外添加的参数
            }
        },
        sortName: 'code', // 要排序的字段
        sortOrder: 'desc', // 排序规则
        columns: [
            {
                checkbox: true, // 显示一个勾选框
                align: 'center' // 居中显示
            }, {
                field: 'code', // 返回json数据中的name
                title: '编号', // 表格表头显示文字
                align: 'center', // 左右居中
                valign: 'middle' // 上下居中
            }, {
                field: 'name',
                title: '名称',
                align: 'center',
                valign: 'middle'
            }, {
                field: 'calcMode',
                title: '计算方式',
                align: 'center',
                valign: 'middle',
                formatter: function (value, row, index){ // 单元格格式化函数
                    var text = '-';
                    if (value == 1) {
                        text = "方式一";
                    } else if (value == 2) {
                        text = "方式二";
                    } else if (value == 3) {
                        text = "方式三";
                    } else if (value == 4) {
                        text = "方式四";
                    }
                    return text;
                }
            }, {
                title: "操作",
                align: 'center',
                valign: 'middle',
                width: 160, // 定义列的宽度，单位为像素px
                formatter: function (value, row, index) {
                    return '<button class="btn btn-primary btn-sm" onclick="del(\'' + row.stdId + '\')">删除</button>';
                }
            }
        ],
        onLoadSuccess: function(){  //加载成功时执行
            console.info("加载成功");
        },
        onLoadError: function(){  //加载失败时执行
            console.info("加载数据失败");
        }
    })
</script>
</body>
</html>

json

{
  "total":50,
  "rows":[
    {
      "code":1,
      "name":"这是名称1",
      "calcMode":2
    },
    {
      "code":2,
      "name":"这是名称2",
      "calcMode":1
    },
    {
      "code":3,
      "name":"这是名称3",
      "calcMode":3
    },
    {
      "code":4,
      "name":"这是名称4",
      "calcMode":1
    },
    {
      "code":5,
      "name":"这是名称5",
      "calcMode":1
    }
  ]
}