常用表格插件：Bootstrap-table 用法梳理

这是我第2篇简书。

1.引用

css:
   <link href="/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
js:
  <script src="/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
  <script src="/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
  <script src="/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>     //中文
 <script src="/js/plugins/bootstrap-table/bootstrap-table-export.min.js"></script>    //导出excel，需要时再引用

2.主要代码块

html
<!--表格搜索选项，姓名、编号、电话号码等在此输入查询表格，进入页面通常设置默认查询全部-->
  <input type="text" id="phone" placeholder="电话号码" class="m-wrap medium" />
<!--点击搜索就再运行一次这个封装的函数buildTable-->
  <button type="button" id="queryBtn" class="btn blue">搜 索</button>
<!--新增的按钮一般放在表格的左上-->
  <button type="button" id="addBtn" class="btn blue" onclick="addEmployee()">新 增</button>
<!--数据渲染到这个标签中-->
  <!--data-toggle默认‘table’：不用写 JavaScript 直接启用表格。data-pagination设置为 true 会在表格底部显示分页条-->
  <table id="manage_table" data-toggle="table" data-pagination="true"></table>
-------------------------------------------------------------------------------------------------------------
js
function buildTable(){
          //配置列选项
            var columns = [
                {
                    field: 'id',    //此处要与接口字段保持一致
                    align: 'center',   //居中
                    title: '编号'    //表格th名
                },
                {
                    field: 'realName',
                    align: 'center',
                    title: '姓名'
                },
                {
                    field: 'phoneNumber',
                    align: 'center',
                    title: '电话'
                },
                {
                    field: 'typeStr',
                    align: 'center',
                    title: '类型'
                },
                {
                    field: 'opt',
                    align: 'center',
                    title: '操作',   
                    formatter: function (value, row, index) {   //一般用来操作表格的行，编辑、详情、修改、删除等
                        return [
                            '<a class="detail ml10 blueLink" style="cursor: pointer;text-decoration: none;" 
                            onclick=agentDetail(\''+ row['userId'] +'\') title="编辑">编辑</a>|',
                            '<a class="detail ml10 blueLink" style="cursor: pointer;text-decoration: none;" 
                            onclick=deleteAgent(\''+ row['userId'] +'\') title="删除">删除</a>'
                        ].join('');
                    }
                }];
                    
            $('#manage_table').bootstrapTable('destroy').bootstrapTable({    //每次建立表格前将上一次的表格销毁，要用到 destroy
                method:"get",    //数据请求方法
                url:"/web/list",   //接口地址
                contentType: "application/x-www-form-urlencoded",
                columns: columns,  //列配置项
                sidePagination: 'server',  //分页方式：client客户端分页，server服务端分页（*）
                pagination: true,       //是否显示分页
                pageSize: 10,          //每页展示多少行
                pageList: [10, 25, 50, 100],   //前端选择展示多少行
                pageNumber: 1,      //初始化加载第一页，默认第一页 
                queryParamsType: '',
                queryParams: paginationParam,   //查询条件
                responseHandler: dataHandler,   // 后台返回的数据处理
                locale: 'zh-CN',      //
            });

            function paginationParam(params) {
                return {
                    phoneNumber:$("#phone").val(),    //传入电话号码查询表格，有几个查询项就要添加几个字段
                    pageSize:params.pageSize,          //这两个默认页码显示多少页
                    pageNum:params.pageNumber
                };
            };

            function dataHandler(data) {
                if(data!=null && data!="" && data.code == 0) {
                    //data即为后台返回的数据
                    //这里可以给页面传入一些值显示......
                    return {
                        "total": data.response.total,    
                        "rows": data.response.list   // 后台返回的数据
                    }
                }else{
                    layer.msg("查询失败,原因："+data.msg,{icon: 5,shade: 0.6});   //配合layer弹出框来展示提示信息
                    return {
                        "total": 0,
                        "rows": []
                    }
                }
            }
        };

详细api查询：
http://blog.csdn.net/rickiyeat/article/details/56483577

3.总结：
bootstrap-table主要用于后台管理系统中数据的增删改查，工作中会经常用到，不仅很好的兼容pc端各个屏幕尺寸的展示，同时引用了bootstrap-table-mobile.min.js后还兼容移动端，整体页面显示效果很不错。自带的搜索以及工具栏我没有用，一般自定义查询设置项会更清晰美观一点。js文件中包含的bootstrap-table-export.min.js可以将页面表格下载为excel文件保存。