Bootstrap Table用法

• 简介

  • Bootstrap Table是一款基于Bootstrap的jQuery表格插件。
  • 通过设置，可以拥有强大的表格功能，包括单选、多选、排序、分页、编辑、导出、过滤等。
  • 允许对其进行二次封装。

• 使用方法

  • 引入Bootstrap依赖（HTML页面）

  	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css">
  	<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
  	<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js"></script>
  	<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  

  • 引入Bootstrap Table依赖（HTML页面）

  	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.0/bootstrap-table.min.css">
  	<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.0/bootstrap-table.min.js"></script>
  	<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.0/locale/bootstrap-table-zh-CN.min.js"></script>
  

  • 编写HTML页面

  	<form class="form">
          <div class="row">
              <div class="col">
                  <div class="input-group">
                      <span class="input-group-addon">角色：</span>
                      <div class="form-group">
                          <input type="text" name="roleName" class="form-control"/>
                      </div>
                  </div>
              </div>
              <div class="col"></div>
              <div class="col">
                  <button type="button" class="btn btn-success" onclick="refresh()">重置</button>
                  <button type="button" class="btn btn-primary" onclick="search()">搜索</button>
              </div>
          </div>
      </form>
      <table id="roleTable" data-mobile-responsive="true" class="mb-bootstrap-table text-nowrap"></table>
  

  • Bootstrap Table插件的使用示例

  	<script>
  	    $('#roleTable').bootstrapTable({
  	        method: 'get', // 服务器数据的请求方式 get or post
  	        url: "/makelocks/bootstrapTable/list", // 服务器数据的加载地址
  	        striped: true, //是否显示行间隔色
  	        cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
  	        pagination: true, //是否显示分页（*）
  	        sortable: false, //是否启用排序
  	        sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
  	        pageNumber: 1, //初始化加载第一页，默认第一页
  	        pageSize: 10, //每页的记录行数（*）
  	        pageList: [10, 20, 30, 50], //可供选择的每页的行数（*）
  	        strictSearch: true,
  	        minimumCountColumns: 2, //最少允许的列数
  	        clickToSelect: true, //是否启用点击选中行
  	        uniqueId: "id", //每一行的唯一标识，一般为主键列
  	        cardView: false,
  	        detailView: false, //是否显示详细视图
  	        smartDisplay: false,
  	        queryParams: function(params) {
  	            return {
  	                pageSize: params.limit,
  	                pageNum: params.offset / params.limit + 1,
  	                roleName: $(".form").find("input[name='roleName']").val().trim(),
  	            };
  	        },
  	        columns: [{
  	            checkbox: true
  	        },{
  	            field: 'id',
  	            title: '角色ID'
  	        },{
  	            field: 'roleName',
  	            title: '角色'
  	        }, {
  	            field: 'roleDescription',
  	            title: '描述'
  	        }]
  	    });
  	    // 搜索方法
  	    function search() {
  	        $('#roleTable').bootstrapTable('refresh');
  	    }
  	    // 重置方法
  	    function refresh() {
  	        $(".form")[0].reset();
  	        search();
  	    }
  	</script>
  

  • 对Bootstrap Table进行二次封装

    • 封装

    	var $makelocks = (function () {
       		var bootstrapTable_default = {
    	        method: 'get',
    	        striped: true,
    	        cache: false,
    	        pagination: true,
    	        sortable: false,
    	        sidePagination: "server",
    	        pageNumber: 1,
    	        pageSize: 10,
    	        pageList: [10, 20, 30, 50, 100],
    	        strictSearch: true,
    	        showColumns: false,
    	        minimumCountColumns: 2,
    	        clickToSelect: true,
    	        uniqueId: "id",
    	        cardView: false,
    	        detailView: false,
    	        smartDisplay: false,
    	        queryParams: function (params) {
    	            return {
    	                pageSize: params.limit,
    	                pageNum: params.offset / params.limit + 1
    	            };
    	        }
        	};
    	    function _initTable(id, settings) {
    	        var params = $.extend({}, bootstrapTable_default, settings);
    	        if (typeof  params.url == 'undefined') {
    	            throw '初始化表格失败，请配置url参数！';
    	        }
    	        if (typeof params.columns == 'undefined') {
    	            throw '初始化表格失败，请配置columns参数！';
    	        }
    	        $('#' + id).bootstrapTable(params);
    	    }
    	    return {
    	        initTable: function (id, settings) {
    	            _initTable(id, settings);
    	        },
    	        refreshTable: function (id) {
    	            $('#' + id).bootstrapTable('refresh');
    	        }
    	    }
    	})($);
    

    • 使用

    	$(function () {
           var settings = {
                url: "/makelocks/bootstrapTable/list",
                queryParams: function (params) {
                    return {
                        pageSize: params.limit,
                        pageNum: params.offset / params.limit + 1,
                        roleName: $(".form").find("input[name='roleName']").val().trim()
                    };
                },
                columns: [{
                        checkbox: true
                    }, {
                        field: "id",
                        title: "角色ID"
                    }, {
                        field: "roleName",
                        title: "角色"
                    }, {
                        field: "roleDescription",
                        title: "描述"
                    }
                ]
            };
            $makelocks.initTable('roleTable', settings);
        });
    	
    	
    	// 搜索
        function search() {
            $makelocks.refreshTable('roleTable');
        }
    
    	// 重置
        function refresh() {
            $(".form")[0].reset();
            search();
        }