bootstrap框架的好处是有很多的现成的样式可以直接使用， 比如做后台管理系统，每个页面都少不了列表查询，可以说每个页面都是在类似的重复。增删改查的列表查询很简单，按照固定的模式按部就班， 说白了就是复制以前的页面过来改改就可以了。
但管理后台的页面有时候需要做报表统计管理，这类需求的表格不一定是一行一列这样分明，有时候需要进行合并单元格，下面分享一个本人今天写的合并单元格的例子。
一、先展示一个基本表格（适合新手看）
效果如下：
主要html代码：
<!-- 搜索表单 -->
<div class="panel-body" >
<div class="clearfix"></div>
<form role="form" class="form-horizontal" id="query_form">
<div class="form-group">
<label for="qry_name"class="col-lg-2 col-sm-2 control-label">姓名:</label>
<div class="col-lg-3 col-sm-3">
<input type="text" class="form-control " name="qry_name" id="qry_name">
</div>
<label for="qry_id_no"class="col-lg-1 col-sm-2 control-label">身份证:</label>
<div class="col-lg-3 col-sm-3">
<input type="text" class="form-control " name="qry_id_no" id="qry_id_no">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="modalBtn2" onclick="queryData();">查询</button>
<button class="btn btn-primary" type="reset">重置</button>
</div>
</form>
</div>
<!-- 表格主体 -->
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane active">
<!-- toolbar栏(操作按钮栏) start -->
<div id="toolbar" class="btn-group">
<!-- 下面的i标签是展示图标的，fa fa-eye这个样式来自Font Awesome，若需要什么别的图标去找来替换class的值 -->
<button type="button" class="btn btn-primary" data-toggle="modal" id="queryBtn">
<i class="fa fa-eye"></i> 查看
</button>
<button type="button" class="btn btn-primary" data-toggle="modal" id="updateBtn">
<i class="fa fa-edit"></i> 修改
</button>
<!-- 新增删除或者其他按钮，以此类增，把id改一下 -->
</div>
<!-- toolbar栏(操作按钮栏) end -->
<!-- table标签，main-table是自定义样式 data开头的属性有很多，详细见bootstrap文档或者百度 -->
<table class="main-table" id="your-table-id" data-toggle="table"
data-click-to-select="true" data-search="false"
data-show-refresh="true" data-show-toggle="true"
data-show-columns="true" data-toolbar="#toolbar"
data-pagination="true" data-side-pagination="server"
data-sortable="true"
data-url="localhost/list.do"
data-page-list="[10, 20, 50, 100, 200]"
data-select-item-name="myRadioName">
<thead>
<tr>
<th data-field="state" data-radio="true"></th> <!-- 勾选列 -->
<th data-formatter="increasingNo">序号</th> <!-- 自增序号，increasingNo是一个函数名 -->
<th data-field="name">姓名</th>
<th data-field="id_no">身份证</th>
<th data-field="sex">性别</th>
<th data-field="age">年纪</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
-
Font Awesome是一个公开的样式文件， 下载来引入当前页面即可。需要什么图标可以去这里找找看有没自己想要的，没有就去网上找找会更多。
-
表格标签的data开头属性，非必须，但有些确实很实用。 比如
data-show-refresh="true"表示刷新数据，有这个属性在表格的右上角就会多出一个操作按钮。每页加载多少条枚举 data-page-list="[10, 20, 50, 100, 200]"、开启显示隐藏列 data-show-columns="true"这些也很实用，更多去这里学习一下或网上搜索关键词"BootstrapTable 列参数、属性、事件列表"去了解一下
js代码
//查询
function queryData() {
var usr_name = $('#qry_name').val();
var id_no = $('#qry_id_no').val();
var params = $("#query_form").serialize();
params = decodeURIComponent(params, true);
$('#your-table-id').bootstrapTable('removeAll');
$('#your-table-id').bootstrapTable('refresh', {
url : "localhost/list.do?usr_name="
+ usr_name+"&id_no="+id_no,
});
}
// 序号格式化
function increasingNo(value, row, index) {
return index + 1;
}
//金额格式化
function amtFmt(value, row, index) {
if(value == null){
return value;
}
value = value.toString().replace(/\$|\,/g, '');
if (isNaN(value))
value = "0";
flg = (value == (value = Math.abs(value))); // 正负数判断
value = Math.floor(value * 100 + 0.50000000001);
cents = value % 100;
value = Math.floor(value / 100).toString();
if (cents < 10)
cents = "0" + cents;
for (var i = 0; i < Math.floor((value.length - (1 + i)) / 3); i++)
value = value.substring(0, value.length - (4 * i + 3)) + ','
+ value.substring(value.length - (4 * i + 3));
return (((flg) ? '' : '-') + value + '.' + cents);
}
除了queryData每个页面都不一样，其他的函数是表格的列通过data-formatter来调用的，所以可以放一个专门的js文件里面公共通用，引入js即可。
表头样式
.main-table >thead >tr >th{
background-color: #191616;
font-weight: normal;
color:#fff;
}
二、下面说一下自定义表格(合并单元格)，先看下效果图
html代码：
<div class="form-group clearfix">
<label class="col-lg-1 col-sm-2 control-label"></label>
<div class="col-lg-9">
<table class="main-table" id="your_table_id" data-toggle="table"></table>
</div>
</div>
只要有个table标签就行了， table标签里面也不用啥<thead><tr><th>之类的，写了也会被覆盖掉。而且我们一般每次刷新页面都是先清除一下table内的东西在放新的到里面去。
js代码
$(function(){
// 表格的主数据
var myData = [
{
'month': "1月",
'zhangsan_tot_num': 12,
'zhangsan_tot_amt': 120,
'lisi_tot_num': 10,
'lisi_tot_amt': 100
}
];
$("#your_table_id").bootstrapTable('destroy');//初始化页面表格数据
$("#your_table_id").bootstrapTable({
data: myData, // 数据来源
columns: [ // 设置行，每个中括号表示一行，中括号里面的大括号表示（合并后的）单元格
[
{
title: "销售统计年度汇总表", // 单元格文本内容
valign:"middle", // 单元格垂直对齐方式
align:"center", // 单元格水平对齐方式
colspan: 5 //该单元格横跨5个单元格(可省略, 默认1)
}
],
[
{
title: "月份",
field: 'month', // 字段名, 会从myData里面找到这个字段名对应的值来展示
valign:"middle",
align:"center",
rowspan: 2 //该单元格竖跨2行(可省略, 默认1)
},
{
title: "张三",
valign:"middle",
align:"center",
colspan: 2
},
{
title: "李四",
valign:"middle",
align:"center",
colspan: 2
}
],
[
{
field: 'zhangsan_tot_num',
title: '成交笔数',
valign:"middle",
align:"center"
},
{
field: 'zhangsan_tot_amt',
title: '成交金额',
valign:"middle",
align:"center"
},
{
field: 'lisi_tot_num',
title: '成交笔数',
valign:"middle",
align:"center"
},
{
field: 'lisi_tot_amt',
title: '成交金额',
valign:"middle",
align:"center"
}
]
]
});
});
上面注释也写的比较清楚了，细看。这个表头其实就是一个规则，合并的单元格想要跨几行几列，通过colspan和rowspan来控制就可以实现。数据行通过field来绑定字段名取值，当然数据得提前放在myData这个数组里备好。
如上我仅是写死一行数据展示效果，一年12个月需要12条数据甚至别的表可能更多的数据行，那就遍历数据结果集，给这个数组赋值即可， 可以参考如下。
var myData= new Array(); // 数组，存储后台返回数据
var params = new Object; //传参,
params["month"] = "8"; // 搜索条件参数, 只查8月数据
$.ajax({
type : "POST",
url : "localhost/list.do",
data : params,
dataType : "json",
async : false,
error : function(request) {
// 提示失败
},
success : function(data) {
var code = data.code;
var msg= data.msg;
if (msg == '1') {
alert("查询成功！");
var list = data.list; // 取出结果集 list
$.each(list, function(index, item) {
var json = {};
json.month = item.month;
json.zhangsan_tot_num = item.zhangsan_tot_num;
json.zhangsan_tot_amt = item.zhangsan_tot_amt;
json.lisi_tot_num = item.zhangsan_tot_num;
json.lisi_tot_amt = item.zhangsan_tot_amt;
myData.push(json); // 往数组里添加元素
});
} else {
// 提示失败具体原因
alert(msg);
return;
}
}
});
上面文章基本表格里面，提及到table，tr，th标签有很多的data-开头的属性，这些属性也同样可以用在自定义表格中。用法区别是写在大括号里，而且去掉了data-这个前缀，就可以照葫芦画瓢了。比如下面这段，如果后台只返回了数字不带单位月字，那就前端处理。与基本表格里面，tr标签的data-formatter="addUnit"是一样的效果。
{
title: "月份",
field: 'month', // 字段名, 会从myData里面找到这个字段名对应的值来展示
valign:"middle",
align:"center",
rowspan: 2, //该单元格竖跨2行(可省略, 默认1)
formatter:addUnit // 这个函数自动拼接单位 月 这个字符串
},
//对应的函数
function addUnit(value, row, index) {
return value + "月";
}
2288
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
