bootstrap表格自定义表头

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 + "月";
}

bootstrap表格自定义表头相关推荐

elementui 表格表头竖着显示_ElementUI中table表格自定义表头Tooltip文字提示
picture table-header-tips 应用 element 中的 table 组件,自定义表头 Tooltip 文字提示. 效果图效果图示例 demo 代码引用 element-u ...
ant 表格自定义表头和表格筛选
1.ant 自动表格筛选组件对某一列数据进行筛选,使用列的 filters 属性来指定需要筛选菜单的列,onFilter 用于筛选当前数据,filterMultiple用于指定多选和单选. 表头设置 ...
bootstrap 表格表头固定
效果效果是在pc端和移动端能够使表格的表头固定,并且在顶部,支持缩放时布局不乱. 核心技术利用css的position:fixed 属性来脱离文档流,达到表头固定的效果. 代码说明都在代码里面, ...
ppwjs之bootstrap表格：String.到表头单元格元素和 String.到表格单元格元素
2019独角兽企业重金招聘Python工程师标准>>> <!DOCTYPT html> <html><head><meta http-equ ...
elementui表格如何自定义表头内容，让表头变得更美观
举例说明:(初始效果) <el-table-column label="是否已完成" align="center" width="70" ...
Bootstrap Bootstrap表格插件bootstrap-table配置与应用小结
Bootstrap表格插件bootstrap-table配置与应用小结 by:授客 QQ:1033553122 1. 测试环境 win7 JQuery-3.2.1.min.js 下载地址: h ...
WPF DataGrid 通过自定义表头模拟首行固定
WPF DataGrid 通过自定义表头模拟首行固定独立观察员 2021 年 9 月 25 日最近工作中要在 WPF 中做个表格,自然首选就是 DataGrid 控件了.问题是,UI 设计的表格是 ...
el-table表格在表头和数据行添加图标、处理数据
通过header插槽自定义表头: <template slot="header" slot-scope="scope">... </templ ...
table多行表头合并 vue_vue elementUI table 自定义表头和行合并的实例代码
最近项目中做表格比较多,对element表格的使用,只需要传递进去数据,然后写死表头即可渲染. 但现实中应用中,如果写死表头,并且每个组件中写自己的表格,不仅浪费时间而且消耗性能.这个时候需要动态渲染 ...

bootstrap表格自定义表头

bootstrap表格自定义表头相关推荐

最新文章

热门文章