应公司需求,改版公司ERP的数据显示样式。由于前期开发的样式是bootstrap,所以选bootstrap-table理所当然(也是因为看了bootstrap-table官网的example功能强大,样式清爽)。

然后... ... 开启bootstrap-table填坑之旅。

开始就扒本园的资源,确实有不少bootstrap-table的文章。确实写的不错很详细,请恕本菜实在菜了点,看了半天demo的页面都没弄出来(勿吐槽~~)。终于11点了.. .. 于是决定跟着官网的小白教程一点点的玩。

ready... ..

1. 怎么把table挂出来

HTML代码:(只用看一个tr就够了,写三行只为看demo效果)

    <table data-toggle="table" id="goods">
<thead>
<tr>
<th data-field="Code">序号</th>
<th data-field="TuanGouName">商品名称</th>
<th data-field="StartDate">开始时间</th>
<th data-field="EndTime">结束时间</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>九洲奇味饼干</td>
<td>2016/10/9 10:15:00</td>
<td>2016/12/25 11:30:00<td>
</tr>
<tr>
<td>2</td>
<td>好多鱼</td>
<td>2016/10/9 10:15:00</td>
<td>2016/12/25 11:30:00<td>
</tr>
<tr>
<td>3</td>
<td>旺旺雪饼</td>
<td>2016/10/9 10:15:00</td>
<td>2016/12/25 11:30:00<td>
</tr>
</tbody>
</table>

终于把table挂出来了,这里其实就和原来的table一样写就行了。

2. 加载json数据

HTML代码:

    <table id="goods">
<thead>
<tr>
<th data-field="Code">序号</th>
<th data-field="TuanGouName">商品名称</th>
<th data-field="StartDate">开始时间</th>
<th data-field="EndTime">结束时间</th>
</tr>
</thead>
</table>

js代码:

        /*数据json*/
var json = [{"Code":"1","TuanGouName":"好多鱼","StartDate":"2016/10/9 10:15:00","EndTime":"2016/12/25 11:30:00"},
{"Code":"2","TuanGouName":"旺旺雪饼","StartDate":"2016/10/9 10:15:00","EndTime":"2016/12/25 11:30:00"},
{"Code":"3","TuanGouName":"旺旺仙贝","StartDate":"2016/10/9 10:15:00","EndTime":"2016/12/25 11:30:00"},
{"Code":"4","TuanGouName":"雪花清爽","StartDate":"2016/10/9 10:15:00","EndTime":"2016/12/25 11:30:00"},
{"Code":"5","TuanGouName":"勇闯天涯","StartDate":"2016/10/9 10:15:00","EndTime":"2016/12/25 11:30:00"},
{"Code":"6","TuanGouName":"九洲奇味饼干","StartDate":"2016/10/9 10:15:00","EndTime":"2016/12/25 11:30:00"}];
/*初始化table数据*/
$(function(){
$("#goods").bootstrapTable({
data:json
});
});

成功获取json数据并加载成功。

这里注意:用json加载数据 table 标签不能写 data-toggle="table" 属性,至于原因......总之这里不能写,写了就会出这样的bug。

3. 装饰table

HTML代码

<table data-toggle="table"
data-row-style="rowStyle">
<thead>
<tr>
<th class="col-xs-4" data-field="name">Name</th>
<th class="col-xs-1" data-field="stargazers_count">Stars</th>
<th class="col-xs-1" data-field="forks_count">Forks</th>
<th class="col-xs-6" data-field="description">Description</th>
</tr>
</thead>
<!--此处忽略数据-->
</table>

js代码

function rowStyle(value, index) {
var classes = ['active', 'success', 'info', 'warning', 'danger'];
if (index % 2 === 0) {
return { classes: 'success' };
}
return {};
}

data-striped属性true表格为隔行变色(斑马纹),false不使用隔行变色。

data-row-style属性接收js函数(必须有返回值),可设置row属性。

th每列可添加栅格样式。

在th可设置data-cell-style属性,同样接收js函数(必须有返回值),设置该列单元格样式。

HTML代码

<table data-toggle="table" >
<thead>
<tr>
<th data-field="name" data-halign="right" data-align="center">Name</th>
<th data-field="stargazers_count" data-halign="center" data-align="left">Stars</th>
<th data-field="forks_count" data-halign="left" data-align="right">Forks</th>
</tr>
</thead>
</table>

data-halign设置该列标题对齐,data-align设置该列单元格对齐。

分组列显示——colspan & rowspan

<table id="table"></table>

js

        /*列信息*/
var firstCol = [
[{"field":"goodsName","title":"商品名称","colspan":1,"rowspan":2},
{"title":"商品信息","colspan":2,"rowspan":1}],
[{"field":"goodsInfo.price","title":"价格","colspan":1,"rowspan":1},
{"field":"goodsInfo.date","title":"日期","colspan":1,"rowspan":1}]
];
/*数据*/
var data = [{"goodsName":"旺旺仙贝","goodsInfo":{"price":"$26","date":"2018-08-10"}},
{"goodsName":"乐事薯片","goodsInfo":{"price":"$18","date":"2020-10-25"}},
{"goodsName":"勇闯天涯","goodsInfo":{"price":"$20","date":"2017-01-10"}}];
/*初始化表格*/
$(function(){
$("#goods").bootstrapTable({
columns: firstCol,
data: data
});
});

分组列组名不需要申明field值,但分组列子列的field值需要带上列组名(格式:Group.GroupChild)。如果分组列,数据的json也需要做相应的调整。

4. table排序

HTML代码

    <table id="goods" data-sort-order="desc">
<thead>
<tr>
<th data-sortable="true" data-field="Code">序号</th>
<th data-sortable="true" data-field="TuanGouName">商品名称</th>
<th data-field="StartDate">开始时间</th>
<th data-field="EndTime">结束时间</th>
</tr>
</thead>
</table>

data-sortable属性默认为false,设置为true,按默认排序方式对该列内容排序。

data-sort-order排序方向,asc升序排列、desc降序排列。

data-sort-name="stargazers_count"这俩属性找了半天没找到准确的解释,从字面意思理解应该是默认的排序函数名和排序方式,总之带上总没错。

5. 单元格 格式化

HTML代码

    <table id="goods" data-sort-name="stargazers_count"
data-sort-order="asc">
<thead>
<tr>
<th data-sortable="true" data-formatter="getIndex">下标</th>
<th data-sortable="true" data-field="Code" data-formatter="setCode">序号</th>
<th data-sortable="true" data-field="TuanGouName" data-formatter="setName">商品名称</th>
<th data-sortable="true" data-field="name">名称</th>
<th data-field="EndTime">结束时间</th>
</tr>
</thead>
</table>

js代码

        function getIndex(val,row,index){
return index + 1;
}
function setCode(val){
return "<a href='#'>" + val + "</a>";
}
function setName(val){
return "<span style='color:red;font-weight:900;'>" + val + "</span>";
}

data-formatter属性可以格式化该列单元格,data-formatter接收js函数(必须有返回值)该函数可以获取当前行的下标(注意:获取下标参数必须有row,否则index值为undefined),函数还可以改变单元格元素显示方式,例如:a button .. ...

6. 显示隐藏列

HTML代码

    <table id="goods" data-sort-name="stargazers_count" data-show-columns="true"
data-sort-order="asc">
<thead>
<tr>
<th data-sortable="true" data-field="Code" >序号</th>
<th data-sortable="true" data-field="TuanGouName" data-switchable="false">商品名称</th>
<th data-sortable="true" data-field="name">名称</th>
<th data-sortable="true" data-field="EndTime" data-visible="false">结束时间</th>
</tr>
</thead>
</table>

data-show-columns属性为“true”可设置隐藏显示某列,对应列data-switchable属性设置为“false”该列不可隐藏,默认值为true;data-visible属性设置为“false”该列默认被隐藏,默认值为true。

7. 选择列 checkbox

HTML代码

    <table id="goods" data-sort-name="stargazers_count" data-show-columns="true"
data-sort-order="asc">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-sortable="true" data-field="Code" >序号</th>
<th data-sortable="true" data-field="TuanGouName" data-switchable="false">商品名称</th>
<th data-sortable="true" data-field="name">名称</th>
<th data-sortable="true" data-field="EndTime" data-visible="false">结束时间</th>
</tr>
</thead>
</table>

<th data-field="state" data-checkbox="true"></th>这一列是checkbox选择列。据测试,data-click-to-select属性的值与选择列关系不大,有木有或者值true false都不影响checkbox列的显示和使用。

设置data-single-select="true",checkbox就只能选择一行。

    <table id="goods" data-sort-name="stargazers_count" data-show-columns="true"
data-sort-order="asc" data-click-to-select="true" data-single-select="true">
<thead>
<tr>
<th data-field="state" data-checkbox="true">选择</th>
<th data-sortable="true" data-field="Code" >序号</th>
<th data-sortable="true" data-field="TuanGouName" data-switchable="false">商品名称</th>
<th data-sortable="true" data-field="name">名称</th>
<th data-sortable="true" data-field="EndTime" data-visible="false">结束时间</th>
</tr>
</thead>
</table>

通过js指定行被选中,指定行不可操作。

function stateFormatter(value, row, index) {
if (index === 2) {
return {
disabled: true
};
}
if (index === 0) {
return {
disabled: true,
checked: true
}
}
return value;
}

给checkbox设置data-formatter属性,通过disabledchecked控制checkbox是否可用和是否被选中。

获取选中行信息

html

    <div class="toolbar">
<button id="get" class="btn btn-default">获取商品名称</button>
</div>
<table id="table" data-show-columns="true" data-height="700" data-toolbar=".toolbar"></table>

js

        /*获取选中行对象*/
function getContent(){
var index = $("#table").find("tr.danger").data("index");
return $("#table").bootstrapTable('getData')[index];
}
/*初始化table数据*/
$(function(){
$("#table").bootstrapTable('destroy').bootstrapTable({
columns:columns,
data:json
});
$("#table").on("click-row.bs.table",function(e,row,ele){
$(".danger").removeClass("danger");
$(ele).addClass("danger");
});
$("#get").click(function(){
alert("商品名称:" + getContent().TuanGouName);
})
});

给table绑定click-row.bs.table函数(行点击事件),callback(回调)函数列表:e(Event:事件对象),row(Rows:table行),ele(Element:选中行对象)。给选中行添加颜色样式,移除上一个被选行样式。

getContent()函数分析:

var index 获取被选中行下表,find搜索被选中行(即带样式的行),data被选中行在数据集中的下标。

return 返回table中被选中行对象。

点击查询按钮click事件:

既然getContent()已获取被选中行对象,需要获取哪个单元格,就调哪个单元格的field值。

8. card-view 卡片视图

HTML代码

<table data-toggle="table"
data-card-view="true">
<thead>
<tr>
<th data-field="name">Name</th>
<th data-field="stargazers_count">Stars</th>
<th data-field="forks_count">Forks</th>
<th data-field="description">Description</th>
</tr>
</thead>
</table>

data-card-view改变table视图方式,true:卡片视图,false:表格视图。

9. toolbar工具栏(常用 搜索 刷新 切换试图 筛选列)

HTML代码

    <table id="goods"
data-search="true"
data-show-refresh="true"
data-show-toggle="true"
data-show-columns="true">
<thead>
<tr>
<th data-sortable="true" data-field="Code" >序号</th>
<th data-sortable="true" data-field="TuanGouName" data-switchable="false">商品名称</th>
<th data-sortable="true" data-field="name">名称</th>
<th data-sortable="true" data-field="EndTime" data-visible="false">结束时间</th>
</tr>
</thead>
</table>

data-search:搜索(自动搜索,输入后自动搜索)

data-show-refresh:刷新

data-show-toggle:切换试图(卡片试图 and 表格试图)

data-show-columns:筛选列

自定义添加工具栏按钮

<div id="toolbar" class="btn-group">
<button type="button" class="btn btn-default">
<i class="glyphicon glyphicon-plus"></i>
</button>
<button type="button" class="btn btn-default">
<i class="glyphicon glyphicon-heart"></i>
</button>
<button type="button" class="btn btn-default">
<i class="glyphicon glyphicon-trash"></i>
</button>
</div>
<table data-toggle="table"
data-toolbar="#toolbar">
<thead>
<tr>
<th data-field="name">Name</th>
<th data-field="stargazers_count">Stars</th>
<th data-field="forks_count">Forks</th>
<th data-field="description">Description</th>
</tr>
</thead>
</table>

data-toolbar添加自定义工具栏(value建议为ID值)。

10.分页pagination

HTML代码

    <table id="goods" data-query-params="queryParams" data-pagination="true"></table>

js代码

        function queryParams() {
return {
type: 'owner',
sort: 'updated',
direction: 'desc', //排序方向
per_page: 10, //一次加载数据条数
page:1 //加载数据第几次
};
}

data-page-list定义每页显示条数,接受数组。例:data-page-list="[2,4,6,10,20]"

data-pagination值为true,表格使用分页,data-query-params分页配置参数,接受js函数(必须有返回值)。

direction排序方向:asc升序,desc降序

per_page一次性加载数据条数:int整数

page请求数据次数

例:如共有190条数据,page值为1,per_page值为100。table加载第1~100条数据,

page值为2,per_page值为100。table加载第201~300条数据。

注意:data-query-params仅对请求数据地址有对应参数的返回值才生效,对json拉取到本页解析的数据和本页直接生成的数据皆无效。详细DEMO地址不懂的自己多调试几遍,这里我调了半个小时

关于服务器端分页请参考这个demo

更多详细还是看官方文档:地址

bootstrap-table填坑之旅<一>认识bootstrap-table的更多相关文章

  1. React Native填坑之旅--与Native通信之iOS篇

    终于开始新一篇的填坑之旅了.RN厉害的一个地方就是RN可以和Native组件通信.这个Native组件包括native的库和自定义视图,我们今天主要设计的内容是native库方面的只是.自定义视图的使 ...

  2. React Native填坑之旅--Flow篇(番外)

    flow不是React Native必会的技能,但是作为正式的产品开发优势很有必要掌握的技能之一.所以,算是RN填坑之旅系列的番外篇. Flow是一个静态的检查类型检查工具,设计之初的目的就是为了可以 ...

  3. React Native填坑之旅--布局篇

    代码在这里: https://github.com/future-challenger/petshop/tree/master/client/petshop/src/controller 回头看看RN ...

  4. 使用vue开发微信公众号下SPA站点的填坑之旅

    原文发表于本人博客,点击进入使用vue开发微信公众号下SPA站点的填坑之旅 本文为我创业过程中,开发项目的填坑之旅.作为一个技术宅男,我的项目是做一个微信公众号,前后端全部自己搞定,不浪费国家一分钱^ ...

  5. https填坑之旅

    Boss说,我们买了个权威证书,不如做全站式的https吧,让用户打开主页就能看到受信任的绿标.于是我们就开始了填坑之旅. [只上主域好不好?] 不好...console会报出一大堆warning因为 ...

  6. stm32填坑之旅 - stm32f103c8t6点亮板载贴片蓝色LED

    转载请注明:https://www.cnblogs.com/rockyf/p/11691622.html 开篇 开篇一定要精彩,不然路人不理睬!下述是笔者作为arm小白的填坑之旅 没错,这个之前一直从 ...

  7. React Native填坑之旅--Stateless组件

    Stateless component也叫无状态组件.有三种方法可以创建无状态组件. 坑 一般一个组件是怎么定义的: 很久以前的方法: const Heading = createClass({ re ...

  8. React Native填坑之旅--重新认识RN

    如同黑夜里的一道光一样,就这么知道了F8. F8是每年一次Facebook每年一次的开发者大会.每次大会都会release相应的APP,iOS.Android都有.之前都是用Native开发的,但是2 ...

  9. React Native填坑之旅--Navigation篇

    React Native的导航有两种,一种是iOS和Android通用的叫做Navigator,一种是支持iOS的叫做NavigatorIOS.我们这里只讨论通用的Navigator.会了Naviga ...

随机推荐

  1. Android系统拍照源码

    个人对于Android系统拍照的一些总结:一种自定义图片拍照路径 ,另一种直接利用Android拍照后经过处理的缩略图 特别注意第一种方式需要增加SDK读写权限: <uses-permissio ...

  2. 论文阅读(Weilin Huang——【AAAI2016】Reading Scene Text in Deep Convolutional Sequences)

    Weilin Huang--[AAAI2016]Reading Scene Text in Deep Convolutional Sequences 目录 作者和相关链接 方法概括 创新点和贡献 方法 ...

  3. Node.js Express 框架 POST方法

    POST 方法 以下实例演示了在表单中通过 POST 方法提交两个参数,我们可以使用 server.js 文件内的 process_post 路由器来处理输入: index.htm 文件代码修改如下: ...

  4. 查看SQL语句在SQL Server上的执行时间

    set statistics profile onset statistics io onset statistics time ongo--begin <这里写上你的语句...>  se ...

  5. Introduction to Big Real Mode

    转自Merck Hung merck@olux.org, 洪豪謙 应朋友的要求, 希望我花一点时间整理一下 x86 Big Real Mode 的文章.另外也发现, 身边似乎有一些朋友也准备要开始从事 ...

  6. PMP考试

    今天是第二次PMP模拟考试,得了146分,比上次高25分,这次题目相对简单些,看来昨晚的复习没有白费,还是有效果的. 有些题目影响还是比较深刻,老外的项目管理思想是先规划好一切再执行(管理),比如信息 ...

  7. Windows Azure Virtual Machine 之用程序控制Azure VM

    我们在很多时候可能会需要用程序来控制VM的创建,删除工作. 而在这些工作之中,用程序创建一个VM将会是一个非常复杂的过程,因为他涉及到很多步骤. 具体步骤如下 1 创建一个Hosted cloud s ...

  8. REST WCF Service中的WebMessageBodyStyle

    这个参数是个枚举包括如下值: WebMessageBodyStyle.Bare WebMessageBodyStyle.Wrapped WebMessageBodyStyle.WrappedReque ...

  9. 安卓手机APP压力monkey测试

    一.Monkey概述 Monkey是Android中的一个命令行工具,可以运行在模拟器里或实际设备中.它向系统发送伪随机的用户事件流(如按键输入.触摸屏输入.手势输入等),实现对正在开发的应用程序进行 ...

  10. python 编辑文件时路径问题解决方法:文件或者目录不存在、文件编辑后无法保存等(以编辑xml文件为例)

    1.获取工程所在根路径:根路径=os.path.dirname(os.path.abspath('__file__')) 2.将获取的根路径和相对路径组合:组合路径=os.path.join(根路径, ...