前端框架bootscriptTable（前端表格框架）

1 引包

<#assign base=request.getContextPath()/>

引入jQuery的框架，因为bootscriptTable依赖了jQuery

<script src="${base}/lib/jquery/jquery-3.1.1.min.js"></script>

引入bootstrap的css样式文件

<link href="${base}/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">

引入bootstrap的js文件

<script src="${base}/lib/bootstrap/js/bootstrap.min.js"></script>

引入bootstrap-table的css样式文件

<link href="${base}/lib/bootstrap-table/css/bootstrap-table.min.css" rel="stylesheet">

引入bootstrap-table的js文件

<script src="${base}/lib/bootstrap-table/js/bootstrap-table.min.js"></script>

上面引入包不加${base}也可以，但是如果加了就一定要写第一行的

<#assign base=request.getContextPath()/>

任何一个前端框架都是绑定在一个标签元素上的
bootstrap-table就是绑定在table标签上

初始化表格
1 定义一个标签
1 通过javascript来初始化
2 使用jquery选择器定位标签调用bootstrapTable方法来初始化表格
$(’#标签id’).bootstrapTable({})

例

<table id="dataTable"></table>
<script type="text/javascript">
//在初始化方法中做表格初始化
$(function(){
    $("#dataTable").bootstrapTable({

    })
})
</script>

浏览器请求controller后页面展示下图，证明初始化成功

列明用column指定，列明是一个数组，数组里是很多对json字符串
CheckBox：代表页面表格中左侧支持勾选的复选框（可以全选、单选、多选）
title：是列明
field：是写具体数据的key
例

            columns:[
            {
                checkbox:true
            },
            {
                title:"接口ID",
                field:"interfaceID"
            },
            {
                title:"测试用例ID",
                field:"testCaseId"
            },
            {
                title:"测试用例名称",
                field:"testCaseName"
            }
        ]

浏览器请求controller的地址展示如下图，证明列表名称已建立

在columns之前要写上请求，这样请求的返回才能写到上面的表格中

<#assign base=request.getContextPath()/>
<script src="${base}/lib/jquery/jquery-3.1.1.min.js"></script>
<link href="${base}/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="${base}/lib/bootstrap/js/bootstrap.min.js"></script>
<link href="${base}/lib/bootstrap-table/css/bootstrap-table.min.css" rel="stylesheet">
<script src="${base}/lib/bootstrap-table/js/bootstrap-table.min.js"></script>

<div id="toolbar">
<button style="height: 30px;width: 50px" value="新增">新增</button>
<button style="height: 30px;width: 50px" value="删除">删除</button>   
</div>

<table id="dataTable"></table>
<script type="text/javascript">
$(function(){
    var urlName="/MyBatisController/selectForPage";
    $("#dataTable").bootstrapTable({
        url:urlName,                              请求controller的地址，在urlName已经定义
        method:"get",                            controller的请求方法
        pageNumber:1,                         初始化加载第一页，默认第一页
        pageSize:5,                              每页记录的行数，就是每页显示多少行
        pageList:[5,10,15],                   每页可调节展示的行数
        pagination:true,                        是否显示分页
        sidePagination:"server",           分页方式：client与server两种分页方式，一般用后端分页，原因在分页的文章里已经讲了
        cache:false,                             是否用缓存，默认为true
        queryParams:param,               入参，这里调用的是一个方法（就是写的是方法名称），就是下面的名为param的方法
        paginationPreText:"上一页",        上一页
        paginationNextText:"下一页",       下一页
        toolbar:"#toolbar",                  toolbar就是放页面上增删改查按钮的，"#toolbar"是上面div标签的id，该div标签里都是按钮
        height:500,                             调整页面高度，为了让底部的分页、上一页、下一页能展示在页面
        columns:[
            {
                checkbox:true
            },
            {
                title:"接口ID",
                field:"interfaceId"           上面请求成功后，获取的值：就是要与下图中绿框里的名称一一对应
            },
            {
                title:"测试用例ID",
                field:"testCaseId"
            },
            {
                title:"测试用例名称",
                field:"testCaseName"
            }
        ]
    })
})


function param(params) {                              要用内置参数，所以方法要带参
    var object={                                               入参方法，要用一个对象    var aaa={};
        pageSize:params.limit,                           获取每页显示多少条
        //params.offset 第一页展示0，若每页10条数据第二页展示10，第三页展示20，不会展示在页面，用F12能看到
        //params.limit展示页数，是固定写法
        pageNumber:(params.offset / params.limit)+1
    };
    return object;
}
</script>

请求完成后列表的展示

bootscriptTable其他属性