bootstrap-table

• 管理后台以表格形式展示数据，用到了bootstrap-table表格插件
• 项目需要引进以下几个js文件
  • <script src="jquery.min.js"></script>
  • <script src="bootstrap.min.js"></script>
  • <script src="bootstrap-table.min.js"></script>
  • <script src="bootstrap-table-zh-CN.min.js"></script>
• 代码如下：

  //项目中用到地方比较多，所有可以根据项目需求封装以下插件
  $("#table").bootstrapTable('destroy');    //先销毁表格
var getTableDate=function(tableId,url,columns,search,searchAlign,showExport,exportOptions,dataList){ //表格id名，地址，列，搜索是不是现实，搜索的位置，
    $(tableId).bootstrapTable({
        method:'get', //请求的方式
        url:url,//地址
        undefinedText:'-',//数据是空显示字符
        contentType:"application/x-www-form-urlencoded; charset=UTF-8",
        sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*）
        cache:true,
        pagination:true,//设置为true会在表格底部显示分页条
        pageNumber:1,                       //初始化加载第一页，默认第一页  
        pageSize: 10,                       //每页的记录行数（*）  
        pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*） 
        showColumns: false,                  //是否显示所有的列  
        showRefresh: false,                  //是否显示刷新按钮  
        minimumCountColumns: 2,             //最少允许的列数  
        singleSelect: true,//复选框只能选择一条记录
        //搜索
        search:search,
        searchAlign:searchAlign||'left',
        /*sotrName:sortName,*/ //定义排序列,通过url方式获取数据填写字段名，否则填写下标
        iconsPrefix:'glyphicon', //icon
        icons:{
            paginationSwitchDown:'glyphicon-collapse-down icon-chevron-down',
            paginationSwitchUp: 'glyphicon-collapse-up icon-chevron-up',
            refresh: 'glyphicon-refresh icon-refresh',
            toggle: 'glyphicon-list-alt icon-list-alt',
            columns: 'glyphicon-th icon-th',
            detailOpen: 'glyphicon-plus icon-plus',
            detailClose: 'glyphicon-minus icon-minus',
            export: 'glyphicon-export icon-share'
        },
        /*是否现实导出*/
        showExport: showExport,  //是否显示导出按钮  
        exportDataType:"all",//导出所有数据
        buttonsAlign:"right",  //按钮位置      
        exportTypes:['txt', 'doc', 'excel'],  //导出文件类型
        exportOptions:exportOptions,
        columns:columns,//列
        striped: true,                      //是否显示行间隔色 
        clickToSelect: true,                //是否启用点击选中行  
        checkboxHeader:false,                //隐藏顶部check-all 选项
        responseHandler: function(res) {
            return {    
                 "data": res.dataList   //数据
            };
              
         }
    })  
  //列 其中field这个要根据后台返回字段一一对应
var columns = [
        {
            checkbox: true,
        },
        {
            field: 'id',  
            title: 'userid'  ,
            class: 'userid hidden',
            align: 'center', // 左右居中
            valign: 'middle', // 上下居中
           /*  visible: true, */
        },  
        {
            field: 'username',  
            title: '用户名'  ,
            class: 'username',
            align: 'center', // 左右居中
            valign: 'middle', // 上下居中               
        },              
        {
            field: 'age',
            title: '年龄' ,
            class:'age',
            align: 'center', // 左右居中
            valign: 'middle', // 上下居中
        },
        {   
            field: 'telephone',
            title: '电话' ,
            class:'telephone',
            align: 'center', // 左右居中
            valign: 'middle', // 上下居中
        },
        {
            field: 'email',
            title: '邮箱',    
            class: 'email',
            align: 'center', // 左右居中
            valign: 'middle', // 上下居中*
        },
        {
            field: 'qqNum',  
            title: 'QQ',
            class: 'qqNum',
            align: 'center', // 左右居中
            valign: 'middle', // 上下居中
        },
        {
            field: 'gender',  
            title: '性别',
            class: 'gender',
            align: 'center', // 左右居中
            valign: 'middle', // 上下居中
        },
        {
            field: 'loginMode',  
            title: '来源',
            class: 'loginMode',
            align: 'center', // 左右居中
            valign: 'middle', // 上下居中
        },      
        {
            field: 'createTime',  
            title: '创建时间',
            class: 'createTime',
            align: 'center', // 左右居中
            valign: 'middle', // 上下居中
            formatter: function (value, row, index) {
                return ge_time_format(row.createTime);
            }
            
        },
        {
            field: 'operation',  
            title: '操作',
            align: 'center', // 左右居中
            valign: 'middle', // 上下居中
           /*  events: operateEvents, */
            formatter: function(value, row, index) {
                return [    
                    /* '<a class="update-this-user" aria-hidden="true" title="修改用户" href="javascript:void(0);"><i class="iconfont">&#xe63a;</i>修改</a>', */
                    '<a class="delete-this-user" aria-hidden="true" title="删除用户" href="javascript:void(0);"><i class="iconfont">&#xe614;</i>删除</a>'
                ].join('');
            }
        }               
    ] 
 //处理后台返回的数据（最后让后台返回的数据是data，如果返回的不是需要处理一下，如下代码）
      responseHandler: function(res) {
      return {  
         "data": res.userList   //数据
     };           
   }

}