应公司需求，改版公司ERP的数据显示样式。由于前期开发的样式是bootstrap，所以选bootstrap-table理所当然(也是因为看了bootstrap-table官网的example功能强大，样式清爽)。
然后... ... 开启bootstrap-table填坑之旅。
开始就扒本园的资源，确实有不少bootstrap-table的文章。确实写的不错很详细，请恕本菜实在菜了点，看了半天demo的页面都没弄出来(勿吐槽~~)。终于11点了.. .. 于是决定跟着官网的小白教程一点点的玩。
ready... ..
one. 怎么把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一样写就行了。
tow. 加载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。
three. 装饰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 cellStyle(value, row, 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设置该列单元格对齐。
four. 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-name="stargazers_count" 和 data-sort-order="asc"这俩属性找了半天没找到准确的解释，从字面意思理解应该是默认的排序函数名和排序方式，总之带上总没错。
five. 单元格 格式化
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 .. ...
six. 显示隐藏列
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。
seven. 选择列 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属性，通过disabled checked控制checkbox是否可用和是否被选中。
eight. 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:表格视图。
待续 待续