최근 보고서를 작성하기 위해 프론트 엔드 이전의 선배들은 beetl 템플릿을 사용했으며 검색 기능을 추가하는 것은 단순히 끔찍하고 마지막으로 jquery를 직접 사용하여 연결합니다.
1. 쿼리
여기서는 쿼리 버튼의 간단한 프런트 엔드를 작성하지 않고 주로 js 메서드를 작성하고 연결하는 방법을 작성합니다.내 비즈니스는 테이블 내의 테이블이며 중첩 인형은 약간 복잡합니다. 기본 논리는 먼저 가장 바깥쪽 테이블을 html에 추가한 다음 하위 테이블을 기본 테이블에 추가하는 것입니다. 여기서 기본 테이블과 하위 테이블은 인덱스와 연결되어야 합니다.
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. 자막
텍스트
在这里插入代码片