bttable功能强大!同时支持申明方式和编程方式来使用!是wenzhixin主导开发一款开源的表格控件!

文档比较详尽,但要求初学者已经比较熟悉js,jquey等基本内容,否则可能许多代码无法阅读!

本文涉及的bootstrap-table版本为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逐个验证!

bootstrap-table的简要使用的更多相关文章

  1. BootStrap table使用

    bootstrap table git address https://github.com/wenzhixin/bootstrap-table 引入文件 <link rel="sty ...

  2. bootstrap Table 中给某一特定值设置table选中

    bootstrap Table 中给某一特定值设置table选中 需求: 如图所示:左边地图人员选定,右边表格相应选中. 功能代码: //表格和图标联动 function changeTableSel ...

  3. JS组件系列——表格组件神器:bootstrap table

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

  4. JS组件系列——表格组件神器:bootstrap table(二:父子表和行列调序)

    前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...

  5. JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)

    前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...

  6. JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案

    前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能 ...

  7. JS组件系列——Bootstrap Table 表格行拖拽

    前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果 项目涉及到订单模块,那天突然接到 ...

  8. JS组件系列——Bootstrap Table 表格行拖拽(二:多行拖拽)

    前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...

  9. 后台系统组件:一丶bootstrap table

    http://www.cnblogs.com/landeanfen/p/4976838.html (bootstrap table) http://www.cnblogs.com/landeanfen ...

  10. Bootstrap Table Examples

    The examples of bootstrap table http://bootstrap-table.wenzhixin.net.cn/examples/ http://www.jq22.co ...

随机推荐

  1. django2 restframework put和delete http404错误

    url要写好 比如 ,最后的/一定要加,否则401 'http://127.0.0.1:8000/persons/' + person.id + '/'

  2. iOS开发之SceneKit框架--SCNGeometry.h

    1.SCNGeometry简介 SCNGeometry负责呈现三维模型的类,它管理者物体的形状.纹理等.它可以由SCNGeometrySource和SCNGeometryElement来构造, 一个S ...

  3. HTTP协议基础篇(帮助理解)

    用uml 来描述一个功能是怎样按照时间的顺序完成的 实际的需求(配置网站/配置虚拟主机) 步骤 (1) 打开 apache/conf/httpd.conf 文件 (2)找到hosts文件 c:/win ...

  4. PAT甲级——A1131 Subway Map【30】

    In the big cities, the subway systems always look so complex to the visitors. To give you some sense ...

  5. PAT甲级——A1112 Stucked Keyboard【20】

    On a broken keyboard, some of the keys are always stucked. So when you type some sentences, the char ...

  6. java中 ++a 与 a++ 的区别

    public static void main(String[] args) { int a = 5; a ++; System.out.println(a); int b = 5; ++ b; Sy ...

  7. 12_springmvc拦截器

    一.定义 Spring Web MVC 的处理器拦截器类似于Servlet 开发中的过滤器Filter,用于对处理器进行预处理和后处理. 二.拦截器定义 实现HandlerInterceptor接口, ...

  8. 2016.8.19上午初中部NOIP普及组比赛总结

    2016.8.19上午初中部NOIP普及组比赛总结 链接:https://jzoj.net/junior/#contest/home/1338 这次总结发得有点晚啊!我在这里解释一下, 因为浏览器的问 ...

  9. day04 - linux常用命令、目录说明以及ubuntu解锁root用户,安装tree命令

    echo abcdefg >> aa.txt //向aa.txt文件末尾追加 abcdefg 字符串 1 基础命令: clear //清屏 whoami //查看当前所登录的用户 who ...

  10. BZOJ 3668: [Noi2014]起床困难综合症

    Time Limit: 10 Sec Memory Limit: 512 MB Submit: 2693 Solved: 1563 [Submit][Status][Discuss] Descript ...