Bootstrap Table项目初始化与自定义全局配置

初始化

方案一、从零使用Bootstrap Table, 利用node.js下载依赖

Bootstrap

npm install bootstrap

Bootstrap Table

npm install bootstrap-table

jquery.js

npm install jquery

Font Awesome 字体图标

npm install font-awesome

popper.js

npm install popper.js --save

方案二、使用npm install安装依赖

package.json

{
  "name": "bootstrap-table-example-study",
  "version": "1.0.0",
  "description": "Bootstrap Table 学习笔记+示例演示",
  "main": "index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "Bootstrap",
    "Table"
  ],
  "author": "lizhun",
  "license": "ISC",
  "dependencies": {
    "bootstrap": "^4.4.1",
    "bootstrap-table": "^1.15.5",
    "font-awesome": "^4.7.0",
    "jquery": "^3.4.1",
    "popper.js": "^1.16.0"
  }
}

自定义全局配置文件

./js/bootstrap-table-custom.js

/**
 * @author 飘逸
 * @email [email protected]
 * @date 2019/12/31.
 * @description 全局配置
 */
(function ($) {
    'use strict';
    $.fn.bootstrapTable.custom = {
        // 请求相关
        method: 'GET',                      //请求方式（*）
        contentType : "application/x-www-form-urlencoded",
        responseHandler: function(r) {
            return {
                total: r.page.total,
                rows: r.data
            };
        },
        cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）

        // 排序相关
        sortable: true,                     // 是否启用排序
        sortOrder: "asc",                   // 初始化列排序方式
        sortName: 'id',                     // 初始化排序列
        // rememberOrder: false,            // ??

        // 分页相关
        pagination: true,                   //是否显示分页（*）
        sidePagination: "client",           //分页方式：client客户端分页，server服务端分页（*）
        pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
        pageSize: 15,                        //每页的记录行数（*）
        pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
        // showExtendedPagination: false,   // ??

        // 显示相关
        search: true,                        // 是否显示表格搜索
        strictSearch: false,                 // 设置为 true启用全匹配搜索，否则为模糊搜索。
        showRefresh: true,                   // 是否显示刷新按钮
        showColumns: true,                   // 是否显示所有的列（选择显示的列）
        showToggle: true,                    // 是否显示详细视图和列表视图的切换按钮
        cardView: false,                     // 是否显示详细视图
        detailView: false,                   // 是否显示父子表
        showFullscreen: true,                // 是否显示全屏按钮。
        minimumCountColumns: 2,              // 最少允许的列数
        showButtonText: false,               // 是否显示按钮文字
        striped: true,                      //是否隔行变色显示
        toolbar: '#toolbar',                //工具按钮用哪个容器
        icons: {
            paginationSwitchDown: 'fa-caret-square-down',
            paginationSwitchUp: 'fa-caret-square-up',
            refresh: 'fa-refresh',        // 默认fa-sync图标不存在
            toggleOff: 'fa-toggle-off',
            toggleOn: 'fa-toggle-on',
            columns: 'fa-th-list',
            detailOpen: 'fa-plus',
            detailClose: 'fa-minus',
            fullscreen: 'fa-arrows-alt',
            search: 'fa-search',
            clearSearch: 'fa-trash'
        },
        buttonsPrefix: 'btn btn-outline',
        buttonClass: 'primary',

        // 选择相关
        singleSelect: false,                // 设置 true 将禁止多选
        clickToSelect: true,                // 是否启用点击选中行
        // ignoreClickToSelectOn:           // 忽略点击选中
        uniqueId: "id",                     // 每一行的唯一标识，一般为主键列
        idField: 'id',                      // 指定主键列
        selectItemName: 'id',               // radio 或者 checkbox 的字段 name 名。
        checkboxHeader: true,               // 设置 false 将在列头隐藏全选复选框。
        multipleSelectRow: true,            // 选择行，支持 ctrl+click、 shift+click

        // 其他
        //height: 500,                      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
    };

    $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.custom);

    $.fn.bootstrapTable.custom_column = {
        sortable: false,                     //是否启用排序
        align: 'center',
        valign: 'middle',
        formatter: function (value, row, index) {
            var that = this;
            var type = that.type;
            if (type) {
                switch(type) {
                    case 'no':
                        // 序号
                        return index + 1;
                        break;
                    case 'isEnable':
                        // 状态
                        var type_0 = that.type_0 ? that.type_0 : '冻结';
                        var type_1 = that.type_1 ? that.type_1 : '正常';
                        if (value == '0') {
                            return '<span class="label label-danger">'+ type_0 +'</span>';
                        } else if (value == '1') {
                            return '<span class="label label-primary">'+ type_1 +'</span>';
                        }
                        break;
                    default:
                        break;
                }
            } else {
                return value;
            }
        }
    };
    $.extend($.fn.bootstrapTable.columnDefaults, $.fn.bootstrapTable.custom_column);
})(jQuery);

创建Bootstrap模板文件

./bootstrap-table-template.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Hello, Bootstrap Table!</title>
    <link rel="stylesheet" type="text/css" href="./node_modules/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="./node_modules/bootstrap-table/dist/bootstrap-table.min.css">
    <link rel="stylesheet" type="text/css" href="./node_modules/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body class="gray-bg">

    <div class="wrapper wrapper-content">
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox">
                        <div class="ibox-title">
                            <h5>Bootstrap Table</h5>
                        </div>
                        <div class="ibox-content">

                            <!-- table内容 -->
                            <table id="table"></table>

                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="footer fixed_full text-center">
            <div>
                <strong>Copyright</strong> 飘逸 &copy; 2019-2020
            </div>
        </div>
    </div>

<script type="text/javascript" src="./node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="./node_modules/popper.js/dist/umd/popper.js"></script>
<script type="text/javascript" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./node_modules/bootstrap-table/dist/bootstrap-table.min.js"></script>
<script type="text/javascript" src="./node_modules/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js"></script>

<!-- 自定义js内容 -->
<script type="text/javascript" src="./js/bootstrap-table-custom.js"></script>
<script>
    $('#table').bootstrapTable({});
</script>
</body>
</html>

知识展示

增加全局配置文件*./js/bootstrap-table-custom.js* (本人自定义的，仅供参考)

/**
 * Created by think on 2019/12/31.
 * 全局配置
 */
(function ($) {
    'use strict';
    $.fn.bootstrapTable.custom = {
        method: 'GET',                      //请求方式（*）
        toolbar: '#toolbar',                //工具按钮用哪个容器
        striped: true,                      //是否显示行间隔色
        cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        pagination: true,                   //是否显示分页（*）
        sortable: true,                     //是否启用排序
        sortOrder: "asc",                   //排序方式
        sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
        pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
        pageSize: 5,                        //每页的记录行数（*）
        pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
        search: false,                      //是否显示表格搜索
        strictSearch: true,
        showColumns: true,                  //是否显示所有的列（选择显示的列）
        showRefresh: true,                  //是否显示刷新按钮
        minimumCountColumns: 2,             //最少允许的列数
        clickToSelect: true,                //是否启用点击选中行
        //height: 500,                      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
        uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
        showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
        cardView: false,                    //是否显示详细视图
        detailView: false,                  //是否显示父子表
        contentType : "application/x-www-form-urlencoded",
        responseHandler: function(r) {
            return {
                total: r.page.total,
                rows: r.data
            };
        }
    };

    $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.custom);

    $.fn.bootstrapTable.custom_column = {
        sortable: false,                     //是否启用排序
        align: 'center',
        valign: 'middle',
        formatter: function (value, row, index) {
            var that = this;
            var type = that.type;
            if (type) {
                switch(type) {
                    case 'no':
                        // 序号
                        return index + 1;
                        break;
                    case 'isEnable':
                        // 状态
                        var type_0 = that.type_0 ? that.type_0 : '冻结';
                        var type_1 = that.type_1 ? that.type_1 : '正常';
                        if (value == '0') {
                            return '<span class="label label-danger">'+ type_0 +'</span>';
                        } else if (value == '1') {
                            return '<span class="label label-primary">'+ type_1 +'</span>';
                        }
                        break;
                    default:
                        break;
                }
            } else {
                return value;
            }
        }
    };
    $.extend($.fn.bootstrapTable.columnDefaults, $.fn.bootstrapTable.custom_column);
})(jQuery);

全部可自定义配置项(摘自源码、具体配置内容请到源码进行查询查找)

    $.fn.bootstrapTable.Constructor = BootstrapTable;
	$.fn.bootstrapTable.theme = Constants.THEME;
	$.fn.bootstrapTable.VERSION = Constants.VERSION;
	$.fn.bootstrapTable.defaults = BootstrapTable.DEFAULTS;
	$.fn.bootstrapTable.columnDefaults = BootstrapTable.COLUMN_DEFAULTS;
	$.fn.bootstrapTable.constants = BootstrapTable.CONSTANTS;
	$.fn.bootstrapTable.events = BootstrapTable.EVENTS;
	$.fn.bootstrapTable.locales = BootstrapTable.LOCALES;
	$.fn.bootstrapTable.methods = BootstrapTable.METHODS;
	$.fn.bootstrapTable.utils = Utils; // BOOTSTRAP TABLE INIT

更多学习请参考Github仓库 bootstrap-table-example-study
码云仓库 bootstrap-table-example-study

[L飘逸;@

发布了8 篇原创文章 · 获赞 2 · 访问量 180

私信关注

Bootstrap Table项目初始化与自定义全局配置

初始化

方案一、从零使用Bootstrap Table, 利用node.js下载依赖

方案二、使用npm install安装依赖

相关材料

自定义全局配置文件

创建Bootstrap模板文件

知识展示

猜你喜欢