<强>写在前面:
在做表格的时候,难免会碰到做统计的时候。由于在项目中涉及到做统计的功能比较简单,之后也就没有过多的去研究更复杂的,这里简单记录下。
这次就直接先上图:一个简单的例子
看到效果图还是很好的,也比较的简单、下面看一下具体的代码实现,这里也就直接上代码了。
% @ & lt;页面contentType=" text/html; charset=utf - 8”语言=癹ava”%比;
& lt; %字符串方案=request.getScheme ();
字符串serverName=request.getServerName ();
字符串contextPath=request.getContextPath ();
int port=request.getServerPort ();//网站的访问跟路径
字符串baseURL=计划+“://? serverName +”:“+端口
+ contextPath;
请求。setAttribute (“baseURL baseURL);
system . out。println (“baseURL:“+ baseURL);
%比;
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=" utf - 8 "/比;
& lt; %——设置即渲染方式(文档)默认为最高(这部分可以选择添加也可以不添加)——%比;
& lt;元http-equiv=癤-UA-Compatible”内容=癐E=边缘”比;
Members< & lt; title>工作;/title>
& lt; !——图标样式——比;
& lt;链接rel="样式表" type=" text/css " href=" https://www.yisu.com/zixun/$ {baseURL}/引导引导/css/bootstrap.min.css”rel=巴獠縩ofollow”/比;
& lt;链接的href=" https://www.yisu.com/zixun/$ {baseURL}/引导/bootstrap-table/bootstrap-table.css”rel=巴獠縩ofollow”rel="样式表"/比;
& lt;链接的href=" https://www.yisu.com/zixun/$ {baseURL}/引导/bootstrap-select/css/bootstrap-select.css”rel=巴獠縩ofollow”rel="样式表"/比;
& lt;链接的href=" https://www.yisu.com/zixun/$ {baseURL}/引导/bootstrap-dialog/css/bootstrap-dialog.css”rel=巴獠縩ofollow”rel="样式表"/比;
& lt; !——内联风格与这个页面——在
& lt; !——ace设置处理程序——比;
& lt;脚本src=" https://www.yisu.com/zixun/$ {baseURL}/引导引导/资产/js/jquery-2.0.3.min.js”祝辞& lt;/script>
& lt; !——(如果IE)比;
& lt; !——& lt;脚本src=" http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js "祝辞& lt;/script>——比;
& lt;脚本src=" https://www.yisu.com/zixun/$ {baseURL}/引导引导/资产/js/jquery-1.10.2.min.js”祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/$ {baseURL}/引导引导/资产/js/bootstrap.min.js”祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/$ {baseURL}/引导/bootstrap-table/bootstrap-table.js”祝辞& lt;/script>
& lt;风格类型=" text/css "比;
表、表tr th,表tr td {
边界:1 px固体# fac090;
}/*解决设置表头列宽无效*/表# {
表布局:固定;
}
& lt;/style>
& lt;/head>
& lt;身体比;
& lt; div比;
& lt;表id=" table_showMembers "祝辞& lt;/table>
& lt;/div>
& lt;/body>
& lt;脚本type=" text/javascript祝辞
$(函数(){
var table_showMembers=$ (' # table_showMembers ') .bootstrapTable ({
url:“$ {baseURL}/listProjectWorkItemAssignmentByProjAndWorkItemId& # 63; projId=151, workItemId=1”,
方法:‘得到’,//请求方式(*)
工具栏:“#工具栏',//工具按钮用哪个容器
条纹:真的,//是否显示行间隔色
缓存:假的,//是否使用缓存,默认为真实的,所以一般情况下需要设置一下这个属性(*)
分页:假的,//是否显示分页(*)
可分类的:假的,//是否启用排序
排序方式:“asc//排序方式
queryParams:函数(params){//自定义参数,这里的参数是传给后台的,我这是是分页用的
{//返回这里的参数是表提供的
startIndex: params.offset,//从数据库第几条记录开始
页大小:params.limit//每页记录数
}；
},//传递参数(*)
sidePagination:“服务器”,//分页方式:客户端客户端分页,服务器服务端分页(*)
pageNumber: 1、//初始化加载第一页,默认第一页
页大小:1、//每页的记录行数(*)
pageList:(2、4、6、8)//可供选择的每页的行数(*)//搜索:真的,//是否显示表格搜索,此搜索是客户端搜索,不会进服务端
contentType:“应用程序/x-www-form-urlencoded”,
strictSearch:没错,//showColumns:真的,//是否显示内容列下拉框//showRefresh:真的,//是否显示刷新按钮
minimumCountColumns: 2//最少允许的列数
clickToSelect:真的,//是否启用点击选中行//高度:700//行高,如果没有设置高度属性,表格自动根据记录条数觉得表格高度
宽度:50%,
uniqueId:“hrPerCode ",//每一行的唯一标识,一般为主键列//showToggle:真的,//是否显示详细视图和列表视图的切换按钮
cardView:假的,//是否显示详细视图
detailView:假的,//是否显示父子表
checkboxHeader:真的,//隐藏表头的复选框
singleSelect:假的,//开启单选
showFooter:真的,//开启底部
列:[
{
:“perCode”,
标题:“工號’,
valign:“中产”,
对齐:“中心”,
可见:真的,//隐藏列
宽度:100 px,
footerFormatter:功能(价值){
返回“工作项总小时”;
}
},
{
:“perName”,
标题:“姓名”,
对齐:“中心”,
宽度:150 px,
},
{
:“hasWorkedHours”,
标题:“投资小时”,
对齐:“中心”,
宽度:80 px,
格式化程序:功能(价值,行,指数){
返回row.hasWorkedHours +“H”;
},//计算此列的值
footerFormatter:函数(行){
var和=0;
我(var=0; i< rows.length;我+ +){
[我].hasWorkedHours总和+=行
}
返回总和+“H”;
}
},
),
onPostBody:函数(){//合并页脚
merge_footer ();
}
});
});//合并页脚
函数merge_footer () {//获取表表中页脚并获取到这一行的所有列
var footer_tbody=$ ('。fixed-table-footer tbody”表);
var footer_tr=footer_tbody.find(祝辞tr);
var footer_td=footer_tr.find(祝辞td);
var footer_td_1=footer_td.eq (0);//由于我们这里做统计只需要两列,故可以将除第一列与最后一列的列全部隐藏,然后再设置第一列跨列//遍历隐藏中间的列下标从1开始
(var i=1; i< footer_td.length-1;我+ +){
footer_td.eq (i) hide ();
}//设置跨列
footer_td_1。attr (colspan, footer_td.length-1),告诉();//这里可以根据自己的表格来设置列的宽度使对齐
footer_td_1。attr(“宽度”,“910 px”),告诉();
}
& lt;/script>
& lt;/html>
