bootstrap-table的简要使用
bttable功能强大！同时支持申明方式和编程方式来使用！是wenzhixin主导开发一款开源的表格控件！
文档比较详尽，但要求初学者已经比较熟悉js，jquey等基本内容，否则可能许多代码无法阅读！
本文涉及的ｂｏｏｔｓｔｒａｐ－ｔａｂｌｅ版本为1.15.5，bootstrap版本4.3.1，jquery版本3.4.1
关于引入相关的css，js略！本文简要阐述两种使用方式。
一、申明式
申明式特点在于全部通过在 table标签开始区域设定各种选项，这些选项基本可以满足大部分的功能。
选项可以参考：https://bootstrap-table.com/docs/api/table-options/
<div class="query-content"> <table id="table" data-toggle="table" data-pagination=true data-side-pagination= "server" data-page-size=8 data-query-params="queryParam" data-url="${pageContext.request.contextPath}/etl/dsconfig/getPage" > <thead> <tr> <th data-field="dsname">数据源名称</th> <th data-field="dbtypename">类型</th> <th data-field="version">版本号</th> <th data-field="servername">服务器</th> <th data-field="dbport" data-width="60" data-width-unit="px" >端口</th> <th data-field="schemaname">模式(库)</th> <th data-field="dbuser">用户</th> <th data-field="dbpassword">密码</th> <th data-field="jdbcclassname">jdbc类名</th> <th data-filed="comments">备注</th> <th data-field="addtime">添加时间</th> <th data-field="lastoptime">最近修改时间</th> <th data-field="dsname" data-width="180" data-width-unit="px" data-formatter="formatOperation">操作</th> </tr> </thead> </table> </div>
列dsname所涉及到格式方法通过 data-formatter来定义，本文对应的格式化方法为 formatOperation,具体代码如下：
function formatOperation(value, row, index) { let statusTxt=""; if (value=="系统数据库"){ statusTxt=" disabled=true"; } var res= '<button name="btn_update" class="btn btn-primary btn-sm " '+statusTxt+' onclick="fnUpdateClick(\''+row.dsname+'\')">修改</button>'+ '<button name="btn_delete" class="btn btn-warning btn-sm " '+statusTxt+' onclick="fnDelClick(\''+row.dsname+'\')">删除</button>'+ '<button name="btn_test" class="btn btn-success btn-sm " onclick="fnTestClick(\''+row.dsname+'\')">测试</button>'; return res; }
查询参数如下：
function queryParam(params) { var param = { offset: params.offset, limit: params.limit, sort: params.sort, order: params.order, page:(params.offset / params.limit) + 1, rows:params.limit, "dbtypename":$("#id_dbtypename").val(), "dsname":$("#id_dsname").val() }; return param; }
注意：这个版本的bttable中，param参数是比较复杂，上文中定义的其实是完整参数的一部分（此类编程也只需要处理这一部分）。通过跟踪，可以了解params的全貌！
申明式：
申明式本质上是bootsrap-table的js自动解析相关申明，之后再执行编程式方法，从而实现最终目的。
优点：简单明了，开发速度快，代码好看；
缺点：在document的onload中会自动被触发（可能有办法阻止，但暂时不知道如何处理)，有的时候，可能不希望页面加载的时候就执行查询！
二、编程式
如果喜欢写代码，也可以直接使用编程方式，编程式的主要工作包括：表格定义（定义表头，各种选项）。
详细的可以参考官网的说明,或者直接查看开发版本中代码(src/constants/index.js 中关于DEFAULTS的详细说明)。
以下列出两段代码：初始化，自定义ajax查询
1.初始化
$('#table').bootstrapTable({
url: 'data/scores.json', // 表格数据来源
method: 'get',
pagination: true,
pageNumber: 1, //初始化加载第一页，默认第一页,并记录
pageSize: 5,
uniqueId: "id",
columns: [
{
field: 'id',
visible:false //不显示
},
{
field: 'name',
title: '姓名'
}, {
field: 'sex',
title: '性别'
}, {
field: 'birthday',
title: '出生日期'
},{
field: 'subjectname',
title: '科目名称'
},{
field: 'scoredate',
title: '考试日期'
},{
field: 'score',
title: '成绩',
formatter: function (value, row, index) {
console.log(value);
var res="";
if (value>50){
res= '<p style="color:green" >'+value+'</p>';
}
else{
res= '<p style="color:red" >'+value+'</p>';
}
return res;
}
}
,{
field: 'id',
title: '操作',
formatter: function (value, row, index) {
var res='<input type=button value="删除" onclick="fnDel('+row.id+')>'+
'<input type=button value="修改" onclick="fnUpdate('+row.id+')>';
console.log(res);
return res;
}
}
]
});
上文是相对简单的一个初始化。
2.自定义ajax请求（需要和申明“data-ajax”一起使用）
function ajaxRequestPage(params){ $.ajax({ url: "${pageContext.request.contextPath}/etl/dsconfig/getPage", type: "POST", dataType: "json", async:true, data:{ "page":(params.data.offset / params.data.limit) + 1, "rows":params.data.limit, "dbtypename":$("#id_dbtypename").val(), "dsname":$("#id_dsname").val(), }, success: function(rs,status, xhr){ if (rs.flag==1){ params.success( { //注意，必须返回参数 params "total": rs.data.total, "rows": rs.data.rows }, "ok", //这个好像暂时没有用到 xhr //在1.15.5 版本中，这个是关键，如果没有返回则总是会报错！ ); } else{ alert(rs.msg); } }, error: function(jqXHR, textStatus, errorThrown){ $.alert({ title: '警告', content: "查询数据源信息失败，网络错误:"+textStatus, autoClose:'ok|500' }); params.success( { //注意，必须返回参数 params "total": 0, "rows": 8 }, "ok", //这个好像暂时没有用到 jqXHR //在1.15.5 版本中，这个是关键，如果没有返回则总是会报错！ ); } }); }
编程式：
优点：一切尽在掌握中！
缺点：代码量稍微多了一点，看起来没有那么优雅！
三、学习方法要点
1.首先要有js基础，了解类，变量定义，事件等等基础知识
2.熟悉jquery和ajax，尤其是ajax对象的基本属性和方法。
3.仔细阅读官方文档，对table option和column option逐个验证！
