网站静态页面做网站,购物网站首页图片,东莞网站开发建设,html页面布局模板如何将数据库某列的值#xff08;如日期#xff09;作为表格的列名
需求#xff1a;前端需要展示如下的二维表格#xff0c;其中表格的日期是数据库表里data的值#xff0c;每行不同的值是表格里的字段值#xff0c;也就是需要将表里的数据行转列#xff0c;列转行如日期作为表格的列名
需求前端需要展示如下的二维表格其中表格的日期是数据库表里data的值每行不同的值是表格里的字段值也就是需要将表里的数据行转列列转行本来想着通过sql和mybatis映射完成转换但是搜了一下没有找到自己想要的方法只好通过java代码来完成转换。 前端代码
template
div
el-form :modelsearchForm refsearchForm sizesmall :inlinetrue label-width68px
el-form-item label日期 propdate
el-date-picker
v-modelsearchForm.date
typedaterange
range-separator至
start-placeholder开始日期
end-placeholder结束日期
/
/el-form-item
el-form-item
el-button typeprimary iconel-icon-search sizemini clickquery搜索/el-button
el-button typeinfo iconel-icon-download sizemini clickupload导出/el-button
el-button iconel-icon-refresh sizemini clickresetQuery重置/el-button
/el-form-item
/el-formel-table :datausdDataList border stripe v-loadingloading
el-table-column propdate label日期 width155 aligncenter
el-table-column propd0 label项目USD width155 aligncenter/el-table-column
/el-table-column
el-table-column
v-for(item,index) in listLabel
:keyindex
:propitem.prop
:labelitem.label
/
/el-table
el-table :dataureDataList border stripe v-loadingloading
el-table-column propdate label日期 width155 aligncenter
el-table-column propd0 label项目EUR width155 aligncenter/el-table-column
/el-table-column
el-table-column
v-for(item,index) in listLabel
:keyindex
:propitem.prop
:labelitem.label
/
/el-table
/div
/template
script
import Api from /constants/Api.js;
import { getDate, getNextDate, parseTime } from /utils/utils;
export default {
name: zmqldxcsb,
data() {
return {
listLabel: [],
usdDataList: [],
ureDataList: [],
searchForm: {
date: [getDate(0), getDate(30)]
},
loading: false
};
},
created() {
this.query();
},
methods: {
resetQuery() {
this.searchForm {
date: [getDate(0), getDate(30)]
};
},
query() {
this.loading true;
this.$axios({
method: post,
url: Api.freeTradMobility,
data: {
startTime: parseTime(this.searchForm.date[0], {y}{m}{d}),
endTime: parseTime(this.searchForm.date[1], {y}{m}{d})
}
})
.then(res {
this.listLabel res.labelList;
this.usdDataList res.dataMap[USD];
this.ureDataList res.dataMap[EUR];
this.loading false;
})
.catch(error {
console.log(error.message);
this.$message.error(查询数据出错);
this.loading false;
});
}
};
/script
style scoped
/* ::v-deep .el-table thead.is-group th {
background: none;
padding: 0px;
} */
::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type {
border-bottom: none;
}
::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type div.cell {
text-align: right;
}
::v-deep .el-table thead.is-group tr:last-of-type th:first-of-type div.cell {
text-align: left;
}
::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type:before {
content: ;
position: absolute;
width: 1px;
height: 100px;
top: 0;
left: 0;
background-color: grey;
opacity: 0.2;
display: block;
transform: rotate(-43deg);
transform: rotate(-70deg);
-webkit-transform-origin: top;
transform-origin: top;
}
::v-deep .el-table thead.is-group tr:last-of-type th:first-of-type:before {
content: ;
position: absolute;
width: 1px;
height: 100px;
bottom: 0;
right: 0;
background-color: grey;
opacity: 0.2;
display: block;
transform: rotate(-45deg);
transform: rotate(-70deg);
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
::v-deep .el-table thead.is-group th {
height: 27.4px;
}
/style每个表格的代码
el-table :datausdDataList border stripe v-loadingloading
el-table-column propdate label日期 width155 aligncenter
el-table-column propd0 label项目USD width155 aligncenter/el-table-column
/el-table-column
el-table-column
v-for(item,index) in listLabel
:keyindex
:propitem.prop
:labelitem.label
/
/el-table下面是需要的数据格式其中日期是动态的所以日期和每行的数据是分开的日期的数据格式
labelList: [
{
label: 20231024,
prop: d20231024
},
{
label: 20231025,
prop: d20231025
},
{
label: 20231026,
prop: d20231026
},
{
label: 20231027,
prop: d20231027
},
{
label: 20231028,
prop: d20231028
}
],label就是每列展示的日期值prop就是每行绑定的数据。
表格数据的格式
[
{
d20231028: 10,
d0: 日出余额,
d20231027: 10,
d20231026: 10
},
{
d20231028: 10,
d0: 总行2036,
d20231027: 10,
d20231026: 10
},
{
d20231028: 10,
d0: 即远期,
d20231027: 10,
d20231026: 10
},
{
d20231028: 10,
d0: 掉期,
d20231027: 10,
d20231026: 10
},
{
d20231028: 10,
d0: 拆借,
d20231027: 10,
d20231026: 10
},
{
d20231028: 10,
d0: 回购,
d20231027: 10,
d20231026: 10
},
{
d20231028: 10,
d0: TRS,
d20231027: 10,
d20231026: 10
},
{
d20231028: 10,
d0: 债券到期,
d20231027: 10,
d20231026: 10
},
{
d20231028: 10,
d0: 债券投资,
d20231027: 10,
d20231026: 10
},
{
d20231028: 10,
d0: 客户进出款合计,
d20231027: 10,
d20231026: 10
},
{
d20231028: vdvdsvd,
d0: 备注,
d20231027: vdvdsvd,
d20231026: vdvdsvd
},
{
d20231028: 10,
d0: 日终余额,
d20231027: 10,
d20231026: 10
}
]其中d0就是表格代码第三行的propd0绑定的值其余的就是每个日期绑定的值。 针对这两种格式我们在java代码中就是需要把查到的数据进行组装。
java代码如下。
Autowired
private DaoSupport daoSupport;//方法入口
public FrnFreeTradMobilityOut query(FrnFreeTradMobilityIn input) {
//处理时间
String startDate input.getStartTime();
String endDate input.getEndTime();
//生成日期的集合
ListLabel labels createdLabelList(startDate, endDate);FrnFreeTradMobilityOut out new FrnFreeTradMobilityOut();
out.setLabelList(labels);
MapString, Object queryMap new HashMap();
queryMap.put(startDate, startDate);
queryMap.put(endDate, endDate);//查询表格数据
ListFrnFreetradMobilityPo list daoSupport.selectList(FrnFreetradMobilityPo.class.getName() .select, queryMap);//组装数据因为我是多个表格所以采用map形式key为每个表格的名称值为表格数据如果只有一个表格可以用返回list
MapString, ListMapString, String dataMap createdDataMap(list);
out.setDataMap(dataMap);
return out;
}private MapString, ListMapString, String createdDataMap(ListFrnFreetradMobilityPo list) {
MapString, ListMapString, String result new HashMap();
//循环处理每条记录
for (int i 0; i list.size(); i) {
FrnFreetradMobilityPo frnFreetradMobilityPo list.get(i);
String project frnFreetradMobilityPo.getProject();//判断当前数据所在的表格是否在map中不存在就初始化
if (!result.containsKey(project)) {
initDataMap(result, project);
}
ListMapString, String dataList result.get(project);
//如下map是每行的数据rcyeMap对应的是日出余额行的数据其余的同理
MapString, String rcyeMap dataList.get(0);
MapString, String zhMap dataList.get(1);
MapString, String jyqMap dataList.get(2);
MapString, String dqiMap dataList.get(3);
MapString, String cjieMap dataList.get(4);
MapString, String hgouMap dataList.get(5);
MapString, String TRSMap dataList.get(6);
MapString, String zqdqMap dataList.get(7);
MapString, String zqtzMap dataList.get(8);
MapString, String khjckMap dataList.get(9);
MapString, String bzMap dataList.get(10);
MapString, String rzyeMap dataList.get(11);String key d frnFreetradMobilityPo.getDate();
rcyeMap.put(key, frnFreetradMobilityPo.getRcye());
zhMap.put(key, frnFreetradMobilityPo.getZh());
jyqMap.put(key, frnFreetradMobilityPo.getJyq());
dqiMap.put(key, frnFreetradMobilityPo.getDqi());
cjieMap.put(key, frnFreetradMobilityPo.getCjie());
hgouMap.put(key, frnFreetradMobilityPo.getHgou());
TRSMap.put(key, frnFreetradMobilityPo.getTrs());
zqdqMap.put(key, frnFreetradMobilityPo.getZqdq());
zqtzMap.put(key, frnFreetradMobilityPo.getZqtz());
khjckMap.put(key, frnFreetradMobilityPo.getKhjck());
bzMap.put(key, frnFreetradMobilityPo.getBz());
rzyeMap.put(key, frnFreetradMobilityPo.getRzye());//eur的表比别的多一列这时进行特殊处理
if (FrnConstans.EUR.equals(project)) {
MapString, String xxzdMap dataList.get(12);
xxzdMap.put(key, frnFreetradMobilityPo.getXzzd());
}
result.put(list.get(i).getProject(), dataList);
}
if (result.containsKey(EUR)) {
result.get(EUR).add(1, result.get(EUR).get(12));
result.get(EUR).remove(13);
}return result;
}//每行数据的初始化
private void initDataMap(MapString, ListMapString, String result, String project) {
List date new ArrayList();
MapString, String rcyeMap new HashMap();
MapString, String zhMap new HashMap();
MapString, String jyqMap new HashMap();
MapString, String dqiMap new HashMap();
MapString, String cjieMap new HashMap();
MapString, String hgouMap new HashMap();
MapString, String TRSMap new HashMap();
MapString, String zqdqMap new HashMap();
MapString, String zqtzMap new HashMap();
MapString, String khjckMap new HashMap();
MapString, String bzMap new HashMap();
MapString, String rzyeMap new HashMap();rcyeMap.put(d0, 日出余额);
zhMap.put(d0, 总行2036);
jyqMap.put(d0, 即远期);
dqiMap.put(d0, 掉期);
cjieMap.put(d0, 拆借);
hgouMap.put(d0, 回购);
TRSMap.put(d0, TRS);
zqdqMap.put(d0, 债券到期);
zqtzMap.put(d0, 债券投资);
khjckMap.put(d0, 客户进出款合计);
bzMap.put(d0, 备注);
rzyeMap.put(d0, 日终余额);date.add(rcyeMap);
date.add(zhMap);
date.add(jyqMap);
date.add(dqiMap);
date.add(cjieMap);
date.add(hgouMap);
date.add(TRSMap);
date.add(zqdqMap);
date.add(zqtzMap);
date.add(khjckMap);
date.add(bzMap);
date.add(rzyeMap);//eur表的特殊处理
if (FrnConstans.EUR.equals(project)) {
MapString, String xxzdMap new HashMap();
xxzdMap.put(d0, 线下账单);
date.add(xxzdMap);
}
result.put(project, date);
}//创建日期的数据Label类的代码在最后
private ListLabel createdLabelList(String startDate, String endDate) {
ListLabel labelList new ArrayList();
LocalDate startTime LocalDate.of(Integer.parseInt(startDate.substring(0, 4)),Integer.parseInt(startDate.substring(4, 6)), Integer.parseInt(startDate.substring(6, 8)));
LocalDate endTime LocalDate.of(Integer.parseInt(endDate.substring(0, 4)), Integer.parseInt(endDate.substring(4, 6)), Integer.parseInt(endDate.substring(6, 8)));
long between ChronoUnit.DAYS.between(startTime, endTime);
for (int i 0; i between; i) {
LocalDate date startTime.plusDays(i);
Label label new Label(date.toString().replace(-, ), d (date.toString().replace(-, )));
labelList.add(label);
}
return labelList;
}Data
AllArgsConstructor
public class Label {
private String label;
private String prop;
}以上就是前后端所有的代码了如果您有更好的实现方法欢迎您分享您的方法。
