前端框架bootscriptTable（前端表格框架）1 引包
<#assign ContextPath()/>
引⼊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 ContextPath()/>
任何⼀个前端框架都是绑定在⼀个标签元素上的
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 ContextPath()/>
<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 value="新增">新增</button>
<button 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",jquery框架原理
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其他属性

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。