bootstrapTable 学习使用

#1.在页面点击修改时,尽量使用id选择器加载页面.不要使用class选择器。

　//修改
   function edit(id) {
       $('#containerId').load('editUserDeploy?id='+id);
   }

//加载主表,从主表属性值ApplyDeploys取出从表集合数据。

@RequestMapping(value = "/editUserDeploy", method = { RequestMethod.GET })
   public String editUserDeploy(Model model, @RequestParam("id") String id) {
       UserDeployDto userDeployDto = userDeployService.findById(id);
       List<ApplyDeploy> applyDeploys = userDeployDto.getApplyDeploys();
       model.addAttribute("UserDeployDto",userDeployDto);
       model.addAttribute("appList", applyDeploys);
       model.addAttribute("total", userDeployDto.getApplyDeploys().size());
       return "bsdeploy/userdeploy-edit";
   }

//使用bootstrap Table的responseHandler调用。

　function responseHandler(res) {
           if (res) {
               return {
                   "rows" : res.list,
                   "total" : res.total
               };
           } else {
               return {
                   "rows" : [],
                   "total" : 0
               };
           }
       }　

#2.初始化时，销毁之前加载的数据 $('#applyTable').bootstrapTable('destroy');

function loadEditTable(){
   //销毁上次加载的内容
   $('#applyTable').bootstrapTable('destroy');
   $('#applyTable').bootstrapTable({
           url : 'editUserDeploy.json', //请求后台的URL（*）
            method: 'get',
           contentType : "application/x-www-form-urlencoded",
        // toolbar: '#toolbar',        //工具按钮用哪个容器
            editable:true,               //开启编辑模式
            striped : true, //是否显示行间隔色
           cache : false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
           pagination : true, //是否显示分页（*）
           sortable : false, //是否启用排序
           sortOrder : "asc", //排序方式
           sidePagination : "server", //分页方式：client客户端分页，server服务端分页（*）
           queryParams : queryParams, //分页
           pageSize : 5, //每页显示的记录数
           pageNumber : 1, //当前第几页
           pageList : [ 5, 10, 15, 20, 25 ], //记录数可选列表
           responseHandler : responseHandler,
           clickToSelect : true, //是否启用点击选中行
           height : 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度,影响列表对齐
           uniqueId : "id", //每一行的唯一标识，一般为主键列
           responseHandler : responseHandler,

　　　columns : [ {checkbox : true},

#3、bootstrap-table 表头和内容对不齐解决办法

直接注释

// height : 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度

查看了所有百度、博客相关文章，都没有解决。经过一周的研究，终于通过修改源码解决了。
打开bootstrap-table.js 找到 BootstrapTable.prototype.resetView方法，找到如下代码。
if (this.options.showHeader && this.options.height) {
            this.$tableHeader.show();
            //注释掉下面两行取消表头初始化解决表头和内容不对齐问题
            //this.resetHeader();
            //padding += this.$header.outerHeight();
}
相关链接：https://www.cnblogs.com/weichangyu/p/6269265.html

--------------------------------------------------------------------------------------------------

学习链接：http://blog.csdn.net/lzx_longyou/article/details/50563907

　　　 http://blog.csdn.net/youand_me/article/details/77008246

　　　　https://www.cnblogs.com/wuhuacong/p/7284420.html

--------------------------------------------------------------------------------------------------

基于jquery，bootstrap数据验证插件bootstrapValidator 教程

https://www.cnblogs.com/v-weiwang/p/4834672.html?ptvd