bootstrap table开发简单使用

引用

<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-table.css" />
<script src="js/comjs/bootstrap.min.js"></script>
<script src="js/comjs/bootstrap-table.js"></script>
<script src="js/comjs/bootstrap-table-zh-CN.js"></script>

html

 <div class="panel-body" style="padding-bottom:0px;">
        <div class="panel panel-default">
             <div class="panel-heading">查询条件</div>
             <div class="panel-body">
                 <form id="formSearch" class="form-horizontal">
                     <div class="form-group">
                         <label class="control-label col-sm-2 top">楼宇名称:</label>
                         <div class="col-sm-2 top">
                             <input type="text" class="form-control input-sm" id="buildName">
                         </div>
                         <div class="col-sm-4 top " style="text-align:right;float:right">
                             <button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary btn-sm">查询</button>
                         </div>
                     </div>
                 </form>
             </div>
         </div>       

         <div id="toolbar" class="btn-group">
             <button id="btn_add" type="button" class="btn btn-default">
                 <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
             </button>
             <button id="btn_edit" type="button" class="btn btn-default">
                 <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑
             </button>
             <button id="btn_delete" type="button" class="btn btn-default">
                 <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
             </button>
             <button id="btn_export" type="button" class="btn btn-default">
                 <span class="glyphicon glyphicon-log-out" aria-hidden="true"></span>导出
             </button>
         </div>
         <table id="tb_departments" class='table-bordered'></table>
     </div>

js–表格初始化，按钮事件

//表格初始化
    var TableInit = function () {
        var oTableInit = new Object();
        //初始化Table
        oTableInit.Init = function (params) {
            $('#tb_departments').bootstrapTable({
                 url:"queryBuildingInfoList.action",//要请求数据的文件路径
                toolbar: '#toolbar',                //工具按钮用哪个容器
                pagination: true,                   //是否显示分页（*）
                sortable: true,                     //是否启用排序
                sortOrder: "asc",                   //排序方式
                pageNumber:1,                       //初始化加载第一页，默认第一页
                pageSize: 10,                       //每页的记录行数（*）
                pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*） 
                queryParams:queryParams,//请求服务器时所传的参数
                sidePagination: 'server',//分页方式
                queryParams:queryParams,//请求服务器时所传的参数
                queryParamsType : "limit",
                strictSearch: false,
                showColumns: true,                  //是否显示所有的列
                showRefresh: true,                  //是否显示刷新按钮
                minimumCountColumns: 2,             //最少允许的列数
                clickToSelect: true,                //是否启用点击选中行
                uniqueId: "id",                     //每一行的唯一标识，一般为主键列
                showToggle:false,                    //是否显示详细视图和列表视图的切换按钮
                cardView: false,                    //是否显示详细视图
                detailView: false,                   //是否显示父子表
                columns: tableCol,
                responseHandler:responseHandler,//请求数据成功后，渲染表格前的方法,
                onLoadSuccess: function(data){    
                    $('.loadingbox').hide()
                },
                onLoadError:function(data){
                    layer.msg('加载失败，请刷新后重新尝试', {icon: 2});
                    setTimeout(function(){
                        $('.loadingbox').hide()
                    },1000)
                }
            });
        };
      function  queryParams(params){
             var text_city= $("#build_city").find("option:selected").text();
             var city=''
             city= text_city=='河南'?'':text_city;
          return {
                pageSize : params.limit, //每一页的数据行数，默认是上面设置的10(pageSize)
                pageIndex : params.offset/params.limit+1, //当前页面,默认是上面设置的1(pageNumber)
                name:$('#buildName').val(),
                city:text_city=='河南'?'':text_city,
                use_type:$('#use_type').val(),
                type:$('#type').val(),
                structure:$('#structure').val()
            }
      }
      //请求成功方法
         function responseHandler(res){
          if(res.code==0){
              $('#btn_export').attr('data-export',res.export)//是否有导出权限。ture为有
          }else{
              $('#btn_export').attr('data-export','')
          }
          console.log(res.page.totalPages)
            //如果没有错误则返回数据，渲染表格
            return {
                total : res.page.totalPages, //总页数,前面的key必须为"total"
                rows : res.data //行数据，前面的key要与之前设置的dataField的值一致.
            };
        }; 

        return oTableInit;
    };

    var ButtonInit = function () {
        var oInit = new Object();
        oInit.Init = function () {
            var $table = $('#tb_departments')
            //初始化页面上面的按钮事件
            $('#btn_add').click(function(){
              //跳转
            })
            $('#btn_edit').click(function(){
                var getsel=$table.bootstrapTable('getSelections')
            })
            $('#btn_delete').click(function(){
                var ids = $.map($table.bootstrapTable('getSelections'), function (row) {
                return row.id
                 })
                 if(ids.length==0){
                    layer.msg('请先选中想删除的行', {icon: 6});
                    return
                 }
            $('#tb_departments').bootstrapTable('remove', {
                            field: 'id',
                            values:idx
                     })

             })
             $('#btn_export').click(function(){
                 if($(this).attr('data-export')){
                     exoprtBuildingInfo()
                 }else{
                     layer.msg('您暂时没有导出权限，不能进行导出！', {icon: 6});
                 }
             })
        };

        return oInit;
    };

列数据

//表格头部
    var tableCol=[[{
            field:'checkbox',
            title : '选择',
            checkbox:true,
        },{
             field: 'id',
             title: "id",
             sortable:true,
             width:60,
             visible: false
        },{
            field: 'num1',
            title: "编号1",
            visible: false
        },{
            field: 'num2',
            title: "编号2",
            visible: false
        },{
            field : 'operate',
            title : '操作',
            events : handle,//事件
            formatter : operateFormatter//html
        },
    ]];
    //事件：
    //表格操作
    window.handle = {
            "click .delect" : function(e, value, row, index) {    //删除
                //delete

            },
            "click .edit" : function(e, value, row, index) {  //编辑
                //编辑
            },
        }  

    function operateFormatter(value, row, index) {//赋予的参数)btn-success btn-primary
        return [
                '<div class="btn btn-sm edit"><span class="glyphicon glyphicon-pencil text-primary"></span></div>',
                '<div class="btn btn-sm delect"><span class="glyphicon glyphicon-remove text-primary"></span></div>',
            ].join('');
    }

js 调用

 //1.初始化Table
        var oTable = new TableInit();
        oTable.Init();

        //2.初始化Button的点击事件
        var oButtonInit = new ButtonInit();
        oButtonInit.Init();

查询按钮

服务器端分页

sidePagination: ‘server’,//分页方式

//查询接口
        $('#btn_query').click(function(){
             $('#tb_departments').bootstrapTable('refresh', {
                    url : 'queryBuildingInfoList.action'
                });
        }) 

客户端分页

$(btn).click(function(){
  //ajax 获取数据
var list=res.data
$("#tb_departments").bootstrapTable('load', list);//主要是要这种写法
})