最近在做报表的需求，前端之前的前辈用的是beetl模版，增加个搜索功能简直要命，最后直接用jquery去拼接。
1.查询
这里查询按钮简单的前端我就不写了，主要是js的方法要怎么去写和拼接，我这块业务是表中表，套娃有点复杂。主要的逻辑是先把最外层的表追加到html中，再把子表追加进主表，其中主表和字表需要有index关联。
searchByAgeAndSubject = function () {
let id = $("#id").val();
//这是我的两个查询条件的input，训练者年龄和训练项目
let trainAge = $("#trainAge").val();
let trainSubjectName = $("#trainSubjectName").val();
console.log(id + ":" + trainAge + ":" + trainSubjectName);
//ajax请求的地址（id用了@PathVariable注解，其他两个参数为可选项）
let finalUrl = "/train/trainSelect/" + id + "?age=" + trainPoliceAge + "&subjectName=" + trainSubjectName;
$.ajax({
type: "POST",
url: finalUrl,
contentType: "application/json",
dataType: "json",
success: function (trainDetail) {
//清除主表和字表的数据
$("tbody").children().remove();
//eval字符串解析成json
let trainPlanDetailList = eval(JSON.stringify(trainDetail.plan.planDetailList));
let registrationList = eval(JSON.stringify(trainDetail.registrationList));
let trainPersonArray = eval(JSON.stringify(trainDetail.plan.planPsList));
let trScore = "";
for (let i = 0; i < trainPersonArray .length; i++) {
//训练员信息（主表）
let index = Number(i) + Number(1);
let personItem = trainPersonArray [i];
let tr = "<tr>"
+ "<td class='wraptd'></td>"
+ "<td class='wraptd'>" + personItem .courtName + "</td>"
+ "<td class='wraptd'>" + personItem .name + "</br>（" + personItem .age + "岁）</td>"
+ "<td class='wraptd'>"
+ "<table id='personTrainCoreTable_" + index + "' class='wraptable'>"
+ "<thead>"
+ "<tr>"
+ "<th class='wrapth' style='width: 20%'>考核科目</th>"
+ "<th class='wrapth' style='width: 20%'>成绩</th>"
+ "<th class='wrapth' style='width: 10%'>单位</th>"
+ "<th class='wrapth' style='width: 15%'>分数</th>"
+ "<th class='wrapth' style='width: 20%'>备注</th>"
+ "</tr>"
+ "<tbody id='zibiao'>"
+ "</tbody>"
+ "</thead>"
+ "</table>"
+ "</td>"
+ "</tr>";
if (trainSubjectName == null || trainSubjectName === "") {
//如果训练项目名称为空，则表示查询所有，直接追加所有训练员信息到表格
$("#personTrainTable").append(tr);
}
// 训练员成绩（子表）
for (let j = 0; j < registrationList.length; j++) {
//用来和主表关联的id
let indexScore = Number(j) + Number(1);
let trainPlanDetail= trainPlanDetailList[j];
/*已经登记的值*/
let achievement = "";
let unit = "";
let score = "";
let remark = "";
let flag = "";
if ((trainPlanDetail.sex !== "1" && trainPlanDetail.sex !== "2")
|| (trainPlanDetail.sex === "1" && personItem.sex === "男")
|| (trainPlanDetail.sex === "2" && personItem.sex === "女")) {
//只有训练员员性别和训练计划性别相同时才会追加成绩表
for (let k = 0; k < registrationList.length; k++) {
let registration = registrationList[k];
if (registration.pcId === personItem.pcId
&& registration.subjectId === trainPlanDetail.subjectId) {
achievement = registration.achievement;
unit = registration.unit;
score = registration.score;
remark = registration.remark;
flag = registration.status;
}
trScore = "<tr id='tr_" + indexScore + "' subjectId='" + trainPlanDetail.subjectId + "'>"
+ "<td class='wraptd'>" + trainPlanDetail.subjectName + "</td>"
//成绩
+ "<td class='wraptd'>"
+ "<input id='achievement_" + personItem.pcId + "_" + trainPlanDetail.subjectId + "'"
+ " value='" + achievement + "'"
+ " autocomplete='off' type='text' "
+ " class='form-control'"
+ " οnclick=\"JxglExaminationPlanAdd.getScore(\'" + personItem.pcId + "','" + trainPlanDetail.subjectId + "')\""
+ " placeholder='选择或者手动输入成绩' style='text-align: center;' >"
+ "</td>"
//单位
+ "<td class='wraptd'>"
+ "<input id='" + personItem.pcId + "_" + trainPlanDetail.subjectId + "'"
+ " value= '" + trainPlanDetail.unit + "' "
+ " autocomplete='off' type='text' "
+ " class='form-control' readonly='readonly' style='text-align: center' >"
+ "</td>"
//分数
+ "<td class='wraptd'>"
+ "<input id='unit_" + personItem.pcId + "_" + trainPlanDetail.subjectId + "'"
+ " value= '" + score + "' "
+ " autocomplete='off' type='text' "
+ " class='form-control' "
+ " placeholder='请录入分数' style='text-align: center' >"
+ "</td>"
//备注信息
+ "<td class='wraptd'>"
+ "<input id='remark_" + personItem.pcId + "_" + trainPlanDetail.subjectId + "'"
+ " value= '" + remark + "' "
+ " autocomplete='off' type='text' "
+ " class='form-control' "
+ " placeholder='备注信息' >"
+ "</td>"
+ "<td class='wraptd'>";
//判断免考
if (flag === '2') {
trScore = trScore + "<input type='checkbox' id='flag_" + personItem.pcId + "_" + trainPlanDetail.subjectId + "' checked=true></td>"
} else {
trScore = trScore + "<input type='checkbox' id='flag_" + personItem.pcId + "_" + trainPlanDetail.subjectId + "' ></td>"
}
//补充tr尾标签
trScore = trScore + "</tr>";
}
if (trainSubjectName != null && trainSubjectName !== "") {
//如果训练项目名称不为空，则表示查询指定项目，仅在项目性别和警员性别一致时追加
$("#personTrainTable").append(tr);
}
//追加到指定警员信息table
$("#personTrainCoreTable_" + index).append(trScore);
}
}
}
//序号追加
let oTable = document.getElementById("psList");
for (let count = 0; count < oTable.rows.length; count++) {
oTable.rows[count].cells[0].innerHTML = (count + 1);
}
},
error: function (trainDetailError) {
console.log("请求失败：" + trainDetailError);
}
});
};
2.追加序号
正文
//序号追加psList为tbody的id
let oTable = document.getElementById("psList");
for (let count = 0; count < oTable.rows.length; count++) {
oTable.rows[count].cells[0].innerHTML = (count + 1);
}
3.子标题
正文
在这里插入代码片
4.子标题
正文
在这里插入代码片
5.子标题
正文
在这里插入代码片