1
1
最近要做一个统计表格,主要是有两个问题
第一:列太多需要实现组合表头
第二:需要根据统计的纬度来动态的添加表格的列
先来看看效果吧:
组合表头效果
动态列效果,选择了服务和用户选项,表格里面会添加这两个列
下面说下如何实现,先说组合表头,我用的是ruoyi搭的框架,ruoyi表格用的bootstrap-table,所以可以相互借鉴。
初始化表格的js方法是这样,columns是一个数组,里面放的是表格的列信息
function initTable(columns){
var options = {
url: prefix + "/list",
showSearch: false,
showRefresh: false,
showToggle: false,
showColumns: false,
columns: columns
};
$.table.init(options);
}
组合表头和一般表头的区别就是,一般表头是一个一元数组,而组合表头是一个多元数组,简单的说,表头有几行,就是一个几元数组。
一般表头:
var header =[{title : '文件数量', field : 'fileNum'},{title : '文件大小', field : 'fileSize'}]
组合表头:
var finalColumns =[];
var header1 = [{title : '上传', align : 'center', colspan : 6},
{title : '下载', align : 'center', colspan : 6},
{title : '总览', align : 'center', colspan : 6}]
var header2=[{title : '文件数量', align : 'center', colspan: 3},
{title : '文件大小', align : 'center', colspan: 3},
{title : '文件数量', align : 'center', colspan: 3},
{title : '文件大小', align : 'center', colspan: 3},
{title : '文件数量', align : 'center', colspan: 3},
{title : '文件大小', align : 'center', colspan: 3}]
var header3=[{field : fileNum title : '文件数量'}.....]
// 将组合表头push到一个数组中
finalColumns.push(header1,header2,header3);
var options = {
url: prefix + "/list",
showSearch: false,
showRefresh: false,
showToggle: false,
showColumns: false,
columns: finalColumns
};
$.table.init(options);
这样就可以通过多元数组实现组合表头,但是还有个关键一定要根据自己的表格情况合理的设置 rowspan和colspan 这两个属性
再来说说表格动态列
这个其实也比较简单,就是在加载表格之前,请求后台,获取动态列的数据,再初始化表格就行了
直接贴代码:
js中请求动态列1
function ajaxColumns() {
var url = prefix + "/ajaxColumns";
var dataParam = {"columns":getColumns()}
$.modal.loading("正在查询中,请稍后...");
$.post(url, dataParam, function(result) {
if (result.code == web_status.SUCCESS) {
setColumns(result.data.dynamicList,result.data.nomalList);
} else if (result.code == web_status.WARNING) {
$.modal.alertWarning(result.msg)
} else {
$.modal.alertError(result.msg);
}
$.modal.closeLoading();
});
}
组装列具体方法,dynamicList 是需要勾选的动态的列,nomalList 是固定的几个列
function setColumns(dynamicList,nomalList) {
var header=[];
dynamicList.forEach(function(item) {
header.push({
field : item.field,
title : item.title,
align : 'center',
colspan: 1,
rowspan: 3
})
})
header.push(
{title : '上传', align : 'center', colspan : 6},
{title : '下载', align : 'center', colspan : 6},
{title : '总览', align : 'center', colspan : 6});
var middle = [
{title : '文件数量', align : 'center', colspan: 3},
{title : '文件大小', align : 'center', colspan: 3},
{title : '文件数量', align : 'center', colspan: 3},
{title : '文件大小', align : 'center', colspan: 3},
{title : '文件数量', align : 'center', colspan: 3},
{title : '文件大小', align : 'center', colspan: 3}
]
var columns = [];
var finalColumns =[];
nomalList.forEach(function(item) {
if($.common.equals('size',item.type)){
columns.push({
field : item.field,
title : item.title,
align: 'center',
formatter: function(value, row, index) {
value = value/(1024*1024*1024);
return value.toFixed(2)+"GB"
}
})
}
else if($.common.equals('num',item.type)){
columns.push({
field : item.field,
title : item.title,
align: 'center',
formatter: function(value, row, index) {
return formatNumber(value)+"个"
}
})
}
else {
columns.push({
field : item.field,
title : item.title,
align: 'center'
})
}
});
finalColumns.push(header,middle,columns)
if(!table.get(table.options.id)){
initTable(finalColumns);
} else {
refreshTable(finalColumns);
}
}
@PostMapping("/ajaxColumns")
@ResponseBody
public AjaxResult ajaxColumns(String columns) {
//固定列元素
List<TableColumnVo> list = new ArrayList<TableColumnVo>() {{
add(new TableColumnVo("总数", "uploadTotalNum","num"));
add(new TableColumnVo("成功数", "uploadSuccessNum","num"));
add(new TableColumnVo("失败数", "uploadFailedNum","num"));
add(new TableColumnVo("总量", "uploadTotalSize","size"));
add(new TableColumnVo("成功数据量", "uploadSuccessSize","size"));
add(new TableColumnVo("失败数据量", "uploadFailedSize","size"));
......
}};
//动态列元素
List<TableColumnVo> dynamicList = new ArrayList<TableColumnVo>(){{
add(new TableColumnVo("统计时间", "statDate"));
}};
//根据前端选择条件添加动态列
if (StringUtils.isNotEmpty(columns)) {
Map<String, TableColumnVo> dynamicColumnsMap = new HashMap<String, TableColumnVo>() {{
put("SERVICE_NAME", new TableColumnVo("服务名", "serviceName"));
put("BIZ_NAME", new TableColumnVo("业务名", "bizName"));
put("USER_NAME", new TableColumnVo("用户名", "userName"));
}};
String[] arr = columns.split(",");
for (String item : arr) {
if (StringUtils.isNotEmpty(item)) {
TableColumnVo tableColumnVo = dynamicColumnsMap.get(item);
if (tableColumnVo != null) {
dynamicList.add(tableColumnVo);
}
}
}
}
Map<String,List<TableColumnVo>> map = new HashMap<>();
map.put("dynamicList",dynamicList); //动态列
map.put("nomalList",list);//固定列
return AjaxResult.success(map);
}
public class TableColumnVo {
/** 表头 */
private String title;
/** 字段 */
private String field;
/** 类型 用于前端单位转换
* num:文件个数
* size:文件大小
* */
private String type;
}
根据前端传回的信息(勾选了那几个动态列),后端进行组合
dynamicList.forEach(function(item) {
header.push({
field : item.field,
title : item.title,
align : 'center',
colspan: 1,
rowspan: 3
})
})
前端拿到数据之后push到数组中,最后push到多元数组中,进行表格初始化