bootstrapTable 学习使用

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

　<div id="containerId" class="container"></div>

　//修改
    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属性，表格自动根据记录条数觉得表格高度

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