Bootstrap table的使用方法

最近接触一个NB插件，Bootstrap table?没做过前端的表示对table的印象还只停留在html的table标签那一套，用过bootstrap table之后不得不说真是牛X。

构造方式

1 、HTML

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29

2 、 js构造：

).bootstrapTable({
      url: "${ctxAdmin}/user/userData?orgId=${orgId}",search: true,//是否显示搜索框功能
      pagination: //是否分页
      showRefresh: //是否显示刷新功能 
      showToggle: 'outline',0); box-sizing: border-box;">// toolbar: '#exampleTableEventsToolbar',可以在table上方显示的一条工具栏，
      icons: {
        refresh: 'glyphicon-repeat',toggle: 'glyphicon-list-alt',columns: 'glyphicon-list'
      }
    }); 
 结合官网上展示的Table options，Column options，Events，Methods可以完成很多功能。上面的data-formatter ，data-events就是Column options中的选项 。
 

 data-formatter 和 data-events
 
 要实现如下效果，用上面两个option配合使用即可，一个定义格式，一个定义点击的操作。?
 
 直接上js代码
 
" >修改</a> ' + '<a class="delete">删除</a>';
    }
    //表格 - 操作 - 事件
    window.actionEvents = {
        'click .mod': (e,value,index) { 
              //修改操作
            },'click .delete' : //删除操作 
            }
        } 

 服务器分页/客户端分页的转换，table刷新
 
 bootstrap默认是客户端分页 ，可通过html标签
 
 或者js中的
 
 
 指定。注意，这两种后台传过来的json数据格式也不一样?
 client : 正常的json array格式 [{},{},{}]?
 server： {“total”:0,”rows”:[]} 其中total表示查询的所有数据条数，后面的rows是指当前页面展示的数据量。
 
 有事需要根据情况改变分页方式，就要用到Methods中的?
 ‘refreshOptions’ //设置更新时候的options?
 ‘refresh’ //设置更新时的 url,query(往后台传参数)
 
$("#tablelist").bootstrapTable('refreshOptions',{
        sidePagination: 'client'  //改为客户端分页
                });
 $('refresh',{
         url: "${ctxAdmin}/user/getsearchuserinfo",0); box-sizing: border-box;">//重设数据来源
         query: {username: $('#sea-username').val(),realname: $("#sea-realname").val(),mobile: $("#sea-mobile").val()}//传到后台的参数
                   });